window.requestAnimationFrame()?告訴瀏覽器——你希望執(zhí)行一個(gè)動(dòng)畫，并且要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動(dòng)畫。該方法需要傳入一個(gè)回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)會在瀏覽器下一次重繪之前執(zhí)行

注意：若你想在瀏覽器下次重繪之前繼續(xù)更新下一幀動(dòng)畫，那么回調(diào)函數(shù)自身必須再次調(diào)用window.requestAnimationFrame()

當(dāng)你準(zhǔn)備更新動(dòng)畫時(shí)你應(yīng)該調(diào)用此方法。這將使瀏覽器在下一次重繪之前調(diào)用你傳入給該方法的動(dòng)畫函數(shù)(即你的回調(diào)函數(shù))。回調(diào)函數(shù)執(zhí)行次數(shù)通常是每秒60次，但在大多數(shù)遵循W3C建議的瀏覽器中，回調(diào)函數(shù)執(zhí)行次數(shù)通常與瀏覽器屏幕刷新次數(shù)相匹配。為了提高性能和電池壽命，因此在大多數(shù)瀏覽器里，當(dāng)requestAnimationFrame()?運(yùn)行在后臺標(biāo)簽頁或者隱藏的<iframe>?里時(shí)，requestAnimationFrame()?會被暫停調(diào)用以提升性能和電池壽命。

回調(diào)函數(shù)會被傳入DOMHighResTimeStamp參數(shù)，DOMHighResTimeStamp指示由RequestAnimationFrame（）排隊(duì)的回調(diào)開始觸發(fā)的時(shí)間。指示當(dāng)前被?requestAnimationFrame()?排序的回調(diào)函數(shù)被觸發(fā)的時(shí)間。在同一個(gè)幀中的多個(gè)回調(diào)函數(shù)，它們每一個(gè)都會接受到一個(gè)相同的時(shí)間戳，即使在計(jì)算上一個(gè)回調(diào)函數(shù)的工作負(fù)載期間已經(jīng)消耗了一些時(shí)間。該時(shí)間戳是一個(gè)十進(jìn)制數(shù)，單位毫秒，最小精度為1ms(1000μs)。

window.requestAnimationFrame(callback); callback

下一次重繪之前更新動(dòng)畫幀所調(diào)用的函數(shù)(即上面所說的回調(diào)函數(shù))。該回調(diào)函數(shù)會被傳入DOMHighResTimeStamp參數(shù)，該參數(shù)與performance.now()的返回值相同，它表示requestAnimationFrame()?開始去執(zhí)行回調(diào)函數(shù)的時(shí)刻。

返回值節(jié)

一個(gè)?long?整數(shù)，請求 ID ，是回調(diào)列表中唯一的標(biāo)識。是個(gè)非零值，沒別的意義。你可以傳這個(gè)值給?window.cancelAnimationFrame()?以取消回調(diào)函數(shù)。

范例

?

var start = null; var element = document.getElementById('SomeElementYouWantToAnimate'); element.style.position = 'absolute'; function step(timestamp) { if (!start) start = timestamp; var progress = timestamp - start; element.style.left = Math.min(progress / 10, 200) + 'px'; if (progress < 2000) { window.requestAnimationFrame(step); } } window.requestAnimationFrame(step);

?

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

總結(jié)

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

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