在web應用中，實現(xiàn)動畫效果的方法比較多，例如js中可以通過定時器setTimeout來實現(xiàn)；CSS3可以通過transition和animation來實現(xiàn)；html5中通過Canvas來實現(xiàn)。除此之外，html5還提供一個專門用于請求動畫的API，即requestAnimationFrame（請求動畫幀）。

?屏幕繪制頻率：

即圖像在屏幕上更新的速度，即屏幕上圖像每秒出現(xiàn)的次數(shù)，一般這個頻率是60HZ，所以一幅畫面的刷新頻率大約是16.7ms。大多數(shù)瀏覽器都會對重繪操作加以限制，不超過顯示器的重繪頻率，以為即使超過那個頻率用戶的體驗也不會提升。

?

CSS動畫原理

動畫的本質(zhì)就是讓人眼看到圖像被繪制而引起變化的視覺效果，這個變化要連貫、平滑的方式進行過渡。因為電腦屏幕以每秒60次的頻率繪制，繪制頻率很高所以感覺不到它在繪制。

js中使用setTimeout實現(xiàn)動畫在某些低端機上會出現(xiàn)卡頓、抖動的現(xiàn)象，主要有兩個原因：

（1）setTimeout的執(zhí)行時間并不是確定的。在js中setTimeout任務被放入異步隊列中，只有當主線程上的任務執(zhí)行完之后，才會去檢查異步任務是否需要開始執(zhí)行，所以setTimeout的執(zhí)行時間一般比設定的晚一些。

（2）刷新頻率受屏幕分辨率和屏幕尺寸影響，不同設備的屏幕繪制頻率可能會不同，而setTimeout只能設置一個固定的時間間隔，這個時間不一定和屏幕的刷新時間相同。

以上兩種情況都會導致setTimeout的執(zhí)行步調(diào)和屏幕的刷新步調(diào)不一致，從而引起丟幀現(xiàn)象。所以為什么步調(diào)不一致會出現(xiàn)丟幀呢？

首先setTimeout的執(zhí)行只是在內(nèi)存中對元素的屬性進行改變，這個變化必須要等到屏幕下次繪制時才會被更新到屏幕上。如果步調(diào)不一致會導致中間某些幀的操作直接被跨越過去，而直接更新下一幀。

假設屏幕每隔16.7ms刷新一次，而setTimeout 每隔10ms設置圖像向左移動1px， 就會出現(xiàn)如下繪制過程（表格）

從上面的繪制過程中可以看出，屏幕沒有更新 left=2px 的那一幀畫面，元素直接從left=1px 的位置跳到了 left=3px 的的位置，這就是丟幀現(xiàn)象，這種現(xiàn)象就會引起動畫卡頓。

?

requestAnimationFrame（rAF）

與setTimeout相比，rAF的最大優(yōu)勢是由系統(tǒng)來決定回調(diào)函數(shù)的執(zhí)行時機。具體來講就是，系統(tǒng)每次繪制之前都會主動調(diào)用rAF中的回調(diào)函數(shù)。所以rAF的執(zhí)行頻率是跟著系統(tǒng)的繪制頻率走的，他能保證回調(diào)函數(shù)在屏幕每一次的繪制間隔中只被執(zhí)行一次，這樣就不會出現(xiàn)丟幀現(xiàn)象和動畫卡頓。

?

requestAnimationFrame()方法接收一個參數(shù)，即在繪制屏幕前調(diào)用的一個函數(shù)，這個函數(shù)負責改變下一次繪制的DOM樣式。

function updateProcess(){var div=document.getElementById('status');div.style.width=(parseInt(div.style.width)+5)+'px';if(div.style.width!="300px"){window.requestAnimationFrame(updateProcess);} } window.requestAnimationFrame(updateProcess);

rAF還有兩個優(yōu)勢：

（1）CPU節(jié)能：使用setTimeout實現(xiàn)的動畫，當頁面被隱藏或最小化時，setTimeout仍然在后臺執(zhí)行動畫任務，由于此時頁面處于不可見或不可用的狀態(tài)，刷新動畫是沒有意義的，還浪費CPU資源。而rAF不同，當頁面處于未激活的狀態(tài)下，該頁面的屏幕繪制任務也被系統(tǒng)暫停，因此跟著系統(tǒng)步伐的rAF也停止渲染，當頁面被激活時，動畫就從上次停留的地方繼續(xù)執(zhí)行，有效節(jié)約了CPU開銷。

（2）函數(shù)節(jié)流：在高頻率事件（resize、scroll等）這種，為了防止在一個刷新間隔內(nèi)發(fā)生多次函數(shù)執(zhí)行，使用rAF可保證每個繪制間隔內(nèi)函數(shù)只被執(zhí)行一次，這樣既能保證流暢性，也能更好的節(jié)省函數(shù)執(zhí)行的開銷。

?

轉(zhuǎn)載于:https://www.cnblogs.com/xiaoan0705/p/11212149.html

總結

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

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