requestAnimationFram

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

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

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

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

window.requestAnimationFrame(callback);

callback

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

返回值節

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

范例

?

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);

?