首先，傳統做動畫的方式有以下幾種：

1. css的transition過度動畫

2. css的animation動畫

3. 使用setTimeout或setInterval模擬動畫貞（js執行機制決定了並非嚴格意義上的動畫貞）

定時器模擬動畫又分為 ：（1）速度版運動   （2）時間版運動

4.使用requestAnimationFrame

本文主要講的就是requestAnimationFrame，requestAnimationFrame：即在瀏覽器的幀頻下，每隔16.7ms（官方），執行一次動畫，基本不會掉幀，可以保證動畫的流暢性。

但是，requestAnimationFrame是存在相容性問題的，截止到本文釋出時間，其相容性如下圖：

所以東西雖好，但還是要考慮相容性，相容性寫法如下：

    window.requestAnimationFrame = window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame;
    window.cancelAnimationFrame = window.cancelAnimationFrame|| window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame||window.cancelRequestAnimationFrame||window.webkitCancelRequestAnimationFrame||window.mozCancelRequestAnimationFrame; 
    
 
if(!window.requestAnimationFrame){
        var lastTime = Date.now();//時間戳
        window.requestAnimationFrame = function(callback){
            var id;
            var nowTime = Date.now();
            var delay = Math.max(16.7-(nowTime-lastTime),0);
            //如果上一次的時間 和 本次時間 執行的間隔大於 16.7,那就不再延遲直接執行
 

            id = setTimeout(callback,delay);
            lastTime = nowTime + delay;//上一次動畫執行的時間 
            return id;
        };
    }
    if(!window.cancelAnimationFrame){
        window.cancelAnimationFrame = function(index){
            clearTimeout(index);
        };
    }

requestAnimationFrame(fn)方法需要傳入回撥，就是在幀頻時執行的回撥，但是呼叫後此方法只會執行一次，因此在寫動畫的時候就需要遞迴呼叫。然後在滿足條件後呼叫cancelAnimationFram來取消即可。