[26] アニメーションフレームコールバックは、
レンダリングの更新のタイミングで呼び出されるコールバックです。
スクリプトによるアニメーション効果の実装のために使うことができます。
Window オブジェクトの
requestAnimationFrame メソッドはアニメーションフレームコールバックを登録し、
cancelAnimationFrame メソッドは削除します。
[12] アニメーションフレームコールバックは、 イベントループでレンダリングが更新される際に実行されるコールバックです。 任意の JavaScript関数を使うことができます。
[25] アニメーションフレームコールバックは、実行時、 引数として現在時刻を受け取ります。
[22] アニメーションフレームコールバックの実行は、 対象と時刻印今について、次のようにします >>11。
[50]
Window インターフェイスと
DedicatedWorkerGlobalScope は、
interface mixin
AnimationFrameProvider
を実装しています HTML Standard。
[51]
AnimationFrameProvider は、
requestAnimationFrame
と
cancelAnimationFrame の2つのメソッドを持ちます
HTML Standard。
[53]
AnimationFrameProvider
オブジェクトが対応中とは、
次のいずれかでも真であることをいいます HTML Standard。
[52]
AnimationFrameProvider は、
対象オブジェクトを持ちます。
Window の対象オブジェクトは関連付けられたWindow、
DedicatedWorkerGlobalScope の対象オブジェクトはそれ自身です。
HTML Standard
[13] 対象オブジェクトは順序付き写像であるアニメーションフレームコールバックの写像 (旧アニメーションフレームコールバックのリスト を有します。初期状態では空です。 >>11 このリストに登録されたコールバックがアニメーションフレームコールバックとして実行されます。
[14] アニメーションフレームコールバックのリストに登録されたコールバックには識別子が割り振られます。この識別子を使ってアニメーションフレームコールバックの登録を解除できます。
[15] 対象オブジェクトはアニメーションフレームコールバック識別子を持ちます。 初期値は0です。 >>11 この値は最後に割り当てられた識別子を表していて、コールバックが登録される度にインクリメントされていきます。
requestAnimationFrame[16]
requestAnimationFrame メソッドは、
次のようにしなければなりません >>11。
FrameRequestCallback として解釈した結果に設定します。NotSupportedError DOMException
を投げ、ここで停止します。unsigned long として返します。[21] コールバックが既に当該文書のリスト (や他のリスト) に含まれているかどうかはチェックしません。同じコールバックが複数回登録されれば、 その回数だけ実行されることとなります。
cancelAnimationFrame[19]
cancelAnimationFrame メソッドは、
次のようにしなければなりません >>11。
unsigned long と解釈した結果に設定します。NotSupportedError DOMException
を投げ、ここで停止します。[20] このメソッドは、与えられた識別子
(requestAnimationFrame の返り値) のコールバックがあれば、
これをリストから削除します。なければ何もしません。
同じコールバックが複数回登録されていたとしても、
削除されるのは識別子が一致するもの1つだけです。
[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
[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
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
DOMHighResTimeStampです。