Window.requestAnimationFrame()

« Window

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

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

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

使用window.requestAnimationFrame()有一個很大的好處是瀏覽器可以幫我們做最佳化,瀏覽器可以綜合考量讓Javascrip所產生的動畫和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微秒。

回傳值

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);

瀏覽器支援

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
Not supported
unprefixed in nightlies
Feature Android BlackBerry Browser Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support Not supported 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

延伸閱讀

Document Tags and Contributors

Contributors to this page: foxbrush
最近更新: foxbrush,