新动画函数requestAnimationFrame

传统的 javascript 动画无非就是用setInterval函数来实现，这对于简单或对流畅性要求不高时不会有什么问题，但现在随着对用户体验的关注度不断提高，对动画的复杂程度和流畅性都有了更高的要求，传统动画显得捉襟见肘了。

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

    

 

浏览器的直接支持

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

对于一个侦中对DOM的所有操作，只进行一次Layout和Paint。

如果发生动画的元素被隐藏了，那么就不再去Paint。

于是，浏览器开始推出一个API，叫做

requestAnimationFrame

，关于这个函数，MDC的相关页面有比较详细的介绍，简单来说，这个函数有2种使用方法：

调用

requestAnimationFrame

函数，传递一个callback参数，则在下一个动画帧时，会调用callback。

不传递参数地直接调用该函数，启动动画帧，下一个帧触发时，会同时触发

window.onmozbeforepaint

事件，可以通过注册该事件来进行动画。

第2种方法由于依赖于Firefox自己的事件，且

beforepaint

事件还没进入到标准中，所以不推荐使用，还是使用第1种方式比较好。此时，我们的动画逻辑可以变成这样：

记录当前时间

startTime

，作为动画开始的时间。

请求下一帧，带上回调函数。

下一帧触发时，回调函数的第一个参数为当前的时间，再与

startTime

进行比较，确定时间间隔

ellapseTime

。

判断

ellapseTime

是否已经超过事先设定的动画时间

time

，如果超过，则结束动画。

计算动画属性变化的差值

differ = to - from

，再确定在

ellapseTime

的时候应该变化多少

step = differ / time * ellapseTime

。

计算出现在应该变化到的位置

Math.round(from + step)

，并重新对样式赋值。

继续请求下一帧。

 

新的动画函数

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

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);
}

[/code]
到这一步，还剩一个问题，那就是并不是每个浏览器都支持

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); };

[/code]