window.requestAnimationFrame()方法通知瀏覽器我們想要產生動畫,並且要求瀏覽器在刷新畫面前呼叫特定函數刷新動畫;這個方法接受一個函數(回撥函數, Callback),然後該函數會被呼叫執行以刷新繪圖。

Note: 若是想要在下次刷新繪圖時產生另一個動畫畫面,這個回撥函數必須要呼叫requestAnimationFrame()。

當準備好刷新動畫畫面時就呼叫這個方法,這樣的話瀏覽器刷新畫面前會呼叫你所傳入的動畫函數;對於前景頁面刷新率大約是60fps(仍須取決於瀏覽器),而背景頁面刷新率可能會減少。

使用window.requestAnimationFrame()有一個很大的好處是瀏覽器可以幫我們做最佳化,瀏覽器可以綜合考量讓Javascript所產生的動畫和CSS transition或SVG SMIL一次一起刷新,甚至在動畫頁面處於不可見時,停止動畫以節省系統資源和電源的耗用。(詳細請參照Paul Irish, requestAnimationFrame for Smart Animating)。

語法

requestID = window.requestAnimationFrame(callback);       // Firefox 23 / IE 10 / Chrome
requestID = window.mozRequestAnimationFrame(callback);    // Firefox < 23
requestID = window.webkitRequestAnimationFrame(callback); // Safari

參數

callback
當刷新下一個動畫畫面時呼叫的函數,被呼叫時會被傳入一個DOMHighResTimeStamp型態的變數,這個變數單位是毫秒,精確到10微秒,代表 callback 被呼叫執行的當下時間,相當於 callback 被呼叫當下的 window.performance.now() 時間。

回傳值

requestID 是一個用以辨識傳入回撥函數的獨特唯一長整數、不為零、無法事先推測為何;傳入requestID到window.cancelAnimationFrame()可以取消呼叫該回撥函數。

範例

(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

var start = null;

var d = document.getElementById("SomeElementYouWantToAnimate");

function step(timestamp) {
  var progress;
  if (start === null) start = timestamp;
  progress = timestamp - start;
  d.style.left = Math.min(progress/10, 200) + "px";
  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}

requestAnimationFrame(step);

瀏覽器支援

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 10.0 webkit
24.0
4.0 moz [1]
23 [2]
10.0 (Yes) -o
15.0
6.0 webkit
unprefixed in nightlies
requestID return value 23.0 webkit
24.0
11.0 (11.0) moz 10.0 {compatversionunknown}} -o
15.0
No support
unprefixed in nightlies
Feature Android BlackBerry Browser Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support No support 10.0 webkit 16.0 webkit ? ? 14.0 6.0 webkit
requestID return value ?   ? 11.0 (11.0) moz ? ? ?

Gecko備註

[1] Gecko 11.0(Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8)版本以前,mozRequestAnimationFrame()接受不傳入函數而呼叫執行,但現在已不再支援了。

[2] 若是呼叫mozRequestAnimationFrame()方法,哪麼傳入回撥函數的參數型態會是DOMTimeStamp而非DOMHighResTimeStamp,不同於DOMHighResTimeStamp,DOMTimeStamp的精確度只到毫秒。

Chrome備註

新版現在請使用window.cancelAnimationFrame(),舊版的window.webkitCancelAnimationFrame()與window.webkitCancelRequestAnimationFrame()雖然依舊支援,但已經不建議使用。

規範

Timing control for script-based animations: requestAnimationFrameWD

延伸閱讀

文件標籤與貢獻者

此頁面的貢獻者: Ekanan, North, foxbrush
最近更新: Ekanan,