Window.requestAnimationFrame()

« Window

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

當準備好刷新動畫畫面時就呼叫這個方法，這樣的話瀏覽器刷新畫面前會呼叫你所傳入的動畫函數；對於前景頁面刷新率大約是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);

瀏覽器支援

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

延伸閱讀

• window.mozAnimationStartTime
• window.cancelAnimationFrame()
• mozRequestAnimationFrame - Blog post
• requestAnimationFrame for smart animating - Blog post
• Animating with javascript: from setInterval to requestAnimationFrame - Blog post
• Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1 - Blog post
• TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations