mozilla
您的搜尋結果

    Window.requestAnimationFrame()

    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微秒,代表 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
    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,