Window requestAnimationFrame() 方法
示例
requestAnimationFrame() 方法的使用
const adiv = document.getElementById('mydiv');
let leftpos = 0;
function movediv(timestamp){
leftpos += 5;
adiv.style.left = leftpos + 'px';
requestAnimationFrame(movediv);
}
requestAnimationFrame(movediv);
自己動手試一試 »
描述
requestAnimationFrame() 方法告知瀏覽器您希望執行動畫，並請求瀏覽器在下一次重繪之前呼叫一個指定的函式來更新動畫。
注意： 如果您想在下一次重繪時動畫另一幀，您的回撥例程必須自己呼叫 requestAnimationFrame()。
提示： 每當您準備好在螢幕上更新動畫時，都應該呼叫此方法，因為
- 瀏覽器可以最佳化它，使動畫更流暢
- 非活動標籤頁中的動畫將停止，使 CPU 可以休息
- 更省電
瀏覽器支援
| 方法 | |||||
|---|---|---|---|---|---|
| requestAnimationFrame() | 24.0 | 10.0 | 23.0 | 6.1 | 15.0 |
語法
requestAnimationFrame(callback)
引數值
| 引數 | 型別 | 描述 |
|---|---|---|
| callback | 字串 | 必需。一個將在準備好更新動畫以進行下次重繪時呼叫的函式。該回調函式有一個引數，一個 DOMHighResTimeStamp，表示 requestAnimationFrame() 開始觸發回撥的時間（performance.now() 返回的時間）。 |
技術詳情
| 返回值 | 一個長整型。請求 ID，唯一標識回撥列表中的條目。您可以將此值傳遞給 window.cancelAnimationFrame() 來取消重新整理回撥請求。 |
|---|
相關頁面
Window 物件: cancelAnimationFrame() 方法
❮ Window 物件
