你需要知道的requestAnimationFrame

fireflow 發布于2019-08-26 11:44 / 2143人閱讀

摘要：你需要知道的隨著前端的發展，已經能夠實現非常多的動畫特效，但是仍然存在無法完成的動畫任務比如頁面滾動，通常的解決方案都是使用中的來設置定時器來實現動畫特效，比如下面的一個基本的動畫循環。

你需要知道的requestAnimationFrame

隨著前端的發展，css已經能夠實現非常多的動畫特效，但是仍然存在css無法完成的動畫任務（比如頁面滾動），通常的解決方案都是使用js中的setInterval來設置定時器來實現動畫特效，比如下面的一個基本的動畫循環。

(function() {
  function updateAnimations() {
    doAnimation1();
    doAnimation2();
  }
  setInterval(updateAnimations, 100);
})();

該代碼實現的功能是每隔100毫秒執行函數操作來達到動畫效果，然而，使用計時器真的可靠嗎？
答案當然是 no

由于JavaScript是單線程的，所以定時器的實現是在當前任務隊列完成后再執行定時器的回調的，假如當前隊列任務執行時間大于定時器設置的延遲時間，那么定時器就不是那么可靠了，如下所示：

let startTime = new Date().getTime();
setTimeout(()=>{
  let endTime = new Date().getTime();
  console.log(endTime - startTime);
},50)

for(let i=0;i<20000;i++) {
  console.log(1);
}

輸出如下

可以看到，設置了50毫秒后執行，實際執行延遲時間遠大于這個數值，這就會導致動畫效果并不會達到想要的效果。

動畫是由瀏覽器按照一定的頻率一幀一幀的繪制的，由css實現的動畫的優勢就是瀏覽器知道動畫的開始及每一幀的循環間隔，能夠在恰當的時間刷新UI，給用戶一種流暢的體驗，而setInterval或setTimeout實現的JavaScript動畫就沒有這么可靠了，因為瀏覽器壓根就無法保證每一幀渲染的時間間隔，一般情況下，每秒平均刷新次數能夠達到60幀，就能夠給人流暢的體驗，即每過 1000/60 毫秒渲染新一幀即可，但從上面的例子知，這一點單靠定時器是無法保證的。
為此，requestAnimationFrame應運而生，其作用就是讓瀏覽器流暢的執行動畫效果。可以將其理解為專門用來實現動畫效果的api，通過這個api,可以告訴瀏覽器某個JavaScript代碼要執行動畫，瀏覽器收到通知后，則會運行這些代碼的時候進行優化，實現流暢的效果，而不再需要開發人員煩心刷新頻率的問題了。

使用方法如下：

function animationWidth() {
  var div = document.getElementById("box");
  div.style.width = parseInt(div.style.width) + 1 + "px";

  if(parseInt(div.style.width) < 200) {
    requestAnimationFrame(animationWidth)
  }
}
requestAnimationFrame(animationWidth);

效果如下(GIF錄制的有點卡。。。實際效果請參考示例)：

可以看到，requestAnimationFrame接受一個動畫執行函數作為參數，這個函數的作用是僅執行一幀動畫的渲染，并根據條件判斷是否結束，如果動畫沒有結束，則繼續調用requestAnimationFrame并將自身作為參數傳入。從示例來看，得到了效果平滑流暢的動畫，這樣就巧妙地避開了每一幀動畫渲染的時間間隔問題。

requestAnimationFrame的兼容性參考caniuse

在高級瀏覽器中，開發人員不用去操心每一幀動畫渲染的時間間隔問題，而針對低版本瀏覽器，則需要使用setTimeout來模擬requestAnimationFrame,且針對不同瀏覽器對requestAnimationFrame的實現，這個api的名字也略有差異，針對低版本瀏覽器的模擬requestAnimationFrame的寫法如下(來自張鑫旭大神的博客)：

(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"] ||    // Webkit中此取消方法的名字變了
                                      window[vendors[x] + "CancelRequestAnimationFrame"];
    }

    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16.7 - (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);
        };
    }
}());

具體含義不做解釋，如果遇到低版本瀏覽器的動畫需求，你只需要把這段代碼丟進去定義一個低配版requestAnimationFrame方法即可（珍愛生命，遠離老瀏覽器啊）。

最后，再貼個部門工作中關于幀動畫的示例
帥氣的動畫效果

參考：

JavaScript高級程序設計

CSS3動畫那么強，requestAnimationFrame還有毛線用？

如有錯誤，歡迎指正!

我的github

云服務器 GPU云服務器你知道你應該知道數據分析知道你百度一下你就知道了

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

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

requestAnimationFrame 方法你真的用對了嗎？

摘要：即在回調被執行前，多次調用帶有同一回調函數的，會導致回調在同一幀中執行多次。例子中的是由傳給回調函數的，表示回調隊列被觸發的時間。完美的解決方案是通過來管理隊列，其思路就是保證的隊列里，同樣的回調函數只有一個。 requestAnimationFrame 方法讓我們可以在下一幀開始時調用指定函數。但是很多人可能不知道，不管三七二十一直接在 requestAnimationFrame 的...

miya 2019-08-02 15:57 評論0 收藏0
requestAnimationFrame 方法你真的用對了嗎？

摘要：即在回調被執行前，多次調用帶有同一回調函數的，會導致回調在同一幀中執行多次。例子中的是由傳給回調函數的，表示回調隊列被觸發的時間。完美的解決方案是通過來管理隊列，其思路就是保證的隊列里，同樣的回調函數只有一個。 requestAnimationFrame 方法讓我們可以在下一幀開始時調用指定函數。但是很多人可能不知道，不管三七二十一直接在 requestAnimationFrame 的...

frontoldman 2019-08-21 11:48 評論0 收藏0
requestAnimationFrame 方法你真的用對了嗎？

摘要：即在回調被執行前，多次調用帶有同一回調函數的，會導致回調在同一幀中執行多次。例子中的是由傳給回調函數的，表示回調隊列被觸發的時間。完美的解決方案是通過來管理隊列，其思路就是保證的隊列里，同樣的回調函數只有一個。 requestAnimationFrame 方法讓我們可以在下一幀開始時調用指定函數。但是很多人可能不知道，不管三七二十一直接在 requestAnimationFrame 的...

defcon 2019-08-22 10:52 評論0 收藏0
requestAnimationFrame 方法你真的用對了嗎？

摘要：即在回調被執行前，多次調用帶有同一回調函數的，會導致回調在同一幀中執行多次。例子中的是由傳給回調函數的，表示回調隊列被觸發的時間。完美的解決方案是通過來管理隊列，其思路就是保證的隊列里，同樣的回調函數只有一個。 requestAnimationFrame 方法讓我們可以在下一幀開始時調用指定函數。但是很多人可能不知道，不管三七二十一直接在 requestAnimationFrame 的...

Taonce 2019-08-20 18:06 評論0 收藏0
requestAnimationFrame 方法你真的用對了嗎？

摘要：即在回調被執行前，多次調用帶有同一回調函數的，會導致回調在同一幀中執行多次。例子中的是由傳給回調函數的，表示回調隊列被觸發的時間。完美的解決方案是通過來管理隊列，其思路就是保證的隊列里，同樣的回調函數只有一個。 requestAnimationFrame 方法讓我們可以在下一幀開始時調用指定函數。但是很多人可能不知道，不管三七二十一直接在 requestAnimationFrame 的...

syoya 2019-08-26 11:26 評論0 收藏0