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

仕様書

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

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

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

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

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

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

文脈

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

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

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

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

  • [54] オブジェクトが Window である
  • [55] オブジェクトの所有者集合が Document を含むlist contains
  • [56] オブジェクトの所有者集合が対応中である DedicatedWorkerGlobalScope を含むlist contains
[70] つまり、共有ワーカーから専用ワーカーを作っても、 requestAnimationFrame は使えません。

[52] AnimationFrameProvider は、 対象オブジェクトtarget objectを持ちます。 Window の対象オブジェクトは関連付けられたWindow、 DedicatedWorkerGlobalScope の対象オブジェクトはそれ自身です。 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] 対象のアニメーションフレームコールバックの写像 [ ハンドル ] を、 コールバックに設定map setします。
  7. [64] ハンドルを unsigned long として返します。

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

cancelAnimationFrame

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

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

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

処理

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

関連

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

歴史

誕生

  • [33] JS Animation API - Google グループ ( 版) https://groups.google.com/forum/#!topic/mozilla.dev.platform/Un0M7bmw338
  • [34] Re: solving the CPU usage issue for non-visible pages (Robert O'Callahan 著, 版) https://lists.w3.org/Archives/Public/public-webapps/2009OctDec/0226.html
  • [32] Well, I'm Back: mozRequestAnimationFrame ( 版) http://robert.ocallahan.org/2010/08/mozrequestanimationframe_14.html

[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

  • [27] Web Applications 1.0 r8849 Flesh out how rendering happens in the event loop. This also defines requestAnimationFrame() and obsoletes the 'Timing control for script-based animations' spec (by request of that spec's editors) ( 版) https://html5.org/r/8849
  • [30] Web Applications 1.0 r8850 Teach the event loop that it might not have a task to run ( 版) https://html5.org/r/8850
  • [31] Web Applications 1.0 r8880 Fix callback logic to reference Web IDL and use the right conventions. ( 版) https://html5.org/r/8880

[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