requestAnimationFrame實現動畫

大部分瀏覽器支持的最小繪製間隔是16.7ms，舉例，如果你使用setInterval(function(){}, 10)即每隔10ms繪製一次頁面，將會導致部分動畫幀的丟失，造成動畫的不連貫卡頓，16.7ms是1000/60的計算結果，即瀏覽器最大支持每秒繪製60幀

requestAnimationFrame是由瀏覽器專門爲動畫提供的API，在運行時瀏覽器會自動優化方法的調用，並且如果頁面不是激活狀態的話，動畫會自動暫停，有效節省了CPU開銷，且會合理安排瀏覽器的最小繪製間隔，不會造成動畫卡頓

可以直接通過requestAnimationFrame(callback)調用，接收一個函數作爲回調，返回一個ID，通過把該ID傳給window.cancelAnimationFrame()可以取消該動畫

兼容性解決方案

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||    // Webkit中此取消方法的名字變了
                                      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);
        };
    }
}());

參考鏈接：

http://www.cnblogs.com/Wayou/p/requestAnimationFrame.html