requestAnimationFrame

requestAnimationFrame是瀏覽器用于定時循環(huán)操作的一個接口，類似于setTimeout，主要用途是按幀對網(wǎng)頁進行重繪。

設(shè)置這個API的目的是為了讓各種網(wǎng)頁動畫效果（DOM動畫、Canvas動畫、SVG動畫、WebGL動畫）能夠有一個統(tǒng)一的刷新機制，從而節(jié)省系統(tǒng)資源，提高系統(tǒng)性能，改善視覺效果。代碼中使用這個API，就是告訴瀏覽器希望執(zhí)行一個動畫，讓瀏覽器在下一個動畫幀安排一次網(wǎng)頁重繪。

requestAnimationFrame的優(yōu)勢，在于充分利用顯示器的刷新機制，比較節(jié)省系統(tǒng)資源。顯示器有固定的刷新頻率（60Hz或75Hz），也就是說，每秒最多只能重繪60次或75次，requestAnimationFrame的基本思想就是與這個刷新頻率保持同步，利用這個刷新頻率進行頁面重繪。此外，使用這個API，一旦頁面不處于瀏覽器的當前標簽，就會自動停止刷新。這就節(jié)省了CPU、GPU和電力。

不過有一點需要注意，requestAnimationFrame是在主線程上完成。這意味著，如果主線程非常繁忙，requestAnimationFrame的動畫效果會大打折扣。

requestAnimationFrame使用一個回調(diào)函數(shù)作為參數(shù)。這個回調(diào)函數(shù)會在瀏覽器重繪之前調(diào)用。

requestID = window.requestAnimationFrame(callback);

Polyfill

目前，高版本瀏覽器Firefox 23 / IE 10 / Chrome / Safari）都支持這個方法。可以用下面的方法，檢查瀏覽器是否支持這個API。如果不支持，則自行模擬部署該方法。

window.requestAnimFrame = (function(){return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){window.setTimeout(callback, 1000 / 60);}; })();

上面的代碼按照1秒鐘60次（大約每16.7毫秒一次），來模擬requestAnimationFrame。

使用requestAnimationFrame的時候，只需反復調(diào)用它即可。

function repeatOften() {// Do whateverrequestAnimationFrame(repeatOften); }requestAnimationFrame(repeatOften);

取消重繪可以用 cancelAnimationFrame。

window.cancelAnimationFrame(requestID);

轉(zhuǎn)載自：

https://blog.csdn.net/sinat_34930640/article/details/78177430?utm_source=copy

總結(jié)

以上是生活随笔為你收集整理的requestAnimationFrame 简介的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。