アニメーションフレーム

アニメーションフレームコールバック (DOM)

[26] アニメーションフレームコールバック (animation frame callback) は、 レンダリングの更新のタイミングで呼び出されるコールバックです。 スクリプトによるアニメーション効果の実装のために使うことができます。 Window オブジェクトrequestAnimationFrame メソッドアニメーションフレームコールバックを登録し、 cancelAnimationFrame メソッドは削除します。

目次

  1. 仕様書
  2. アニメーションフレームコールバック
    1. 文脈
    2. アニメーションフレームコールバック識別子
  3. requestAnimationFrame
  4. cancelAnimationFrame
  5. 処理
  6. 関連
  7. 歴史
    1. 誕生
    2. §
    3. HTML Standard への統合

仕様書#

アニメーションフレームコールバック#

[12] アニメーションフレームコールバック (animation frame callback) は、 イベントループレンダリングが更新される際に実行されるコールバックです。 任意の JavaScript関数を使うことができます。

[25] アニメーションフレームコールバックは、実行時、 引数として現在時刻を受け取ります。

[43] 正確には、レンダリングの更新開始時点の DOMHighResTimeStamp です。

[22] アニメーションフレームコールバックの実行 (run the animation frame callbacks) は、 対象時刻印について、次のようにします >>11

  1. [39] 写像を、対象アニメーションフレームコールバックの写像の複製に設定します。
  2. [40] 対象アニメーションフレームコールバックの写像を、 新しい順序付き写像に設定します。
  3. [41] 写像の各コールバックについて、順に
    1. [42] コールバックについてコールバック関数の呼び出しを実行します。 引数とします。例外投げられたら、 例外の報告をします。
[24] コールバックの実行途中でコールバックを追加したり削除したりしても、 実行には影響しません。 >>11
[29] コールバックから一時停止スピンを呼び出した場合どうなるのかは不明です。

文脈#

[50] Window インターフェイスDedicatedWorkerGlobalScope は、 interface mixin AnimationFrameProvider実装しています HTML Standard

[51] AnimationFrameProvider は、 requestAnimationFramecancelAnimationFrame の2つのメソッドを持ちます HTML Standard

つまりこの2つのメソッドは、 文書環境専用ワーカーでは使えますが、 共有ワーカーサービスワーカーワークレットでは使えません。

[53] AnimationFrameProvider オブジェクト対応中 (supported) とは、 次のいずれかでもであることをいいます HTML Standard

[70] つまり、共有ワーカーから専用ワーカーを作っても、 requestAnimationFrame は使えません。

[52] AnimationFrameProvider は、 対象オブジェクト (target object) を持ちます。 Window対象オブジェクト関連付けられたWindowDedicatedWorkerGlobalScope対象オブジェクトはそれ自身です。 HTML Standard


