blog.Ring.idv.tw

探討requestAnimationFrame

探討requestAnimationFrame


(圖片來源:source)

#2012-06-12  iOS 6 開始支援requestAnimationFrame

理論上「requestAnimationFrame」函式是用來處理動畫更新較好的作法,但一般來說在Canvas上要控制動畫更新的方式,大多數常用的方法不外乎透過JavaScript函式「setInterval」或「setTimeout」,基本上透過這兩個函式去控制動畫更新並不會有啥大問題,但問題是這兩個函式本質上並不是為控制動畫更新所專門設計的,我們只是藉由「setInterval」和「setTimeout」的特性將它應用在動畫更新上,所以我們需要有一個新的作法,而它就是「requestAnimationFrame」函式。所以重點就在於,為何控制動畫更新需要有「requestAnimationFrame」函式來取代「setInterval」和「setTimeout」?

理由

1. 當瀏覽器的頁面是處於最小化,或是隱藏在分頁/背景中的狀態,此時瀏覽器可能仍在執行動畫更新的動作,如此便會浪費CPU資源(demo)。

2. 大多數客戶端的螢幕更新頻率多設為60Hz,意指為平均每間隔約「16.7ms」的時間會更新一次螢幕畫面,然而重點就在於我們並不曉得客戶端的螢幕更新頻率為多少?所以若欲透過「setInterval」或「setTimeout」函式來控制,我們也無法得知理想上的動畫更新間隔時間該設為多少?而此時就可以交由「requestAnimationFrame」函式來幫我們處理,以達到同步動畫更新和螢幕更新頻率。

「requestAnimationFrame」函式被規範在「Timing control for script-based animations」標準之下,該標準最初的Working Draft是在去年六月份由Web Performance Working Group所發佈的。

參考資源

IEBLOG: USING PC HARDWARE MORE EFFICIENTLY IN HTML5, PART 1

What the requestAnimationFrame API Should Have Looked Like

requestAnimationFrame API: now with sub-millisecond precision

2012-05-14 14:58:06

Leave a Comment

Copyright (C) Ching-Shen Chen. All rights reserved.

::: 搜尋 :::

::: 分類 :::

::: Ads :::

::: 最新文章 :::

::: 最新回應 :::

::: 訂閱 :::

Atom feed
Atom Comment