/
383.txt
191 lines (137 loc) · 11 KB
/
383.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
[26] [DFN[[RUBYB[[[アニメーションフレームコールバック]]]@en[animation frame callback]]]]は、
[[レンダリングの更新]]のタイミングで呼び出される[[コールバック]]です。
[[スクリプト]]による[[アニメーション]]効果の実装のために使うことができます。
[CODE(DOMi)@en[[[Window]]]] [[オブジェクト]]の
[DFN[[CODE(DOMm)@en[[[requestAnimationFrame]]]]]] [[メソッド]]は[[アニメーションフレームコールバック]]を登録し、
[DFN[[CODE(DOMm)@en[[[cancelAnimationFrame]]]]]] [[メソッド]]は削除します。
* 仕様書
[REFS[
- [11] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2014-11-21 03:08:35 +09:00]] 版) <https://html.spec.whatwg.org/#animation-frames>
]REFS]
* アニメーションフレームコールバック
[12] [DFN[[RUBYB[[[アニメーションフレームコールバック]]]@en[animation frame callback]]]]は、
[[イベントループ]]で[[レンダリング]]が更新される際に実行される[[コールバック]]です。
任意の [[JavaScript関数]]を使うことができます。
[25] [[アニメーションフレームコールバック]]は、実行時、
[[引数]]として[[現在時刻]]を受け取ります。
;; [43] 正確には、[[レンダリングの更新]]開始時点の [CODE(DOMi)@en[DOMHighResTimeStamp]]
です。
[13] [CODE(DOMi)@en[[[Document]]]] は[DFN[[RUBYB[[[アニメーションフレームコールバックのリスト]]]@en[list of animation callbacks]]]]を有します。初期状態では空です。 [SRC[>>11]]
このリストに登録された[[コールバック]]が[[アニメーションフレームコールバック]]として実行されます。
[22] [DFN[[RUBYB[アニメーションフレームコールバックの実行]@en[run the animation frame callbacks]]]]は、
[[文書]][VAR[文書]]と[[時刻印]][VAR[今]]について、次のようにしなければ[MUST[なりません]]
[SRC[>>11]]。
[FIG(steps)[
= [39] [VAR[リスト]]を、[VAR[文書]]の[F[アニメーションフレームコールバックのリスト]]の複製に設定します。
= [40] [VAR[文書]]の[F[アニメーションフレームコールバックのリスト]]を、空の[[リスト]]に設定します。
= [41] [VAR[リスト]]の各[VAR[コールバック]]について、順に、
== [42] [VAR[コールバック]]について[[コールバック関数の呼び出し]]を実行します。
[VAR[今]]を[[引数]]とします。[[例外]]が[[投げ]]られたら、
[[例外の報告]]をします。
]FIG]
;; [23] [[アニメーションフレームコールバックの実行]]は、[[レンダリングの更新]]の過程で呼び出されます。
;; [24] [[コールバック]]の実行途中で[[コールバック]]を追加したり削除したりしても、
実行には影響しません。 [SRC[>>11]]
;; [29] [[コールバック]]から[[一時停止]]や[[スピン]]を呼び出した場合どうなるのかは不明です。
* アニメーションフレームコールバック識別子
[14] [[アニメーションフレームコールバックのリスト]]に登録された[[コールバック]]には識別子が割り振られます。この識別子を使って[[アニメーションフレームコールバック]]の登録を解除できます。
[15] [CODE(DOMi)@en[[[Document]]]] は[DFN[[RUBYB[[[アニメーションフレームコールバック識別子]]]@en[animation frame callback identifier]]]]を持ちます。その初期値は0です。 [SRC[>>11]]
この値は最後に割り当てられた識別子を表していて、[[コールバック]]が登録される度に[[インクリメント]]されていきます。
* [CODE(DOMm)@en[requestAnimationFrame]]
[16] [CODE(DOMi)@en[[[Window]]]] [[オブジェクト]]の
[DFN[[CODE(DOMm)@en[[[requestAnimationFrame]]]]]] [[メソッド]]は、
[[コールバック]]を1つ[[引数]]とし、 [CODE(JS)@en[[[unsigned long]]]] を返します [SRC[>>11]]。
[17] この[[メソッド]]は、[[文脈オブジェクト]]の [CODE(DOMi)@en[[[Document]]]]
[[オブジェクト]]の[[アニメーションフレームコールバックのリスト]]の末尾に指定された[[コールバック]]を追加します。 [SRC[>>11]]
[18] この時、[[文脈オブジェクト]]の [CODE(DOMi)@en[[[Document]]]]
[[オブジェクト]]の[[アニメーションフレームコールバック識別子]]を1つ大きな値とし、
その値を当該[[コールバック]]に割り当てます。そしてその値を返します。 [SRC[>>11]]
[21] [[コールバック]]が既に当該[[文書]]のリスト (や他のリスト)
に含まれているかどうかはチェックしません。同じ[[コールバック]]が複数回登録されれば、
その回数だけ実行されることとなります。
* [CODE(DOMm)@en[cancelAnimationFrame]]
[19] [CODE(DOMi)@en[[[Window]]]] [[オブジェクト]]の
[DFN[[CODE(DOMm)@en[[[cancelAnimationFrame]]]]]] [[メソッド]]は、
[CODE(JS)@en[[[unsigned long]]]] の値を1つ[[引数]]とし、何も返しません。 [SRC[>>11]]。
[20] この[[メソッド]]は、[[文脈オブジェクト]]の [CODE(DOMi)@en[[[Document]]]]
[[オブジェクト]]の[[アニメーションフレームコールバックのリスト]]に[[引数]]で指定された識別子が割り当てられた[[コールバック]]があれば、
これをリストから削除します。 [SRC[>>11]]
* 処理
[45] [[コールバック関数]]の呼び出しについては、[[レンダリングの更新]]を参照。
* 関連
[35] [CODE(JS)@en[[[setTimeout]]]] も[[アニメーション]]に使えますが、
[[Webブラウザー]]の描画のタイミングとは独立しています。より適切なタイミングで[[アニメーション]]処理を実行できるよう、
[CODE(DOMm)@en[[[requestAnimationFrame]]]] が追加されました [SRC[>>32]]。
* 歴史
** 誕生
[REFS[
- [33] [CITE[JS Animation API - Google グループ]] ([TIME[2015-02-08 15:37:46 +09:00]] 版) <https://groups.google.com/forum/#!topic/mozilla.dev.platform/Un0M7bmw338>
- [34] [CITE@en[Re: solving the CPU usage issue for non-visible pages]] ([[Robert O'Callahan]] 著, [TIME[2009-10-20 06:51:53 +09:00]] 版) <https://lists.w3.org/Archives/Public/public-webapps/2009OctDec/0226.html>
- [32] [CITE[Well, I'm Back: mozRequestAnimationFrame]] ([TIME[2015-02-02 17:16:03 +09:00]] 版) <http://robert.ocallahan.org/2010/08/mozrequestanimationframe_14.html>
]REFS]
**
[1] [CITE[Timing control for script-based animations]]
( ([TIME[2012-02-21 23:13:03 +09:00]] 版))
<http://www.w3.org/TR/2012/WD-animation-timing-20120221/>
[2] [CITE[Timing control for script-based animations]]
( ([TIME[2012-03-01 22:02:03 +09:00]] 版))
<http://dvcs.w3.org/hg/webperf/raw-file/tip/specs/RequestAnimationFrame/Overview.html>
[3] [CITE@en[871318 – Image slideshow on Instagram profiles is broken with NS_ERROR_XPC_NOT_ENOUGH_ARGS: Not enough arguments ''''''[''''''nsIDOMWindow.requestAnimationFrame'''''']'''''']]
( ([TIME[2013-05-18 16:12:35 +09:00]] 版))
<https://bugzilla.mozilla.org/show_bug.cgi?id=871318>
[4] [CITE[Timing control for script-based animations]]
( ([TIME[2013-10-31 06:01:47 +09:00]] 版))
<http://www.w3.org/TR/2013/CR-animation-timing-20131031/>
[5] [CITE[''''''[''''''whatwg'''''']'''''' Proposal: requestBackgroundProcessing()]]
( ([TIME[2014-02-20 21:38:44 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2014-February/042075.html>
[6] [CITE[Timing control for script-based animations]]
( ([TIME[2014-07-31 14:26:06 +09:00]] 版))
<https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/RequestAnimationFrame/Overview.html>
** HTML Standard への統合
[7] [CITE[IRC logs: freenode / #whatwg / 20140917]]
( ([TIME[2014-09-18 04:45:19 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20140917#l-1244>
[8] [CITE@en[Re: Animation frame task]]
( ([[James Robinson]] 著, [TIME[2014-08-22 15:07:50 +09:00]] 版))
<http://lists.w3.org/Archives/Public/www-dom/2014JulSep/0091.html>
[9] [CITE@en[''''''[''''''whatwg'''''']'''''' Move RequestAnimationFrame steps into HTML?]]
( ([[James Robinson]] 著, [TIME[2014-09-18 07:44:16 +09:00]] 版))
<http://lists.w3.org/Archives/Public/public-whatwg-archive/2014Sep/0046.html>
[10] [CITE[IRC logs: freenode / #whatwg / 20141119]]
( ([TIME[2014-11-21 01:19:37 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20141119#l-819>
[REFS[
- [27] [CITE@en[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)]] ([TIME[2014-11-20 06:56:00 +09:00]] 版) <https://html5.org/r/8849>
- [30] [CITE@en[Web Applications 1.0 r8850 Teach the event loop that it might not have a task to run]] ([TIME[2014-11-20 07:20:00 +09:00]] 版) <https://html5.org/r/8850>
- [31] [CITE@en[Web Applications 1.0 r8880 Fix callback logic to reference Web IDL and use the right conventions.]] ([TIME[2015-01-16 05:52:00 +09:00]] 版) <https://html5.org/r/8880>
]REFS]
[28] >>27 で[[アニメーションフレームコールバック]]の仕様は単独の仕様書から
[[HTML Standard]] に移動されました。
;; [[レンダリングの更新]]も参照。
[36] [CITE@en[Define FrameRequestCallback · whatwg/html@7308390]]
([TIME[2015-08-28 16:38:06 +09:00]] 版)
<https://github.com/whatwg/html/commit/73083902d57ec68058b31e2c6acc7ebd1cf334cc>
[37] [CITE@en[Fix #96: change requestAnimationFrame type to unsigned long · whatwg/html@23cf780]]
([TIME[2015-09-07 12:48:07 +09:00]] 版)
<https://github.com/whatwg/html/commit/23cf780116ba53168748c243989b357c0a4d337b>
[38] [CITE[Timing control for script-based animations]]
([TIME[2015-09-17 04:21:29 +09:00]] 版)
<http://www.w3.org/TR/2015/NOTE-animation-timing-20150922/>
[44] [CITE[javascript - Safari and requestAnimationFrame gets DOMHighResTimestamp; window.performance not available - Stack Overflow]]
( ([TIME[2016-06-20 13:06:51 +09:00]]))
<http://stackoverflow.com/questions/23298569/safari-and-requestanimationframe-gets-domhighrestimestamp-window-performance-no>
[46] [CITE@en[Background Tabs in Chrome 57 | Web | Google Developers]]
([TIME[2017-03-14 09:42:32 +09:00]])
<https://developers.google.com/web/updates/2017/03/background_tabs>
[FIG(quote)[
[FIGCAPTION[
[47] [CITE[Release Notes for Safari Technology Preview 28 | WebKit]]
([TIME[2017-05-04 02:12:59 +09:00]])
<https://webkit.org/blog/7516/release-notes-for-safari-technology-preview-28/>
]FIGCAPTION]
> requestAnimationFrame callbacks are now throttled to 30fps and aligned in cross-origin iframes (r215070, r215153)
]FIG]
[48] [CITE@en[Update references to requestAnimationFrame to point to HTML spec]]
([[birtles]]著, [TIME[2017-12-04 10:39:18 +09:00]])
<https://github.com/w3c/web-animations/commit/6d9fd5f84b4fe3e524a8bbf073705f0b944a863b>