[TOC] ## 概述 requestAnimationFrame是瀏覽器用于定時循環操作的一個接口，類似于setTimeout，主要用途是按幀對網頁進行重繪。 設置這個API的目的是為了讓各種網頁動畫效果（DOM動畫、Canvas動畫、SVG動畫、WebGL動畫）能夠有一個統一的刷新機制，從而節省系統資源，提高系統性能，改善視覺效果。代碼中使用這個API，就是告訴瀏覽器希望執行一個動畫，讓瀏覽器在下一個動畫幀安排一次網頁重繪。 requestAnimationFrame的優勢，在于充分利用顯示器的刷新機制，比較節省系統資源。顯示器有固定的刷新頻率（60Hz或75Hz），也就是說，每秒最多只能重繪60次或75次，requestAnimationFrame的基本思想就是與這個刷新頻率保持同步，利用這個刷新頻率進行頁面重繪。此外，使用這個API，一旦頁面不處于瀏覽器的當前標簽，就會自動停止刷新。這就節省了CPU、GPU和電力。 不過有一點需要注意，requestAnimationFrame是在主線程上完成。這意味著，如果主線程非常繁忙，requestAnimationFrame的動畫效果會大打折扣。 requestAnimationFrame使用一個回調函數作為參數。這個回調函數會在瀏覽器重繪之前調用。 ~~~ requestID = window.requestAnimationFrame(callback); ~~~ 目前，主要瀏覽器Firefox 23 / IE 10 / Chrome / Safari）都支持這個方法。可以用下面的方法，檢查瀏覽器是否支持這個API。如果不支持，則自行模擬部署該方法。 ~~~ window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); ~~~ 上面的代碼按照1秒鐘60次（大約每16.7毫秒一次），來模擬requestAnimationFrame。 使用requestAnimationFrame的時候，只需反復調用它即可。 ~~~ function repeatOften() { // Do whatever requestAnimationFrame(repeatOften); } requestAnimationFrame(repeatOften); ~~~ ## cancelAnimationFrame方法 cancelAnimationFrame方法用于取消重繪。 ~~~ window.cancelAnimationFrame(requestID); ~~~ 它的參數是requestAnimationFrame返回的一個代表任務ID的整數值。 ~~~ var globalID; function repeatOften() { $("<div />").appendTo("body"); globalID = requestAnimationFrame(repeatOften); } $("#start").on("click", function() { globalID = requestAnimationFrame(repeatOften); }); $("#stop").on("click", function() { cancelAnimationFrame(globalID); }); ~~~ 上面代碼持續在body元素下添加div元素，直到用戶點擊stop按鈕為止。 ## 實例 下面，舉一個實例。 假定網頁中有一個動畫區塊。 ~~~ <div id="anim">點擊運行動畫</div> ~~~ 然后，定義動畫效果。 ~~~ var elem = document.getElementById("anim"); var startTime = undefined; function render(time) { if (time === undefined) time = Date.now(); if (startTime === undefined) startTime = time; elem.style.left = ((time - startTime)/10 % 500) + "px"; } ~~~ 最后，定義click事件。 ~~~ elem.onclick = function() { (function animloop(){ render(); requestAnimFrame(animloop); })(); }; ~~~ 運行效果可查看[jsfiddle](http://jsfiddle.net/paul/rjbGw/3/)。 ## 參考鏈接 * Paul Irish,?[requestAnimationFrame for smart animating](http://paulirish.com/2011/requestanimationframe-for-smart-animating/) * Chris Coyier,?[Using requestAnimationFrame](http://css-tricks.com/using-requestanimationframe/)