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

xiangzhihong 發(fā)布于2019-08-30 15:53 / 3419人閱讀

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

介紹

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

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

原文鏈接：requestAnimationFrame for Smart Animating

什么是requestAnimationFrame？

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

我為什么要使用它？

瀏覽器能夠?qū)⒉l(fā)動畫優(yōu)化為單個事件流和重繪周期中，從而更流暢。例如同時進(jìn)行的如下任務(wù)：基于js的動畫、css動畫、SVG SMIL。而且，當(dāng)正在執(zhí)行動畫的標(biāo)簽頁不可見時，瀏覽器并不會一直運(yùn)行它，這就意味著更少的CPU、 GPU和內(nèi)存的使用，從而延長電池壽命。

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

是的大兄弟Totes McGoats（此人跟作者是啥關(guān)系~）

我應(yīng)該如何使用它？

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

// 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。你會喜歡上它的，請注意他使用的標(biāo)準(zhǔn)方法名。我同時也修正了cancel方法名稱（WebKit內(nèi)核的瀏覽器已更改過）。

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

該回調(diào)函數(shù)將當(dāng)前時間作為參數(shù)傳遞，也正是你說需要的。

（此文寫于2011年，下面介紹了不同瀏覽器實現(xiàn)上的差異）
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.