摘要：現(xiàn)在又多了一種實現(xiàn)動畫的方案，那就是還在草案當(dāng)中的方法。這個方法就是傳遞給的回調(diào)函數(shù)。為回調(diào)函數(shù)一個簡單的例子模擬一個進度條動畫，初始寬度為在函數(shù)中將進度加然后再更新到寬度上，在進度達到之前，一直重復(fù)這一過程。

HTML5/CSS3時代，我們要在web里做動畫選擇其實已經(jīng)很多了:

你可以用CSS3的animattion+keyframes;

你也可以用css3的transition;

你還可以用通過在canvas上作圖來實現(xiàn)動畫，也可以借助jQuery動畫相關(guān)的API方便地實現(xiàn);

當(dāng)然最原始的你還可以使用window.setTimout()或者window.setInterval()通過不斷更新元素的狀態(tài)位置等來實現(xiàn)動畫，前提是畫面的更新頻率要達到每秒60次才能讓肉眼看到流暢的動畫效果。

現(xiàn)在又多了一種實現(xiàn)動畫的方案，那就是還在草案當(dāng)中的window.requestAnimationFrame()方法。

來看MDN上對其給出的詮釋：

  
The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes as an argument a callback to be invoked before the repaint.

window.requestAnimationFrame() 將告知瀏覽器你馬上要開始動畫效果了，后者需要在下次動畫前調(diào)用相應(yīng)方法來更新畫面。這個方法就是傳遞給window.requestAnimationFrame()的回調(diào)函數(shù)。

也可以說這個方法原理其實也就跟setTimeout/setInterval差不多，通過遞歸調(diào)用同一方法來不斷更新畫面以達到動起來的效果，但它優(yōu)于setTimeout/setInterval的地方在于它是由瀏覽器專門為動畫提供的API，在運行時瀏覽器會自動優(yōu)化方法的調(diào)用，并且如果頁面不是激活狀態(tài)下的話，動畫會自動暫停，有效節(jié)省了CPU開銷。

可以直接調(diào)用，也可以通過window來調(diào)用，接收一個函數(shù)作為回調(diào)，返回一個ID值，通過把這個ID值傳給window.cancelAnimationFrame()可以取消該次動畫。

requestAnimationFrame(callback)//callback為回調(diào)函數(shù)

?

模擬一個進度條動畫，初始div寬度為1px,在step函數(shù)中將進度加1然后再更新到div寬度上，在進度達到100之前，一直重復(fù)這一過程。

為了演示方便加了一個運行按鈕。

0%


window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var start = null;
var ele = document.getElementById("test");
var progress = 0;

function step(timestamp) {
    progress += 1;
    ele.style.width = progress + "%";
    ele.innerHTML=progress + "%";
    if (progress < 100) {
        requestAnimationFrame(step);
    }
}
requestAnimationFrame(step);
document.getElementById("run").addEventListener("click", function() {
    ele.style.width = "1px";
    progress = 0;
    requestAnimationFrame(step);
}, false);

?

既然還是草案狀態(tài)下引入的一個功能，在使用全我們就需要關(guān)心一下各瀏覽器對它的支持情況了。就目前來說，主流現(xiàn)代瀏覽器都對它提供了支持。

更為具體的瀏覽器兼容性可以在這里看到。

Polyfill就是墊片，按發(fā)明這個詞的人的原話來說，它就是一段這樣的代碼，讓瀏覽器原生地支持我們期望使用的一些API。

就比如這里的requestAnimationFrame，在看到了上面的瀏覽器支持情況后，你就知道了比上面列出的瀏覽器版本老的就不支持該方法，但為了讓代碼能夠有更好的瀏覽器兼容性在老機器上也能運行不報錯，我們可以寫一些代碼讓瀏覽器在不支持requestAnimationFrame的情況下使用window.setTimeout()，這是一種回退（fallback）到過去的方法。

這樣一來，就可以通俗一點的理解polyfill了，它就是備胎。

下面是由Paul Irish及其他貢獻者放在GitHub Gist上的代碼片段，用于在瀏覽器不支持requestAnimationFrame情況下的回退，回退到使用setTmeout的情況。當(dāng)然，如果你確定代碼是工作在現(xiàn)代瀏覽器中，下面的代碼是不必的。

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik M?ller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
    var lastTime = 0;
    var vendors = ["ms", "moz", "webkit", "o"];
    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 - (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);
    };
}());

?

上面代碼作用有二，一是把各瀏覽器前綴進行統(tǒng)一，二是在瀏覽器沒有requestAnimationFrame方法時將其指向setTimeout方法。

提到備胎代碼呢，這里多說一句，在CSS代碼中，我們也經(jīng)常使用這種回退的技巧，即對同一條CSS規(guī)則，編寫多條以不同瀏覽器前綴開頭代碼，或者編寫一條備用樣式。

下面是一個CSS中的備胎代碼的例子：

div {
    background: rgb(0, 0, 0); /* fallback */
    background: rgba(0, 0, 0, 0.5);
}

?

代碼中設(shè)置div背景為黑色帶50%的透明度，但IE9-的瀏覽器是不支持rbga格式的顏色的，所以瀏覽器會回退到上一條CSS規(guī)則應(yīng)用rgb顏色。

article about rAF from css tricks

article about rAF from Paul Irish

what is polyfill

setInterval與requestAnimationFrame的時間間隔測試

求索：GSAP的動畫快于jQuery嗎？為何？

求索：GSAP的動畫快于jQuery嗎？/ 續(xù) V1.1

by 劉哇勇
編輯 SegmentFault