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

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

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

先来简单了解下它们：

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

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

SetTimeout和SetInterval的时间间隔可以自己定义。

绘制时间间隔这儿引出了两个问题：

①如果后者绘制时间间隔小于浏览设备的绘制间隔，那么浏览设备重绘时，那一帧怎么执行？

②如果制作动画时需要的时间间隔更长，后者可以轻松实现，如果此时仍旧选择前者，应该怎么实现？

问题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和内存的压力。

待补充......