经典动画

话不多说，首先来个经典的动画函数：

function animate(element, name, from, to, time) {     time = time || 800; //默认0.8秒      var style = element.style,         latency = 60, // 每60ms一次变化         count = time / latency, //变化的次数         step = Math.round((to - from) / count), //每一步的变化量         now = from;      function go() {         count--;         now = count ? now + step : to;         style[name] = now + 'px';          if (count) {             setTimeout(go, latency);         }     }      style[name] = from + 'px';     setTimeout(go, latency); } 

姑且不论这个函数的设计存在局限性，如只能对以px为单位的样式进行修改。仅从函数的实现上来看，这可以是一个非常经典的动画理念，其基本逻辑由以下部分组成：

1. 获取起点值from和终点值to，通过动画需要进行的时间time，以及每侦间隔latency的要求，计算出值的改变次数count和每次改变的量step。
2. 开启setTimeout(fn, latency);来步进到下一侦。
3. 在下一侦中，设置属性步进一次，如果动画还没结束，再回到第2步继续下一侦。

这个函数工作得很好，服务了千千万万的站点和系统，事实上jQuery的animate函数的核心也无非是setInterval函数。

但是，随着现在系统复杂度的稳步上升，动画效果也越来越多，同时对动画的流畅度也有了更多的重视，这导致上面的函数会出现一些问题。例如同时打开 100个动画效果，根据上面的函数，很明显会有100个定时器在同时运行，这些定时器之间的调度会对性能有轻微的影响。虽然在正常的环境中，这些许的影响 并不会有什么关系，但是在动画这种对流畅度有很高要求的环境下，任何细微的影响都可能产生出不好的用户体验。

在这样的情况下，有一些开发者就发明了一种基于统一帧管理的动画框架，他使用一个定时器触发动画帧，不同的动画来注册这些帧，在每一帧上处理多个动 画的属性变化。这样的好处是减少了定时器调度的开销，但是对于动画框架的开发者来说，统一帧管理、提供监听帧的API等，都是需要开发和维护的。

浏览器的直接支持

最终，浏览器厂商们发现这件事其实可以由他们来做，并且基于浏览器层面，还可以有更多的优化，比如：

• 对于一个侦中对DOM的所有操作，只进行一次Layout和Paint。
• 如果发生动画的元素被隐藏了，那么就不再去Paint。

于是，浏览器开始推出一个API，叫做requestAnimationFrame，关于这个函数，MDC的相关页面有比较详细的介绍，简单来说，这个函数有2种使用方法：

1. 调用requestAnimationFrame函数，传递一个callback参数，则在下一个动画帧时，会调用callback。
2. 不传递参数地直接调用该函数，启动动画帧，下一个帧触发时，会同时触发window.onmozbeforepaint事件，可以通过注册该事件来进行动画。

第2种方法由于依赖于Firefox自己的事件，且beforepaint事件还没进入到标准中，所以不推荐使用，还是使用第1种方式比较好。此时，我们的动画逻辑可以变成这样：

1. 记录当前时间startTime，作为动画开始的时间。
2. 请求下一帧，带上回调函数。
3. 下一帧触发时，回调函数的第一个参数为当前的时间，再与startTime进行比较，确定时间间隔ellapseTime。
4. 判断ellapseTime是否已经超过事先设定的动画时间time，如果超过，则结束动画。
5. 计算动画属性变化的差值differ = to - from，再确定在ellapseTime的时候应该变化多少step = differ / time * ellapseTime。
6. 计算出现在应该变化到的位置Math.round(from + step)，并重新对样式赋值。
7. 继续请求下一帧。

新的动画函数

下面就是一个全新的动画函数：

function animate(element, name, from, to, time) {     time = time || 800; // 默认0.8秒     var style = element.style,         startTime = new Date;      function go(timestamp) {         var progress = timestamp - startTime;         if (progress >= duration) {             style[name] = to + 'px';             return;         }          var now = (to - from) * (progress / duration);         style[name] = now.toFixed() + 'px';         requestAnimationFrame(go);     }      style[name] = from + 'px';      requestAnimationFrame(go); } 

到这一步，还剩一个问题，那就是并不是每个浏览器都支持requestAnimationFrame函数的，所以再做一个简单的修正。

根据Firefox的特性来看，其mozRequestAnimationFrame提供的最高FPS为60，并且会根据每一帧的计算的耗时来进行调整，比如每一帧计算用了1s，那他只会提供1FPS的动画效果。

而Chrome的高版本同样也实现了这个函数，叫webkitRequestAnimationFrame，可以预见未来还会有Opera的oRequestAnimationFrame和IE的msRequestAnimationFrame，所以这里一并做一个简单的兼容处理：

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