[13] 対象オブジェクト順序付き写像であるアニメーションフレームコールバックの写像 (map of animation frame callbacks) (旧アニメーションフレームコールバックのリスト (list of animation frame callbacks) を有します。初期状態では空です。 >>11 このリストに登録されたコールバックアニメーションフレームコールバックとして実行されます。

アニメーションフレームコールバック識別子#

[14] アニメーションフレームコールバックのリストに登録されたコールバックには識別子が割り振られます。この識別子を使ってアニメーションフレームコールバックの登録を解除できます。

[15] 対象オブジェクトアニメーションフレームコールバック識別子 (animation frame callback identifier) を持ちます。 初期値は0です。 >>11 この値は最後に割り当てられた識別子を表していて、コールバックが登録される度にインクリメントされていきます。

requestAnimationFrame#

[16] requestAnimationFrame メソッドは、 次のようにしなければなりません >>11

  1. [57] コールバックを、第1引数を FrameRequestCallback として解釈した結果に設定します。
  2. [58] 文脈オブジェクト対応中の場合、
    1. [59] NotSupportedError DOMException投げ、ここで停止します。
  3. [60] 対象を、 文脈オブジェクト対象オブジェクトに設定します。
  4. [61] 対象アニメーションフレームコールバック識別子1 インクリメントします。
  5. [62] ハンドルを、対象アニメーションフレームコールバック識別子に設定します。
  6. [63] 対象アニメーションフレームコールバックの写像 [ ハンドル ] を、 コールバック設定します。
  7. [64] ハンドルunsigned long として返します。

[21] コールバックが既に当該文書のリスト (や他のリスト) に含まれているかどうかはチェックしません。同じコールバックが複数回登録されれば、 その回数だけ実行されることとなります。

cancelAnimationFrame#

[19] cancelAnimationFrame メソッドは、 次のようにしなければなりません >>11

  1. [17] ハンドルを、 第1引数を unsigned long と解釈した結果に設定します。
  2. [18] 文脈オブジェクト対応中の場合、
    1. [65] NotSupportedError DOMException投げ、ここで停止します。
  3. [66] 文脈オブジェクト対象オブジェクトアニメーションフレームコールバックの写像 [ ハンドル ] を削除します。

[20] このメソッドは、与えられた識別子 (requestAnimationFrame の返り値) のコールバックがあれば、 これをリストから削除します。なければ何もしません。 同じコールバックが複数回登録されていたとしても、 削除されるのは識別子が一致するもの1つだけです。

処理#

[45] コールバック関数の呼び出しについては、レンダリングの更新を参照。

関連#

[35] setTimeoutアニメーションに使えますが、 Webブラウザーの描画のタイミングとは独立しています。より適切なタイミングでアニメーション処理を実行できるよう、 requestAnimationFrame が追加されました >>32

歴史#

誕生#

#

[1] Timing control for script-based animations ( ( 版)) http://www.w3.org/TR/2012/WD-animation-timing-20120221/

[2] Timing control for script-based animations ( ( 版)) http://dvcs.w3.org/hg/webperf/raw-file/tip/specs/RequestAnimationFrame/Overview.html

[3] 871318 – Image slideshow on Instagram profiles is broken with NS_ERROR_XPC_NOT_ENOUGH_ARGS: Not enough arguments [nsIDOMWindow.requestAnimationFrame] ( ( 版)) https://bugzilla.mozilla.org/show_bug.cgi?id=871318

[4] Timing control for script-based animations ( ( 版)) http://www.w3.org/TR/2013/CR-animation-timing-20131031/

[5] [whatwg] Proposal: requestBackgroundProcessing() ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2014-February/042075.html

[6] Timing control for script-based animations ( ( 版)) https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/RequestAnimationFrame/Overview.html

HTML Standard への統合#

[7] IRC logs: freenode / #whatwg / 20140917 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20140917#l-1244

[8] Re: Animation frame task ( (James Robinson 著, 版)) http://lists.w3.org/Archives/Public/www-dom/2014JulSep/0091.html

[9] [whatwg] Move RequestAnimationFrame steps into HTML? ( (James Robinson 著, 版)) http://lists.w3.org/Archives/Public/public-whatwg-archive/2014Sep/0046.html

[10] IRC logs: freenode / #whatwg / 20141119 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20141119#l-819

[28] >>27アニメーションフレームコールバックの仕様は単独の仕様書から HTML Standard に移動されました。

[36] Define FrameRequestCallback · whatwg/html@7308390 ( 版) https://github.com/whatwg/html/commit/73083902d57ec68058b31e2c6acc7ebd1cf334cc

[37] Fix #96: change requestAnimationFrame type to unsigned long · whatwg/html@23cf780 ( 版) https://github.com/whatwg/html/commit/23cf780116ba53168748c243989b357c0a4d337b

[38] Timing control for script-based animations ( 版) http://www.w3.org/TR/2015/NOTE-animation-timing-20150922/

[44] javascript - Safari and requestAnimationFrame gets DOMHighResTimestamp; window.performance not available - Stack Overflow ( ()) http://stackoverflow.com/questions/23298569/safari-and-requestanimationframe-gets-domhighrestimestamp-window-performance-no

[46] Background Tabs in Chrome 57  |  Web  |  Google Developers () https://developers.google.com/web/updates/2017/03/background_tabs

[47] Release Notes for Safari Technology Preview 28 | WebKit () https://webkit.org/blog/7516/release-notes-for-safari-technology-preview-28/

requestAnimationFrame callbacks are now throttled to 30fps and aligned in cross-origin iframes (r215070, r215153)

[48] Update references to requestAnimationFrame to point to HTML spec (birtles著, ) https://github.com/w3c/web-animations/commit/6d9fd5f84b4fe3e524a8bbf073705f0b944a863b

[49] Add requestAnimationFrame() in workers (fserb著, ) https://github.com/whatwg/html/commit/3d9b41d1086131f21cd87a1957344a6fdb7e1748

[67] OffscreenCanvas new commit solution · Issue #3587 · whatwg/html () https://github.com/whatwg/html/issues/3587

[68] OffscreenCanvasAnimation/OffscreenCanvasAnimation.md at 2e0546417d4f45d194270a67a1cdf303f2e0ef88 · junov/OffscreenCanvasAnimation () https://github.com/junov/OffscreenCanvasAnimation/blob/2e0546417d4f45d194270a67a1cdf303f2e0ef88/OffscreenCanvasAnimation.md

[69] Worker.requestAnimationFrame spec by fserb · Pull Request #3677 · whatwg/html () https://github.com/whatwg/html/pull/3677

[71] Meta: wrap IDL block in <code> for consistency (foolip著, ) https://github.com/whatwg/html/commit/712a053a576525873156e8e4d405fd0443074610

[72] Meta: wrap IDL block in <code> for consistency by foolip · Pull Request #3990 · whatwg/html () https://github.com/whatwg/html/pull/3990

[73] Memorandum of Understanding Between W3C and WHATWG () https://www.w3.org/2019/04/WHATWG-W3C-MOU.html

[74] Update autofocus processing algorithm by tkent-google · Pull Request #4763 · whatwg/html () https://github.com/whatwg/html/pull/4763