requestAnimationFrame 筆記

在 Javascript 我們曾經只有一種方式來處理跟特定時間有關的循環事件: setInterval()。簡單說就是當你需要重複某些任務時(依據時間)。
您就會用到這個方法。對於動畫來說需要每秒 60 個 frames 人類才會覺得是順暢平滑的,因此我們可能會寫出像下面這樣的程式碼

1
2
3
setInterval(function () {

}, 1000/60)

除了這個方式,還有另外一種方式就是使用 requestAnimationFrame ,當然這個東西已經出現很久了,不過在這之前,大多的時候我都不需要自己造輪子,也不太有機會需要對於動畫有深入的處理。
因為自己開發一些輪子的需求所以這篇文章會了解一些關於 requestAnimationFrame 的基本用法。

簡單說使用 requestAnimationFrame 有下面幾點好處

  • 瀏覽器可以優化,讓動畫更平滑順暢
  • 該暫停的動畫不會繼續使用 CPU
  • 省電

最簡單的範例

1
2
3
4
5
function repeatOften () {
requestAnimationFrame(repeatOften)
}

requestAnimationFrame(repeatOften)

啟動/停止

requestAnimationFrame 會回傳一個 ID 我們可以用這個 ID 來取消它,就類似 setTimeout, setInterval
下面我們用 jQuery 簡單的展示一個範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var globalID;

function repeatOften () {
$('<div />').appendTo('body');
globalID = requestAnimationFrame(repeatOften);
}

$("#start").on("click", function() {
globalID = requestAnimationFrame(repeatOften);
});

$("#stop").on("click", function() {
cancelAnimationFrame(globalID);
});

參考

作者

andyyou(YOU,ZONGYAN)

發表於

2016-05-12

更新於

2021-12-12

許可協議