您好,登錄后才能下訂單哦!
這篇文章主要介紹“requestAnimationFrame定時動畫屏幕刷新率節(jié)流的方法”,在日常操作中,相信很多人在requestAnimationFrame定時動畫屏幕刷新率節(jié)流的方法問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”requestAnimationFrame定時動畫屏幕刷新率節(jié)流的方法”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
以前,在 JavaScript 中創(chuàng)建動畫基本上就是使用 setInterval()
來控制動畫的執(zhí)行:
(function () { function updateAnimations() { doAnimation1(); doAnimation2(); // ... } setInterval(updateAnimations, 100); })();
這種定時動畫的問題在于,無法準(zhǔn)確知曉循環(huán)之間的延時。
無論是 setInterval()
還是 setTimeout()
,都是不能保證時間精度的。作為第二個參數(shù)的延時只能保證何時會把代碼添加到瀏覽器的任務(wù)隊(duì)列,并不能保證添加到隊(duì)列就會立即執(zhí)行。如果隊(duì)列前面還有其他任務(wù),那么就要等這些任務(wù)執(zhí)行完再執(zhí)行。
簡單來講,這里的毫秒延時不是指何時這些代碼會執(zhí)行,而是指到時候會把回調(diào)添加到任務(wù)隊(duì)列。如果添加到隊(duì)列后,主線程還被其他任務(wù)占用,那么回調(diào)就不會立即執(zhí)行。
知道何時繪制下一幀是創(chuàng)造平滑動畫的關(guān)鍵,所以 setInterval()
和 setTimeout()
的不精確是個大問題。
瀏覽器自身計(jì)時器的精度讓這個問題雪上加霜。瀏覽器計(jì)時器的精度不足毫秒,最厲害的 Chrome 計(jì)時器精度為 4ms。更麻煩的是,瀏覽器又開始對切換到后臺或不活躍的標(biāo)簽頁中的計(jì)時器執(zhí)行限流,因此即使將時間間隔設(shè)為最優(yōu),也免不了只能得到近似的結(jié)果。
一般計(jì)算機(jī)顯示器的屏幕刷新率都是 60HZ,基本上意味著每秒需要重繪 60 次。大多數(shù)瀏覽器會限制重繪頻率,使其不超過屏幕的刷新率,因?yàn)槌^屏幕刷新率用戶也感知不到。
所以,實(shí)現(xiàn)平滑動畫最佳的重繪時間間隔為 1000ms/60,大約 17 ms。以這個速度重繪可以實(shí)現(xiàn)最平滑的動畫,因?yàn)檫@已經(jīng)是瀏覽器的極限了。
requestAnimationFrame()
這個方法可以通知瀏覽器某些 JavaScript 代碼要執(zhí)行動畫了,這樣瀏覽器就可以在運(yùn)行某些代碼后進(jìn)行適當(dāng)?shù)膬?yōu)化。
requestAnimationFrame()
這個方法接收一個參數(shù),該參數(shù)是一個要在重繪屏幕前調(diào)用的函數(shù)。這個函數(shù)就是修改 DOM 樣式以反映下一次重繪有什么變化的地方。為了實(shí)現(xiàn)動畫循環(huán),可以把多個 requestAnimationFrame()
調(diào)用串聯(lián)起來,就像以前使用 setTimeout()
一樣:
function updateProgress() { var div = document.getElementById("status"); div.style.width = parseInt(div.style.width, 10) + 5 + "%"; if (div.style.left != "100%") { requestAnimationFrame(updateProgress); } } requestAnimationFrame(updateProgress);
因?yàn)?requestAnimationFrame()
只會調(diào)用一次傳入的函數(shù),所以每次更新用戶界面時需要再手動調(diào)用它一次。同時,也需要控制動畫何時停止。結(jié)果就會得到非常平滑的動畫。
requestAnimationFrame()
已經(jīng)解決了瀏覽器不知道 JavaScript 動畫何時開始的問題,以及最佳間隔時間是多少的問題。但是,如果我們想知道自己的代碼實(shí)際的執(zhí)行時間呢?同樣有解決方案。
傳給 requestAnimationFrame()
的函數(shù)實(shí)際上可以接收一個參數(shù),該參數(shù)表示下次重繪的時間。這一點(diǎn)非常重要:requestAnimationFrame()
實(shí)際上把重繪任務(wù)安排在了未來一個已知的時間點(diǎn)上,而且通過這個參數(shù)告訴了開發(fā)者,那么基于這個參數(shù),就可以更好地決定如何調(diào)優(yōu)動畫了:
function foo(t) { console.log(t); requestAnimationFrame(foo); } requestAnimationFrame(foo);
const requestID = window.requestAnimationFrame((t) => { console.log(t); }); window.cancelAnimationFrame(requestID);
支持這個方法的瀏覽器實(shí)際上會暴露出作為鉤子的回調(diào)隊(duì)列。所謂鉤子,就是瀏覽器在執(zhí)行下一次重繪之前的一個點(diǎn)。這個回調(diào)隊(duì)列是一個可修改的函數(shù)列表,包含應(yīng)該在重繪之前調(diào)用的函數(shù)。每次調(diào)用 requestAnimationFrame()
都會在隊(duì)列上推入一個回調(diào)函數(shù),隊(duì)列的長度沒有限制。
這個回調(diào)隊(duì)列的行為不一定跟動畫有關(guān)。通過 requestAnimationFrame()
遞歸地向隊(duì)列中加入回調(diào)函數(shù),可以保證每次重繪最多只調(diào)用一次回調(diào)函數(shù),這是一個非常好的節(jié)流工具。在頻繁執(zhí)行影響頁面外觀的代碼時(比如滾動事件監(jiān)聽器),可以利用這個回調(diào)隊(duì)列進(jìn)行節(jié)流。
先看一個原生實(shí)現(xiàn),其中的滾動事件監(jiān)聽器每次觸發(fā)都會調(diào)用名為 expensiveOperation()
(耗時操作) 的函數(shù)。當(dāng)向下滾動網(wǎng)頁時,這個事件很快就會被觸發(fā)并執(zhí)行成百上千次:
function expensiveOperation() { console.log("Invoked at", Date.now()); } window.addEventListener("scroll", () => { expensiveOperation(); });
如果想把事件處理程序的調(diào)用限制在每次重繪之前,那么就可以把它封裝到 requestAnimationFrame()
調(diào)用中:
function expensiveOperation() { console.log("Invoked at", Date.now()); } window.addEventListener("scroll", () => { window.requestAnimationFrame(expensiveOperation); });
這樣會把所有回調(diào)的執(zhí)行集中在重繪鉤子,但不會過濾掉每次重繪的多余調(diào)用。我們可以定義一個標(biāo)志變量,在回調(diào)中設(shè)置其狀態(tài),就能將多余的調(diào)用屏蔽:
let enqueued = false; function expensiveOperation() { console.log("Invoked at", Date.now()); enqueued = false; } window.addEventListener("scroll", () => { if (!enqueued) { enqueued = true; window.requestAnimationFrame(expensiveOperation); } });
因?yàn)橹乩L是非常頻繁的操作,所以這算不上是真正的節(jié)流。更好的方法是配合使用一個計(jì)時器來限制操作執(zhí)行的頻率。這樣,計(jì)時器可以限制實(shí)際的操作執(zhí)行間隔,而 requestAnimationFrame()
控制在瀏覽器的哪個渲染周期中執(zhí)行:
let enabled = true; function expensiveOperation() { console.log("Invoked at", Date.now()); } window.addEventListener("scroll", () => { if (enabled) { enqueued = false; window.requestAnimationFrame(expensiveOperation); window.setTimeout(() => (enabled = true), 50); } });
上面的例子將回調(diào)限制為大約 50ms 執(zhí)行一次。
到此,關(guān)于“requestAnimationFrame定時動畫屏幕刷新率節(jié)流的方法”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。