再聊聊javascript的动画函数-Demo
<div id="cnblogs_post_body">动画原理：最终是要设置elem的样式的，我们来看一下，下面一行代码:
elem.style = (alterStyle * e + startStyle).toFixed(3) + 'px';
简单一点，如果设置的是elem,的width那么是:
//alterStyle是变化量，由最后的值减去初始值得来
//startStyle是初始值
elem.style.width = alterStyle*e + startStyle + 'px';
上面的e是个比例值，是（curTime-startTime)/duration得来，
其中curTime是当前时间，startTime是开始时间，duration是动画持续的时间，所以范围e的范围是0.0~1.0。
以前研究过《JavaScript Tween算法及缓动效果》但是，浏览器的原因导致动画叠加，特别是切换浏览器选项卡的时候，浏览器频率下降，
过一段时间，再切换选项卡，动画乱了。
Easing算法就解决了这个问题。
具体实现如下：
<div class="cnblogs_code"> 1 /** 2 * 动画函数 3 * @paramDOMObject elem 文档节点对象 4 * @paramObject styles 动画后的最终状态 5 * @paramInt duration 动画时间长度 6 * @paramFunction callBack 动画结束的回调函数 7 * @return Function 动画的定时器函数 8*/ 9 function animate(elem, styles, duration, callBack) {10 var startTime = +new Date(), //记录当前时间，+new Date()为new Date().getTime()的简写11 endTime = startTime + duration, //结束时间12 curTime, //当前时间13 t, //当前时间，在总时间的比例，范围0.0~1.014 e, //动画算子15 timer, //setTimeout，的定时器16 startStyle = {}, //elem,动画前相关的样式17 alterStyle = {}, //elem,动话始末相关的样式差值18 //一个单位动画执行的函数19 run = function () {20 curTime = +new Date();21 //计算，当前时间，在总时间的比例，范围0.0~1.022 t = curTime > endTime ? 1 : (curTime - startTime) / duration;23 //动画算子24 e = easing(t);25 //设置样式26 for (var style in styles) {27 elem.style = (alterStyle * e + startStyle).toFixed(3) + 'px';28 }29 if (t < 1) {30 //t < 1.0表面动画未结束 ,每16毫秒递归一次run函数。31 timer = setTimeout(function () {32 run()33 }, 16);34 } else {35 //如果回调函数存在，执行回调函数36 callBack && callBack();37 }38 };39 40 for (var style in styles) {41 //初始，动画前相关的样式42 startStyle = parseInt(elem.style);43 //初始，动话始末相关的样式差值44 alterStyle = styles - startStyle;45 }46 47 run();48 49 return function () {50 timer && clearTimeout(timer);51 };52 };53 54 function easing(t) {55 return t;56 };
页:
[1]