/
383.txt
312 lines (237 loc) · 15.2 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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
[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]]
です。
[22] [DFN[[RUBYB[アニメーションフレームコールバックの実行]@en[run the animation frame callbacks]]]]は、
[VAR[対象]]と[[時刻印]][VAR[今]]について、次のようにします
[SRC[>>11]]。
[FIG(steps)[
= [39] [VAR[写像]]を、[VAR[対象]]の[F[アニメーションフレームコールバックの写像]]の複製に設定します。
= [40] [VAR[対象]]の[F[アニメーションフレームコールバックの写像]]を、
新しい[[順序付き写像]]に設定します。
= [41] [VAR[写像]]の各[VAR[コールバック]]について、[[順に][for each]]、
== [42] [VAR[コールバック]]について[[コールバック関数の呼び出し]]を実行します。
[VAR[今]]を[[引数]]とします。[[例外]]が[[投げ]]られたら、
[[例外の報告]]をします。
]FIG]
;; [23] [[アニメーションフレームコールバックの実行]]は、
[[レンダリングの更新]]の過程で呼び出されます。
[SEE[ [[レンダリングの更新]]、[[イベントループ]] ]]
;; [24] [[コールバック]]の実行途中で[[コールバック]]を追加したり削除したりしても、
実行には影響しません。 [SRC[>>11]]
;; [29] [[コールバック]]から[[一時停止]]や[[スピン]]を呼び出した場合どうなるのかは不明です。
** 文脈
[50]
[CODE[Window]] [[インターフェイス]]と
[CODE[DedicatedWorkerGlobalScope]] は、
[[interface mixin]]
[DFN[[CODE[AnimationFrameProvider]]]]
を[[実装]]しています [SRC[[CITE[HTML Standard]]]]。
[51]
[CODE[AnimationFrameProvider]] は、
[CODE[requestAnimationFrame]]
と
[CODE[cancelAnimationFrame]] の2つの[[メソッド]]を持ちます
[SRC[[CITE[HTML Standard]]]]。
;;
つまりこの2つの[[メソッド]]は、
[[文書環境]]と[[専用ワーカー]]では使えますが、
[[共有ワーカー]]や[[サービスワーカー]]や[[ワークレット]]では使えません。
[53]
[CODE[AnimationFrameProvider]]
[VAR[オブジェクト]]が[DFN[[F[[RUBYB[対応中]@en[supported]]]]]]とは、
次の''いずれか''でも[[真]]であることをいいます [SRC[[CITE[HTML Standard]]]]。
[FIG(list)[
- [54]
[VAR[オブジェクト]]が [CODE[Window]] である
- [55]
[VAR[オブジェクト]]の[F[所有者集合]]が [CODE[Document]] を[[含む][list contains]]
- [56]
[VAR[オブジェクト]]の[F[所有者集合]]が[F[対応中]]である
[CODE[DedicatedWorkerGlobalScope]] を[[含む][list contains]]
]FIG]
;; [70] つまり、[[共有ワーカー]]から[[専用ワーカー]]を作っても、
[CODE[requestAnimationFrame]] は使えません。
[52]
[CODE[AnimationFrameProvider]] は、
[DFN[[F[[RUBYB[対象オブジェクト]@en[target object]]]]]]を持ちます。
[CODE[Window]] の[F[対象オブジェクト]]は[F[[[関連付けられた[CODE[Window]]]]]]、
[CODE[DedicatedWorkerGlobalScope]] の[F[対象オブジェクト]]はそれ自身です。
[SRC[[CITE[HTML Standard]]]]
-*-*-
[13] [[対象オブジェクト]]は[[順序付き写像]]である[DFN[[F[[RUBYB[アニメーションフレームコールバックの写像]@en[map of animation frame callbacks]]]]]]
(旧[DFN[[F[[RUBYB[[[アニメーションフレームコールバックのリスト]]]@en[list of animation frame callbacks]]]]]]
を有します。初期状態では空です。 [SRC[>>11]]
このリストに登録された[[コールバック]]が[[アニメーションフレームコールバック]]として実行されます。
** アニメーションフレームコールバック識別子
[14] [[アニメーションフレームコールバックのリスト]]に登録された[[コールバック]]には識別子が割り振られます。この識別子を使って[[アニメーションフレームコールバック]]の登録を解除できます。
[15] [[対象オブジェクト]]は[DFN[[F[[RUBYB[[[アニメーションフレームコールバック識別子]]]@en[animation frame callback identifier]]]]]]を持ちます。
初期値は0です。 [SRC[>>11]]
この値は最後に割り当てられた識別子を表していて、[[コールバック]]が登録される度に[[インクリメント]]されていきます。
* [CODE(DOMm)@en[requestAnimationFrame]]
[16]
[DFN[[CODE(DOMm)@en[[[requestAnimationFrame]]]]]] [[メソッド]]は、
次のようにしなければ[MUST[なりません]] [SRC[>>11]]。
[FIG(steps)[
= [57] [VAR[コールバック]]を、第1引数を
[CODE[FrameRequestCallback]] として解釈した結果に設定します。
= [58]
[[文脈オブジェクト]]の[F[対応中]]が[[偽]]の場合、
== [59]
[CODE[NotSupportedError]] [CODE[DOMException]]
を[[投げ]]、ここで停止します。
= [60]
[VAR[対象]]を、
[[文脈オブジェクト]]の[F[対象オブジェクト]]に設定します。
= [61]
[VAR[対象]]の[F[アニメーションフレームコールバック識別子]]を
[N[1]] [[インクリメント]]します。
= [62]
[VAR[ハンドル]]を、[VAR[対象]]の[F[アニメーションフレームコールバック識別子]]に設定します。
= [63]
[VAR[対象]]の[F[アニメーションフレームコールバックの写像]] [ [VAR[ハンドル]] ] を、
[VAR[コールバック]]に[[設定][map set]]します。
= [64]
[VAR[ハンドル]]を [CODE[unsigned long]] として返します。
]FIG]
[21] [[コールバック]]が既に当該[[文書]]のリスト (や他のリスト)
に含まれているかどうかはチェックしません。同じ[[コールバック]]が複数回登録されれば、
その回数だけ実行されることとなります。
* [CODE(DOMm)@en[cancelAnimationFrame]]
[19]
[DFN[[CODE(DOMm)@en[[[cancelAnimationFrame]]]]]] [[メソッド]]は、
次のようにしなければ[MUST[なりません]] [SRC[>>11]]。
[FIG(steps)[
= [17] [VAR[ハンドル]]を、
第1引数を [CODE[unsigned long]] と解釈した結果に設定します。
= [18]
[[文脈オブジェクト]]の[F[対応中]]が[[偽]]の場合、
== [65]
[CODE[NotSupportedError]] [CODE[DOMException]]
を[[投げ]]、ここで停止します。
= [66]
[[文脈オブジェクト]]の[F[対象オブジェクト]]の[F[アニメーションフレームコールバックの写像]] [ [VAR[ハンドル]] ]
を[[削除][map remove]]します。
]FIG]
[20] この[[メソッド]]は、与えられた識別子
([CODE[requestAnimationFrame]] の返り値) の[[コールバック]]があれば、
これをリストから削除します。なければ何もしません。
同じ[[コールバック]]が複数回登録されていたとしても、
削除されるのは識別子が一致するもの1つだけです。
* 処理
[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>
[49] [CITE@en[Add requestAnimationFrame() in workers]]
([[fserb]]著, [TIME[2018-08-28 01:02:51 +09:00]])
<https://github.com/whatwg/html/commit/3d9b41d1086131f21cd87a1957344a6fdb7e1748>
[67] [CITE@en[OffscreenCanvas new commit solution · Issue #3587 · whatwg/html]]
([TIME[2018-09-21 23:50:13 +09:00]])
<https://github.com/whatwg/html/issues/3587>
[68] [CITE@en[OffscreenCanvasAnimation/OffscreenCanvasAnimation.md at 2e0546417d4f45d194270a67a1cdf303f2e0ef88 · junov/OffscreenCanvasAnimation]]
([TIME[2018-09-21 23:51:42 +09:00]])
<https://github.com/junov/OffscreenCanvasAnimation/blob/2e0546417d4f45d194270a67a1cdf303f2e0ef88/OffscreenCanvasAnimation.md>
[69] [CITE@en[Worker.requestAnimationFrame spec by fserb · Pull Request #3677 · whatwg/html]]
([TIME[2018-09-21 23:52:23 +09:00]])
<https://github.com/whatwg/html/pull/3677>
[71] [CITE@en[Meta: wrap IDL block in <code> for consistency]]
([[foolip]]著, [TIME[2018-09-06 00:44:33 +09:00]])
<https://github.com/whatwg/html/commit/712a053a576525873156e8e4d405fd0443074610>
[72] [CITE@en[Meta: wrap IDL block in <code> for consistency by foolip · Pull Request #3990 · whatwg/html]]
([TIME[2018-09-29 17:36:02 +09:00]])
<https://github.com/whatwg/html/pull/3990>
[73] [CITE@en[Memorandum of Understanding Between W3C and WHATWG]]
([TIME[2019-05-28 17:23:37 +09:00]])
<https://www.w3.org/2019/04/WHATWG-W3C-MOU.html>
[74] [CITE@en[Update autofocus processing algorithm by tkent-google · Pull Request #4763 · whatwg/html]]
([TIME[2020-08-31 17:52:13 +09:00]])
<https://github.com/whatwg/html/pull/4763>