requestAnimationFrame使用範例詳解

2023-02-24 06:01:46

requestAnimationFrame--use是什麼

告訴瀏覽器用來執行一個動畫，並且在下一次重繪之前呼叫其指定的回撥函數取更新動畫，所以該方法的引數就是一個回撥函數，在下一次重繪時候呼叫。

回撥函數

回撥函數即是傳入的callback，執行後其傳入的引數為DOMhighResTimeStamp，表示當前回撥函數執行時時間戳，單位毫秒。

呼叫頻率

其回撥函數執行次數為每秒60次，為啥是這個呢，因為在大多數瀏覽器種，這個頻率大多都跟螢幕幀數重新整理頻率保持一致，即在高重新整理的螢幕中會執行的更快。

返回啥

返回的是一個非零整數值，作為唯一標識，傳給window.cancelAnimationFrame(),可用來清除取消回撥函數。

如何用window.requestAnimationFrame(callback);

範例

可以看到瀏覽器在一直列印，這也就是類似動畫的持續過程，一秒鐘會輸出60次。

那怎樣讓其停止，除了使用window.cancelAnimationFrame()；官方指出了為了提高效能和電池壽命，當requestAnimationFrame（）執行在後臺分頁或者隱藏的iframe裡，就會被暫停呼叫以提升效能。

多個執行情況

當一個頁面有多個requestAnimationFrame時，執行情況又是怎樣的呢

執行偵錯輸出內容為

可以看出再同一毫秒時刻，兩個方法會同步執行，可見並不存在先後的情況，其每次執行隔間時間戳近似等於 1000 / 60 = 16.666毫秒，這就意味頁面載入一次，會一次性執行所有的requestAnimationFrame。

停止執行

cancelAnimationFrame

動畫運用

效果如下圖

總結

requestAnimationFrame是瀏覽器的一個宏任務，其用法也跟setTimeOut很相似，其執行的步驟是根據瀏覽器的繪製頻率來的，採用系統的重新整理間隔時間，可以保證在繪製的一次過程中只執行一次，確保了效能，不會出現卡頓和掉幀的情況，這樣就確保了動畫載入的流暢，同時也降低了cpu的消耗和記憶體佔用，是canvas動畫裡面最常用的一種api。

以上就是requestAnimationFrame使用範例詳解的詳細內容，更多關於requestAnimationFrame使用的資料請關注it145.com其它相關文章！