js动画api - requestAnimationFrame

一、setTimeout VS. requestAnimationFrame

传统js动画实现一般使用setTimeout/setInterval等定时方式执行一个动画更新操作，但这种方式在使用中存在一些问题。

动画帧间隔interval问题

大部分显示器的刷新频率是16.7ms，如果setTimeout的interval小于这个值，就会出现绘制的帧无法在显示器上展现的问题，好像被吞掉了一样。

另外，各个显示器的刷新频率不同，也使得一套代码无法自适应不同频率，难以对动画效果最优化。

页面不可见时继续执行，浪费资源、电量

而requestAnimationFrame则可以解决这些问题：

浏览器自动根据当前显示器刷新频率来设置动画每帧的间隔时间interval。例如，显示器是10ms，则interval就是10ms；如果是16.7ms，则interval自动是16.7ms

浏览器优化动画绘制

浏览器可以合并requestAnimationFrame的动画操作、CSS动画、CSS变换等各种动画效果到一次渲染周期中完成。并且在页面不可见时，可以选择不进行动画渲染的执行（似乎是暂停动画），节约资源、电量。

二、使用requestAnimationFrame

代码使用上，requestAnimationFrame和setTimeout很相似。

function renderFrame() {
// do something
}

// setTimeout / setInterval
var handler = setTimeout(renderFrame, 100);

// requestAnimationFrame
var hanlder = requestAnimationFrame(renderFrame);

从上面可以看出，两者的差别在于是否指定interval的值。

三、浏览器兼容性

目前，有些低版本浏览器不支持requestAnimationFrame，这种情况下为了进行兼容，还是需要使用setTimeout/setInterval来实现动画。另外，各厂商浏览器中requestFrameAnimation的名称也有差别，所以可以使用下面的最简单的方法，来进行兼容。

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

如果想更保险，可以参考Opera浏览器的技术师Erik Möller的封装

(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}

if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};

if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());

在这里，代码判断了是使用4ms还是16ms的延迟，来最佳匹配60fps。同时还支持cancel方法。

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

http://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/