标签：调用 返回 timeout 频率 显示 jquery 卡顿 时间间隔 animation
在HTML5/CSS3时代，实现动画的方式有许多种：
你可以用css3的animation和@keyframes；
可以用css3的transition；
还可以用原始的setTimeout()、setInterval()达到动画效果，以及jQuery中animate方法；
今天我们要介绍是另一种动画方式：requestAnimationFrame(callback)！
可以直接调用，也可以通过window来调用，接收一个函数作为回调，返回一个ID值：
ID=requestAnimationFrame(callback)//callback为回调函数
requestAnimationFrame的用法和setTimeout()类似都是单回调，其优势在于跟着浏览器的绘制走。相当一部分的浏览器的显示频率是16.7ms，即1s绘制60次。如果间隔时间小于16.7ms动画就会卡顿，而requestAnimationFrame就是在浏览器绘制是调用动画！总结requestAnimationFrame的优势如下：
1.跟着浏览器的绘制走，动画更流畅；
2.页面最小化了，或者被Tab切换关灯了，页面绘制全部停止，资源高效利用；
3.更省电，尤其是对移动终端。
如果想停止动画调用，方法如下：
cancelAnimationFrame(ID);
Android设备压根就不支持嘛！其他设备基本上跟CSS3动画的支持一模一样。
如果需要简单兼容，可这么写：
window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })();
但是呢，并不是所有设备的绘制时间间隔是1000/60 ms, 以及上面并木有cancel相关方法，所以，就有下面这份更全面的兼容方法：
(function() { var lastTime = 0; var vendors = [‘ms‘, ‘moz‘, ‘webkit‘, ‘o‘]; 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); }; }());
然后我们就能像使用setTimeout一样来使用requestAnimationFrame了！
标签：调用 返回 timeout 频率 显示 jquery 卡顿 时间间隔 animation
原文地址：http://www.cnblogs.com/lodadssd/p/6266673.html
