寫緩動函數(shù)用到requestAnimationFrame函數(shù)，之前了解過一些，但總覺得又不是很了解，所以翻譯一篇老外的文章，以便學習分享。

requestAnimationFrame是什么？
以前我們做動畫需要一個定時器，每間隔多少毫秒就做出一些改變?，F(xiàn)在有個好消息：瀏覽器廠商已經(jīng)決定提供一個專門做動畫的方法，即requestAnimationFrame()，而且基于瀏覽器的層面也能更好的進行優(yōu)化。但是呢，這只是一個做動畫的基礎API，即不基于DOM元素的style變化，也不基于canvas，或者WebGL。所以，具體的動畫細節(jié)需要我們自己寫。

我們?yōu)槭裁匆盟?
對于同時進行的n個動畫，瀏覽器能夠進行優(yōu)化，把原本需要N次reflow和repaint優(yōu)化成1次，這樣就實現(xiàn)了高質量的動畫。舉個例子，現(xiàn)在有基于JS的動畫，還有基于CSS的transitions，或者SVG SMIL. Plus，如果瀏覽器的某個tab正在運行這樣一個動畫，然后你切到另一個tab，或者干脆最小化，總之就是你看不見它了，這時瀏覽器就會停止動畫。這將意味著更少的CPU，GPU和更少的內存消耗，這樣電池的使用壽命就大大延長了。

如何使用它？
代碼如下:
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
// usage:
// instead of setInterval(render, 16) ....
(function animloop(){
render();
requestAnimFrame(animloop, element);
})();

注意：這里我使用了“requestAnimFrame”，因為規(guī)范仍在不斷變化中，我并不想任由規(guī)范擺布。
requestAnimationFrame API
代碼如下:
window.requestAnimationFrame(function(/* time */ time){
// time ~= +new Date // the unix time
}, /* optional bounding elem */ elem);

先給出Chrome和Firefox的版本
代碼如下:
window.mozRequestAnimationFrame([callback]); // Firefox
window.webkitRequestAnimationFrame(callback[, element]); // Chrome

參數(shù)：
callback:（FF可選，Chrome必選）
　　下次repaint調用的函數(shù)，函數(shù)的第一個參數(shù)是當前時間
element：（FF無）
　　意譯一下吧：其實就是畫布了，而那個‘畫'，是動畫。（the element that visually bounds the entire animation）。對canvas和WebGL來說，它就是<canvas>元素，對于DOM節(jié)點來說，你可以不管它，如果你想稍微進行一下優(yōu)化，也可以傳個參數(shù)進來。

它到底靠不靠譜啊？
現(xiàn)在，Webkit實現(xiàn)（Nightly Safari 和 Chrome Dev Channel 可用）和Mozilla實現(xiàn)（FF4可用）有一些的差異，Mozilla的實現(xiàn)有一個Bug。事實上，F(xiàn)F動畫的幀數(shù)是這么算的：1000/(16 + N) fps，其中N是callback的執(zhí)行時間，單位為毫秒。如果你的callback執(zhí)行時間為1000ms，那么它最高的幀數(shù)也就只有1fps。如果你的callback執(zhí)行時間為1ms，那么幀數(shù)差不多就是60fps。這個bug肯定會被修復，也許就是FF4的下一個版本吧。Chrome10沒有time參數(shù)（added in m11.弱弱的問下，m11是什么？），F(xiàn)F目前沒有element參數(shù)。