浅析JavaScript动画

今天，小学生以自己浅薄的见地，在前辈大能的基础上写这篇文章，希望给大家打开一扇窥探JavaScript（以下简称JS）动画的窗户。

JS如何制造出动画效果？

　　结合浏览器提供的 setInterval 或 setTimeout API，高频改变DOM元素的一些属性，即可创造一个肉眼可见的动画效果。一个看起来非常流畅的JS动画除了需要良好的变换算法外，与其执行宿主也是非不开的。程序写得再好，如果浏览器过于老旧，电脑CPU性能低下，也会出现卡顿，甚至卡死。

　　执行一个动画函数对于浏览器来说是个苦差，设置动画一帧为多长时间才能既流畅又不损耗性能呢？浏览器不会傻到进行一个DOM操作，就去渲染一次页面。它会把一个周期内所有的DOM操作整合起来，统一进行一次渲染。这个周期大约在16.7ms左右，不同浏览器间会有几毫秒的差异。SetTimeout的第二个参数设置为1000/60是比较合乎情理的做法。不过了解过SetTimeout运行机制的都会清楚，这个时间并不可靠，其根据实际情况会有些许甚至相当大的延迟。那么有没有这样一个API？我不想知道你浏览器到底多久渲染一次，反正你渲染的时候给我的动画执行一帧就行了。答案是有，requestAnimationFrame，可以让函数随着浏览器渲染执行，并且执行时机是可靠的。注意，这个方法在现在浏览器及IE10+才被支持。

　　现在可以封装起一个简单的requestAnimationFrame，下面的例子中将会使用到它。

window.requestAnimFrame = (function(){ return window.requestAnimationFrame    ||     window.webkitRequestAnimationFrame ||     window.mozRequestAnimationFrame  ||     function( callback ){      window.setTimeout(callback, 1000 / 60);     };})();

　　更加详细的封装可以在张鑫旭的博客中看到：张鑫旭：requestAnimFrame。下面让我们继续。

动画函数的编写

　　有了requestAnimationFrame，下面该考虑一下如何让写动画函数了。一般来说我们会给出一个毫秒级的during值，限制这个动画必须要在这个时间内完成。下面以实现一个小球从离页面左侧100px处匀速运动到800px处为例，编写一个动画函数：戳我查看DEMO。

      var ele = document.getElementById("block");      var start = Date.now();//获取动画开始的时间。      var during = 1000; //此动画要在1秒内执行完。      var p=0;//动画完成度　从0-1；      requestAnimationFrame(function f(){        if(p>=1){ ele.style.left="800px";}//如果发现动画已经执行完，将元素置到终点。        else{          p=(Date.now()-start)/during;          ele.style.left=100+700*p+"px"; //从100px开始，匀速向右移动，共移动700px;          requestAnimationFrame(f);        }      })

　　上面函数中有一个关键变量：p，即percentage，我们可以称它为动画的完成度，它是根据当前时间计算得出的，并且从动画开始后，会从0~1匀速渐变。当其为1时，表示整个动画执行完毕。在这个函数中，让p乘以要运动的长度700，便会得到一个0-700匀速变化的值，将其加上开始的100，便可模拟小球从100px处匀速移动到800px处。