标签：
大家应该都知道，如果一个页面运行的定时器很多，无论你怎么优化，最后肯定会超过指定时间才能完成动画。定时器越多，延时越严重。
为此，YUI，kissy等采用中央队列的方式，将定时器减少至一个。浏览器厂商也因此原生支持了requestAnimationFrame方法，此方法基本上能保证每秒刷新60次。但是此方法在还没形成标准之前，很多低版本浏览器是不支持的，比如：IE9以及以下版本，不过谷歌和火狐都用私有的方法名实现了requestAnimationFrame方法。比如：谷歌：webkitRequestAnimationFrame,，火狐：mozRequestAnimationFrame。形成标准后，IE10才开始支持，由于IE10支持的是标准的requestAnimationFrame方法，因此它没有私有前缀，所以并不存在msRequestAnimationFrame。
我们先来看一下requestAnimationFrame方法是如何使用的？
var startTime,duration = 3000,requestID;
function animate(now){ //webkitRequestAnimationFrame方法会给回调函数中传入一个当前时间的参数。
var per = (now - startTime) / duration;
if(per >=1){
//动画结束
}else{
div.style.left = Math.round(600*per) + "px";
window.webkitRequestAnimationFrame(animate); //此方法调用一次只会重绘一次动画，如果需要连续的动画，则需要重复调用
}
}
function start(){
startTime = Date.now();
requestID = window.webkitRequestAnimationFrame(animate); //此方法可以传入两个参数，第一个是回调，第二个是执行动画的元素节点（可选），返回一个ID。
}
div.onclick = start;
上面的这个例子，是针对chrome浏览器实现的。
那么，我们如何来写出兼容性的写法呢？
第一个版本：
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame || //IE10以及以上版本，以及最新谷歌，火狐版本
window.webkitRequestAnimationFrame || //谷歌老版本
window.mozRequestAnimationFrame || //火狐老版本
function(callback){ //IE9以及以下版本
window.setTimeout(callback , 1000/60); //这里强制让动画一秒刷新60次，这里之所以设置为16.7毫秒刷新一次，是因为requestAnimationFrame默认也是16.7毫秒刷新一次。
}
})();
上面这个兼容性写法，有几个问题，第一个：没有解决cancelAnimationFrame方法的兼容性写法。第二个：强制让IE9-浏览器，动画绘制间隔为16.7ms，但是这些浏览器的绘制间隔并不都是这个值。第三个：火狐老版本的mozRequestAnimationFrame方法跟标准的requestAnimationFrame方法实现有些出入，比如：早期火狐的此方法，不支持传参。第四个：老版本的webkit，在有些版本下，此方法不会返回id，还有一些版本没有给回调函数传当前时间的参数。
我的理解：至于老版本的火狐和老版本的webkit，我个人觉得没有必要去兼容，只要兼容IE9-浏览器就OK了。因此以上的4个问题，只存在前面两个。那如果你想兼容第三个和第四个问题的话，请去看司徒正美基于网友屈屈与月影的版本改进而来的版本：https://github.com/wedteam/qwrap-components/blob/master/animation/anim.frame.js。
第二个版本，解决上面的第一个问题和第二个问题：
(function() {
var lastTime = 0;
var version = [‘webkit‘, ‘moz‘];
for(var i = 0; i < version.length && !window.requestAnimationFrame; i++) { //如果此浏览器不支持requestAnimationFrame方法，就循环遍历version数组
window.requestAnimationFrame = window[version[i] + ‘RequestAnimationFrame‘];
window.cancelAnimationFrame = window[version [i] + ‘CancelAnimationFrame‘] || // 有一些Webkit版本中，此方法的名字改变了
window[version [i] + ‘CancelRequestAnimationFrame‘];
}
if (!window.requestAnimationFrame) { //如果是IE9-浏览器
window.requestAnimationFrame = function(callback, element) { //我们使用上一个例子来讲解这段代码。当我们点击div时，就会触发start方法，我们假设当前时间为11111，设置startTime=11111， 调用requestAnimationFrame(animate)方法，这时，当前时间，我们假设是currTime = 11112，lastTime = 0，这时timeToCall = 0，因此调用setTimeout(function(){},0)，把lastTime = 11111，返回id。过了浏览器的最小时间后，我们假设是4ms，就会立即执行animate(11112)。这时就会继续执行requestAnimationFrame。假设当前时间是11118，timeToCall = 9.7，这时lastTime = 11127.7，当前时间为11127.7时，就执行animate(11127.7)，per = 16.7 / 3000，继续执行requestAnimationFrame....
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime)); //timeToCall的值为0-16.7之间。
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
})();
当然，requestAnimationFrame不是没有缺点，它不能控制fps（60），我们在以下场景下就不能使用。比如：做一些慢放动作，fps<60的情况下；还有在动作，枪战，飞车等场景下，fps需要>60的情况下，像这种场景下，如果帧数不高，画面会模糊。利用setTimeout（IE9，10，Firefox，chrome等，它的最短时间间隔已经压缩至4ms了）我们可以轻松跑到100帧以上的动画，能让画面更清楚，细节更逼真。
另外，postMessage这个异步方法，能实现超高度的动画，有人做过实验：
setTimeout 平均帧数200
requestAnimationFrame 平均帧数60
loop（循环） 平均帧数200-300
postMessage 平均帧数900-1000
var testing = true; //用来停止动画的，也就是停止代码执行的
function main(){
//记录两次执行时间的间隔
}
function run1(){ //点击按钮1，执行run1方法，然后使用setTimeout方法不断的执行main方法，main方法会记录每次执行的时间，求出两次执行时间的间隔。
main();
if(testing){
setTimeout(run1, 1);
}
}
function run2(){ //点击按钮2，执行run2方法
main();
if(testing){
window.requestAnimationFrame(run2);
}
}
function run3(){ //点击按钮3，执行run3方法
var count = 15;
while(count--){ //利用while循环执行main方法，记录两个循环操作之间的时间间隔。
main();
}
if(testing){
setTimeout(run3,1); //当然这里会有一点点的误差，因为用到了setTimeout方法，这样我们可以设置testing=false，停止循环调用main，如果直接用while(true)，那么无法停止此循环。
}
}
window.addEventListener("message",run4,false); //绑定message事件，只要调用postMessage方法，就会触发message事件。
function run4(){
main();
if(testing){
window.postMessage("","*");
}
}
IE10也有一个高效的异步方法setImmediate。
在现实中，尤其是游戏开发，我们要结合多种异步API。比如：作为背景的树木，流水等用requestAnimationFrame方法，玩家角色，由于需要速度的变化，那么用setTimeout比较合适，一些非常炫的动画，可能就需要postMessage，setImmediate，Image.onerror等API了。
加油！
标签：
原文地址：http://www.cnblogs.com/chaojidan/p/4210472.html
