requestAnimationFrame()

window.requestAnimationFrame()这个方法是用来在页面重绘以前，通知浏览器调用一个指定的函数，以知足开发者操做动画的需求。这个方法接受一个函数为参，该函数会在重绘前调用。

注意: 若是想获得连贯的逐帧动画，函数中必须从新调用 requestAnimationFrame()。

若是你想作逐帧动画的时候，你应该用这个方法。这就要求你的动画函数执行会先于浏览器重绘动做。一般来讲，重绘的频率是每秒60次，可是通常会遵循W3C标准规定的频率。若是是后台标签页面，重绘频率则会大大下降。

参数：

回调函数只会被传入一个DOMHighResTimeStamp参数，这个参数指示当前时间距离开始触发 requestAnimationFrame 的回调的时间。由于不少个函数在这一帧被执行，因此每一个函数都将被传入一个相同的时间戳，尽管通过了以前不少的计算工做。这个数值是一个小数，单位毫秒，精确度在 10 µs。

返回值：

requestID 是一个长整型非零值,做为一个惟一的标识符.你能够将该值做为参数传给 window.cancelAnimationFrame() 来取消这个回调函数。

兼容性：

 

兼容性代码封装：

 

 1 (function() {
 2     var lastTime = 0;
 3     var vendors = ['webkit', 'moz'];
 4     for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
 5         window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
 6         window.cancelAnimationFrame =
 7           window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
 8     }
 9 
10     if (!window.requestAnimationFrame)
11         window.requestAnimationFrame = function(callback, element) {
12             var currTime = new Date().getTime();
13             var timeToCall = Math.max(0, 16 - (currTime - lastTime));
14             var id = window.setTimeout(function() { callback(currTime + timeToCall); },
15               timeToCall);
16             lastTime = currTime + timeToCall;
17             return id;
18         };
19 
20     if (!window.cancelAnimationFrame)
21         window.cancelAnimationFrame = function(id) {
22             clearTimeout(id);
23         };
24 }());

DEMO：

 http://codepen.io/baiyaaaaa/pen/raYJVN