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微秒,代表 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);
瀏覽器支援
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
延伸閱讀
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
- Paul Irish : requestAnimationFrame for Smart Animating
- PauL Irish : requestAnimationFrame API: now with sub-millisecond precision