一、 window.requestAnimationFrame()
window.requestAnimationFrame() 方法告訴瀏覽器您希望執行動畫並請求瀏覽器在下一次重繪之前調用指定的函數來更新動畫 該方法使用一個回調函數作為參數，這個回調函數會在瀏覽器重繪之前調用。 回調函數會被傳入一個參數，DOMHighResTimeStamp，指示requestAnimationFrame() 開始觸發回調函數的當前時間 返回值 一個 long 整數，請求 ID ，是回調列表中唯一的標識。是個非零值，沒別的意義。 你可以傳這個值給 window.cancelAnimationFrame() 以取消回調函數。 window.cancelAnimationFrame(requestID) 取消一個先前通過調用window.requestAnimationFrame()方法添加到計划中的動畫幀請求. requestID是先前調用window.requestAnimationFrame()方法時返回的ID
二、案例
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #test{ width: 200px; height: 200px; background: pink; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } </style> </head> <body> <div id="test"></div> </body> <script type="text/javascript"> /* * window.requestAnimationFrame() * window.requestAnimationFrame() 方法告訴瀏覽器您希望執行動畫並請求瀏覽器在下一次重繪之前調用指定的函數來更新動畫 * 該方法使用一個回調函數作為參數，這個回調函數會在瀏覽器重繪之前調用。 * * * 回調函數會被傳入一個參數，DOMHighResTimeStamp，指示requestAnimationFrame() 開始觸發回調函數的當前時間 * * 返回值 * 一個 long 整數，請求 ID ，是回調列表中唯一的標識。是個非零值，沒別的意義。 * 你可以傳這個值給 window.cancelAnimationFrame() 以取消回調函數。 * * * window.cancelAnimationFrame(requestID) * 取消一個先前通過調用window.requestAnimationFrame()方法添加到計划中的動畫幀請求. * requestID是先前調用window.requestAnimationFrame()方法時返回的ID. */ var start = null; var element = document.getElementById('test'); element.style.position = 'absolute'; function step(timestamp) { if (!start) start = timestamp; var progress = timestamp - start;
// 元素不斷向左移，最大不超過200像素
element.style.left = Math.min(progress / 10, 200) + 'px';
// 如果距離第一次執行不超過 2000 毫秒，
// 就繼續執行動畫
if(progress < 2000) {
window.requestAnimationFrame(step);
}
} window.requestAnimationFrame(step); </script> </html>