你可能不了解的動畫神器之requestAnimationFrame及其兼容寫法

taohonghui 發布于2019-08-22 14:55 / 664人閱讀

摘要：就是為動畫而生的，用于改變樣式或。例如同時進行的如下任務基于的動畫動畫。而且，當正在執行動畫的標簽頁不可見時，瀏覽器并不會一直運行它，這就意味著更少的和內存的使用，從而延長電池壽命。我同時也修正了方法名稱內核的瀏覽器已更改過。

介紹

此篇文章翻譯自paul_irish（就職于Google Chrome團隊工程師）

文中提到對requestAnimationFrame的polyfill非常不錯，可以直接拿來用

原文鏈接：requestAnimationFrame for Smart Animating

什么是requestAnimationFrame？

你可能用過定時器實現動畫（通過每隔一段時間去改變元素）。瀏覽器給我們帶來了個好消息“為什么不提供一個API給開發者，來使一些事情更高效呢”。requestAnimationFrame就是為動畫而生的API，用于改變dom樣式、canvas或WebGL。

我為什么要使用它？

瀏覽器能夠將并發動畫優化為單個事件流和重繪周期中，從而更流暢。例如同時進行的如下任務：基于js的動畫、css動畫、SVG SMIL。而且，當正在執行動畫的標簽頁不可見時，瀏覽器并不會一直運行它，這就意味著更少的CPU、 GPU和內存的使用，從而延長電池壽命。

天啦嚕，我可以吹噓自己的網站對電池更友好？

是的大兄弟Totes McGoats（此人跟作者是啥關系~）

我應該如何使用它？

下面這段是一個簡單的requestAnimationFrame兼容寫法，當瀏覽器不支持時回退到setTimeout的實現方式：

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();


// usage:
// instead of setInterval(render, 16) ....

(function animloop(){
  requestAnimFrame(animloop);
  render();
})();
// place the rAF *before* the render() to assure as close to
// 60fps with the setTimeout fallback.

更加健壯的polyfill

以下代碼是Opera工程師Erik M?ller所寫更加健壯的polyfill。你可以閱讀下，尤其是在處理4-16ms的延遲時間這段代碼，從而使幀率更接近60fps。你會喜歡上它的，請注意他使用的標準方法名。我同時也修正了cancel方法名稱（WebKit內核的瀏覽器已更改過）。

(function() {
    var lastTime = 0;
    var vendors = ["webkit", "moz"];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+"RequestAnimationFrame"];
        window.cancelAnimationFrame =
          window[vendors[x]+"CancelAnimationFrame"] || window[vendors[x]+"CancelRequestAnimationFrame"];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

來看看它的效果

http://jsfiddle.net/XQpzU/435...

requestAnimationFrame API

window.requestAnimationFrame(function(/* time */ time){
  // time ~= +new Date // the unix time
});

該回調函數將當前時間作為參數傳遞，也正是你說需要的。

（此文寫于2011年，下面介紹了不同瀏覽器實現上的差異）
Is it ready?
Right now, the Webkit implementation (available in Nightly Safari and Chrome Dev Channel) and the Mozilla one (available in FF4) differ slightly. Mozilla’s has a bug which caps potential framerates at about 30fps.Actually, “It’s currently capped at 1000/(16 + N) fps, where N is the number of ms it takes your callback to execute. If your callback takes 1000ms to execute, then it’s capped at under 1fps. If your callback takes 1ms to execute, you get about 60fps.” (thx, Boris) It’ll be fixed though, probably for the next release after FF4 ships. Also Chrome 10 doesn’t have the time parameter (added in m11), FF currently ignores the element argument.

云服務器 GPU云服務器說說你所了解的人工智能挑戰不可能的人工智能你可能沒有權限使用網絡資源電腦的dns服務器可能不可用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92997.html

你可能不了解的動畫神器之requestAnimationFrame及其兼容寫法

摘要：就是為動畫而生的，用于改變樣式或。例如同時進行的如下任務基于的動畫動畫。而且，當正在執行動畫的標簽頁不可見時，瀏覽器并不會一直運行它，這就意味著更少的和內存的使用，從而延長電池壽命。我同時也修正了方法名稱內核的瀏覽器已更改過。介紹此篇文章翻譯自paul_irish（就職于Google Chrome團隊工程師）文中提到對requestAnimationFrame的polyfil...

haoguo 2019-08-02 16:01 評論0 收藏0
你可能不了解的動畫神器之requestAnimationFrame及其兼容寫法

摘要：就是為動畫而生的，用于改變樣式或。例如同時進行的如下任務基于的動畫動畫。而且，當正在執行動畫的標簽頁不可見時，瀏覽器并不會一直運行它，這就意味著更少的和內存的使用，從而延長電池壽命。我同時也修正了方法名稱內核的瀏覽器已更改過。介紹此篇文章翻譯自paul_irish（就職于Google Chrome團隊工程師）文中提到對requestAnimationFrame的polyfil...

MAX_zuo 2019-08-30 14:03 評論0 收藏0
你可能不了解的動畫神器之requestAnimationFrame及其兼容寫法

摘要：就是為動畫而生的，用于改變樣式或。例如同時進行的如下任務基于的動畫動畫。而且，當正在執行動畫的標簽頁不可見時，瀏覽器并不會一直運行它，這就意味著更少的和內存的使用，從而延長電池壽命。我同時也修正了方法名稱內核的瀏覽器已更改過。介紹此篇文章翻譯自paul_irish（就職于Google Chrome團隊工程師）文中提到對requestAnimationFrame的polyfil...

keke 2019-08-26 11:48 評論0 收藏0
你可能不了解的動畫神器之requestAnimationFrame及其兼容寫法

摘要：就是為動畫而生的，用于改變樣式或。例如同時進行的如下任務基于的動畫動畫。而且，當正在執行動畫的標簽頁不可見時，瀏覽器并不會一直運行它，這就意味著更少的和內存的使用，從而延長電池壽命。我同時也修正了方法名稱內核的瀏覽器已更改過。介紹此篇文章翻譯自paul_irish（就職于Google Chrome團隊工程師）文中提到對requestAnimationFrame的polyfil...

shengguo 2019-08-01 18:38 評論0 收藏0
你可能不了解的動畫神器之requestAnimationFrame及其兼容寫法

摘要：就是為動畫而生的，用于改變樣式或。例如同時進行的如下任務基于的動畫動畫。而且，當正在執行動畫的標簽頁不可見時，瀏覽器并不會一直運行它，這就意味著更少的和內存的使用，從而延長電池壽命。我同時也修正了方法名稱內核的瀏覽器已更改過。介紹此篇文章翻譯自paul_irish（就職于Google Chrome團隊工程師）文中提到對requestAnimationFrame的polyfil...

xiangzhihong 2019-08-30 15:53 評論0 收藏0