使用RequestAnimationFrame优化PC端动画效果的N+1个原因

直接入正题，关于使用RequestAnimationFrame优化PC端动画效果的N+1个原因如下：



1.与SetTimeout和SetInterval相比，动画更流畅。

先来简单了解下它们：

window.requestAnimationFrame(function);
setTimeout(funciton,interval);
setInterval(funciton,interval);

RequestAnimationFrame的时间间隔与浏览设备的绘制间隔一致；

[b]SetTimeout[/b]和[b]SetInterval[/b]的时间间隔可以自己定义。

绘制时间间隔这儿引出了两个问题：
①如果后者绘制时间间隔小于浏览设备的绘制间隔，那么浏览设备重绘时，那一帧怎么执行？
②如果制作动画时需要的时间间隔更长，后者可以轻松实现，如果此时仍旧选择前者，应该怎么实现？

问题1可以这么来回答：
丢帧！！！！！！
我们可以用吃东西来假设，浏览设备相当于mouth，function相当于把食物放进mouth里，浏览设备重绘相当于把嘴闭上嚼东西吃。
SetTimeout和SetInterval是这样的：给嘴里放吃的不看啥时候闭嘴嚼吃的，只管按照设定的时间往嘴里放。如果嘴闭上的时候往嘴里放东西不就掉了么?也就是丢帧。
而RequestAnimationFrame是这样的：什么时候闭嘴开始嚼东西什么时候把食物放进去。

问题2可以这么来回答：
控制时间跨度！！！！！！
这里我们依旧可以沿用之前的假设，再把切换动画的时间间隔设定为咀嚼后的吞咽。
SetTimeout和SetInterval是这样的：不分青红皂白，吃了就吞。

而RequestAnimationFrame是这样的：什么时候闭嘴开始嚼东西什么时候把食物放进去，放进去之后再根据需要进行吞咽。具体这个时间可以通过以下代码来进行控制。

var fps=30;
var now;
var then = Date.now();
var interval = 1000/fps;//时间间隔
var delta;
function gameLoop() {
window.requestAnimationFrame(gameLoop);
now = Date.now();
delta = now - then;
if (delta > interval) {
then = now - (delta % interval);
DoSomeThing......
}
}

2.与CSS3 Animation相比，兼容性更好，能应用的属性更多，支持的动画效果更多。

虽然CSS3实现动画既高效又方便，但是对于IE7-9，想实现兼容就比较难了。

如果特意针对IE7-9再写一套代码，修改起来也很麻烦。

而RequestAnimationFrame可以兼容常用版本浏览器，具体实现方法也有人实现过了，如下：

(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz','o','ms'];
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.7 - (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);
};
}
}());

此外，RequestAnimationFrame能应用的属性和支持的动画数量远远大于CSS3
Animation，具体可以查看官方文档。

3.窗口没激活时或标签页不可见时，动画将暂停，省计算资源，减少CPU和内存的压力。

待补充......