-
Notifications
You must be signed in to change notification settings - Fork 143
/
Copy pathOverview.bs
1286 lines (936 loc) · 48.9 KB
/
Overview.bs
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
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<pre class='metadata'>
Title: CSS Animation Worklet API
Status: ED
Group: houdini
ED: https://drafts.css-houdini.org/css-animation-worklet-1/
TR: https://www.w3.org/TR/css-animation-worklet-1/
Shortname: css-animation-worklet
Level: 1
Abstract:
Editor: Majid Valipour, majidvp@google.com, w3cid 81464
Editor: Robert Flack, flackr@chromium.org, w3cid 98451
Editor: Stephen McGruer, smcgruer@chromium.org, w3cid 96463
Ignored Terms: AnimationWorklet
</pre>
<pre class="link-defaults">
spec:infra; type:dfn; text:list
spec:dom; type:interface; text:Document
</pre>
<pre class="anchors">
urlPrefix: https://heycam.github.io/webidl/; type: dfn;
text: NotSupportedError
urlPrefix: #dfn-;
text: callback this value
text: exception
text: throw
url: throw; text: thrown
urlPrefix: #;
url: Function; text: Function
url: VoidFunction; text: VoidFunction
url: invoke-a-callback-function; text: Invoke
url: construct-a-callback-function; text: constructing
url: es-type-mapping; text: converting
urlPrefix: https://html.spec.whatwg.org/#; type: dfn;
url: run-the-animation-frame-callbacks; text: running the animation frame callbacks
urlPrefix: http://w3c.github.io/html/infrastructure.html#; type: dfn;
text: structuredserialize
text: structureddeserialize
urlPrefix: https://www.w3.org/TR/css3-transitions/#; type: dfn;
text: animatable properties
urlPrefix: https://drafts.csswg.org/web-animations#; type: dfn;
url: the-documents-default-timeline; text: default document timeline
url: concept-animation; text: animation
text: effect value
text: effect stack
text: target property
text: timeline
text: animation effect
text: current time
text: local time
text: inherited time
text: ready
text: play state
text: playback rate
text: set the target effect of an animation
text: set the timeline of an animation
text: finished
text: idle
text: paused
text: pending
text: running
text: composite operation
text: animation class
text: replace state
text: active
text: persisted
text: removed
text: start delay
text: end delay
text: fill mode
text: iteration start
text: iteration count
text: iteration duration
text: playback direction
text: timing function
text: set the start time
text: set the current time
text: update the timing properties of an animation effect
urlPrefix: https://w3c.github.io/web-animations/level-2/#;
type: dfn;
text: group effect
text: child effect
urlPrefix: https://tc39.github.io/ecma262/#sec-; type: dfn;
text: IsCallable
text: IsConstructor
text: HasProperty
url: ecmascript-data-types-and-values; text: Type
url: map-objects; text:map object
url: get-o-p; text: Get
url: set-o-p-v-throw; text: Set
url: samevalue; text: SameValue
urlPrefix: native-error-types-used-in-this-standard-
text: TypeError
urlPrefix: https://www.w3.org/TR/hr-time-2/#dom-; type: dfn
text: DOMHighResTimeStamp
urlPrefix: https://wicg.github.io/scroll-animations/#; type: interface
url: scrolltimeline; text: ScrollTimeline
url: dictdef-scrolltimelineoptions; text: ScrollTimelineOptions
url: dom-scrolltimeline-scrollsource; text: scrollSource
urlPrefix: https://wicg.github.io/scroll-animations/#; type: dfn
url: current-time-algorithm; text: current time of the ScrollTimeline;
</pre>
<pre class=biblio>
{
"explainer": {
"href": "https://github.com/w3c/css-houdini-drafts/blob/master/css-animation-worklet-1/README.md",
"title": "Animation Worklet Explainer",
"deliveredBy": [
"https://github.com/w3c/css-houdini-drafts"
]
},
"principles": {
"href": "https://github.com/w3c/css-houdini-drafts/blob/master/css-animation-worklet-1/principles.md",
"title": "Animation Worklet Design Principles and Goals",
"deliveredBy": [
"https://github.com/w3c/css-houdini-drafts"
]
}
}
</pre>
Introduction {#intro}
=====================
<em>This section is not normative.</em>
This document introduces a new primitive that provides extensibility in web animations and enables
high performance interactive procedural animations on the web. For details on the rationale and
motivation see both [[explainer]] and [[principles]].
The [=Animation Worklet=] API provides a method to create scripted animations that control a set
of [=animation effects=]. The API is designed to make it possible for user agents to run such
animations in their own dedicated thread to provide a degree of performance isolation from main
thread.
Relationship to the Web Animations API {#relationship-to-web-animations}
------------------------------------------------------------------------
<em>This section is not normative.</em>
Animations running inside an [=Animation Worklet=] execution context expose the {{Animation}}
interface from the Web Animations specification on the main javascript execution context. This means
they can be controlled and inspected from main thread using the same Web Animation APIs.
Animation Worklet {#animation-worklet-desc}
===========================================
<dfn>Animation Worklet</dfn> is a {{Worklet}} responsible for all classes related to custom
animations. The worklet can be accessed via {{animationWorklet}} attribute.
<xmp class='idl'>
[Exposed=Window]
partial namespace CSS {
[SameObject] readonly attribute Worklet animationWorklet;
};
</xmp>
The {{animationWorklet}}'s [=worklet global scope type=] is {{AnimationWorkletGlobalScope}}.
{{AnimationWorkletGlobalScope}} represents the global execution context of {{animationWorklet}}.
<xmp class='idl'>
[ Global=(Worklet,AnimationWorklet), Exposed=AnimationWorklet ]
interface AnimationWorkletGlobalScope : WorkletGlobalScope {
undefined registerAnimator(DOMString name, AnimatorInstanceConstructor animatorCtor);
};
callback AnimatorInstanceConstructor = any (any options, optional any state);
</xmp>
Animator {#animator-desc}
=========================
An <dfn>Animator</dfn> represents a custom animation that is running inside
{{AnimationWorkletGlobalScope}}. Each Animator is associated with an [=animation=] instance (of
type {{WorkletAnimation}}) in the document and determines how that animation progresses its
[=animation effect=]. The <code>animate</code> function contains the logic responsible for
translating the animation current time into appropriate progress of the animation effect. An
animator can only be instantiated by construction of a {{WorkletAnimation}} in the document.
Two animators types are supported: [=Stateless Animator=] and [=Stateful Animator=] each
providing a different state management strategy.
Stateless Animator {#stateless-animator-desc}
---------------------------------------------
A <dfn>Stateless Animator</dfn> is a type of animator does not depend on any local state either
stored on the instance or global scope. Effectively, the animate function of an
[=Stateless Animator=] can be treated as a pure function with the expectation that given the same
input, it produces the same output.
<div class='note'>
This is how an stateless animator class should look.
<pre class='lang-javascript'>
class FooAnimator {
constructor(options) {
// Called when a new animator is instantiated.
}
animate(currentTime, effect) {
// Animation frame logic goes here.
}
}
</pre>
</div>
Note: The statelessness allows animation worklet to perform optimization such as producing multiple
animation frames in parallel, sharing a single animator instance for multiple animations, and
performing very cheap teardown and setup. Using [=Stateless Animator=] is highly recommended to
enable such optimizations.
Stateful Animator {#stateful-animator-desc}
-------------------------------------------
A <dfn>Stateful Animator</dfn> is a type of animator that can have local state and animation worklet
guarantees that it maintains this state as long as the stateful animator fulfills the contract
required by its interface and as described following.
[=Animation worklet=] maintains a set of {{WorkletGlobalScope}}s which may exist across different
threads or processes. Animation worklet may temporarily terminate a global scope (e.g., to preserve
resources) or move a running [=animator instance=] across different global scopes (e.g., if its
effect is mutable only in a certain thread). Animation worklet guarantees that a stateful animator
instance's state is maintained even if the instance is respawned in a different global scope.
The basic mechanism for maintaining the state is that the animation worklet snapshots the local
state that is exposed via the [=state function=] and then reifies it so that it can be passed into
the constructor when the animator instance is respawned at a later time in a potentially different
global scope. The [=migrate an animator instance=] algorithm specifies this process in details.
A user-defined stateful animator is expected to fulfill the required contract which is that its
state function returns an object representing its state that can be serialized using structured
serialized algorithm and that it can also recreate its state given that same object passed to its
constructor.
<div class='note'>
This is how a stateful animator class should look.
<pre class='lang-javascript'>
class BarAnimator {
constructor(options, state) {
// Called when a new animator is instantiated (either first time or after being respawned).
this.currentVelocity = state ? state.velocity : 0;
}
animate(currentTime, effect) {
// Animation frame logic goes here and can rely on this.currentVelocity.
this.currentVelocity += 0.1;
}
state() {
// The returned object should be serializable using structured clonable algorithm.
return {
velocity: this.currentVelocity;
}
}
}
</pre>
</div>
Animator Definition {#animator-definition-desc}
-----------------------------------------------
An <dfn>animator definition</dfn> is a [=struct=] which describes the author defined custom
animation logic. It consists of:
- : <dfn>animator name</dfn>
:: A <<ident>>#.
- : <dfn>class constructor</dfn>
:: A {{AnimatorInstanceConstructor}} [=callback function=] type.
- : <dfn>animate function</dfn>
:: A [=Function=] [=callback function=] type.
- : <dfn>state function</dfn>
:: A [=Function=] [=callback function=] type.
- : <dfn for="animator definition">stateful flag</dfn>
:: A boolean flag
A <dfn>stateful animator definition</dfn> is an [=animator definition=] whose
[=animator definition/stateful flag=] is <b>true</b>.
A <dfn>document animator definition</dfn> is a [=struct=] which describes the information needed by
the [=document=] about the author defined custom animation. It consists of:
- : <dfn for="document animator definition">stateful flag</dfn>
:: A boolean flag
Registering an Animator Definition {#registering-animator-definition}
---------------------------------------------------------------------
The [=document=] has a [=map=] of <dfn>document animator definitions</dfn>. The map gets populated
when {{registerAnimator(name, animatorCtor)}} is called.
An {{AnimationWorkletGlobalScope}} has a [=map=] of <dfn>animator definitions</dfn>. The map gets
populated when {{registerAnimator(name, animatorCtor)}} is called.
Note that to register a [=stateful animator definition=] it is simply enough for the registered
class to have a <code>state</code> function.
<div algorithm="register-animator">
When the <dfn method for=AnimationWorkletGlobalScope>registerAnimator(|name|, |animatorCtor|)</dfn>
method is called in a {{AnimationWorkletGlobalScope}}, the user agent <em>must</em> run the
following steps:
1. If |name| is not a valid <<ident>>, [=throw=] a [=TypeError=] and abort all these
steps.
2. Let |animatorDefinitions| be the {{AnimationWorkletGlobalScope}}'s
[=animator definitions=] [=map=].
3. If |animatorDefinitions|[|name|] [=map/exists=], [=throw=] a [=NotSupportedError=]
and abort all these steps.
4. If the result of [=IsConstructor=](|animatorCtor|) is <b>false</b>, [=throw=] a
[=TypeError=] and abort all these steps.
5. Let |prototype| be the result of [=Get=](|animatorCtor|, "prototype").
6. Let |animateFuncValue| be the result of [=Get=](|prototype|, "animate").
7. Let |animateFunc| be the result of [=converting=] |animateFuncValue| to the [=Function=]
[=callback function=] type. If an exception is thrown, rethrow the exception and abort
all these steps.
8. Let |stateFuncValue| be the result of [=Get=](|prototype|, "state").
9. Let |stateFunc| be the result of [=converting=] |stateFuncValue| to the [=Function=]
[=callback function=] type, If an exception is thrown, set |stateful| to be <b>false</b>,
otherwise set |stateful| to be <b>true</b> and |stateFunc| to be undefined.
10. Let |definition| be a new [=animator definition=] with:
- [=animator name=] being |name|
- [=class constructor=] being |animatorCtor|
- [=animate function=] being |animateFunc|
- [=state function=] being |stateFunc|
- [=animator definition/stateful flag=] being |stateful|
9. [=map/set=] the |animatorDefinitions|[|name|] to |definition|.
10. [=Queue a task=] to run the following steps:
1. Let |documentAnimatorDefinitions| be the associated [=document's=]
[=document animator definitions=] [=map=].
2. Let |documentDefinition| be a new [=document animator definition=] with:
- [=animator definition/stateful flag=] being |stateful|
3. If |documentAnimatorDefinitions|[|name|] [=map/exists=], run the following steps:
1. Let |existingDocumentDefinition| be the result of [=map/get=]
|documentAnimatorDefinitions|[|name|].
2. If |existingDocumentDefinition| is <code>"invalid"</code>, abort all these steps.
3. If |existingDocumentDefinition| and |documentDefinition| are not equivalent, (that is
their [=document animator definition/stateful flag=]s are
different), then:
[=map/set=] |documentAnimatorDefinitions|[|name|] to <code>"invalid"</code>.
Log an error to the debugging console stating that the same class was registered
with different <code>stateful flag</code>.
4. Otherwise, [=map/set=] |documentAnimatorDefinitions|[|name|] to
|documentDefinition|.
</div>
Animator Effect {#animator-effect-desc}
---------------------------------------
A <dfn>Animator Effect</dfn> represents the underlying [=animation effect=] inside animation
worklet.
It has a <dfn>corresponding effect</dfn> property which is a reference to the underlying
[=animation effect=]. It also has corresponding properties for the following
[=animation effect=]'s properties:
* [=local time=],
* [=start delay=],
* [=end delay=],
* [=fill mode=],
* [=iteration start=],
* [=iteration count=],
* [=iteration duration=],
* [=playback direction=], and
* [=timing function=].
[=Animator Effect=] is represented by the {{WorkletAnimationEffect}} interface
inside {{AnimationWorkletGlobalScope}}.
<xmp class='idl'>
[ Exposed=AnimationWorklet ]
interface WorkletAnimationEffect {
EffectTiming getTiming();
ComputedEffectTiming getComputedTiming();
attribute double? localTime;
};
</xmp>
Note: {{WorkletAnimationEffect}} is basically a restricted version of {{AnimationEffect}} interface
which does not have {{AnimationEffect/updateTiming}} but additionally allows local time to be set.
<div class=methods>
: <dfn method for=WorkletAnimationEffect>getTiming()</dfn>
:: Returns the specified timing properties using the corresponding properties.
: <dfn method for=WorkletAnimationEffect>getComputedTiming()</dfn>
:: Returns the calculated timing properties using the corresponding properties.
: <dfn attribute for=WorkletAnimationEffect>localTime</dfn>
:: Getting the attribute returns the corresponding [=local time=].
Setting the attribute updates the local time given this effect as |effect|
and the attribute value as |time|:
1. If the |time| is the same as |effect|'s [=local time=] then skip following steps.
2. Set the |effect|'s [=local time=] to |time|.
3. Set the |effect|'s animator instance's [=sync requested flag=] to <b>true</b>.
</div>
Animator Instance {#animator-instance-section}
==============================================
An <dfn>animator instance</dfn> is a [=struct=] which describes a fully realized custom
[=animator=] in an {{AnimationWorkletGlobalScope}}. It has a reference to an
[=animator definition=] and owns the instance specific state such as animation effect and
timeline. It consists of:
- : [=animator name=]
:: A string used to identify the animator definition.
- : [=frame requested flag=]
:: A boolean flag that indicates if the animator needs to animate.
- : <dfn>sync requested flag</dfn>
:: A flag that indicates if the animator needs to sync its output.
- : <dfn>effect</dfn>
:: An [=Animator Effect=].
- : <dfn>animator current time</dfn>
:: A time value equivalent to the corresponding [=worklet animation=]'s current time.
- : <dfn>animator timeline</dfn>
:: The [=timeline=] of the corresponding [=worklet animation=].
- : <dfn>animator serialized options</dfn>
:: The serializable object representing the options to be used when constructing the animator
instance.
A <dfn>stateful animator instance</dfn> is an [=animator instance=] whose corresponding
definition is a [=stateful animator definition=].
Creating an Animator Instance {#creating-animator-instance}
-----------------------------------------------------------
Each [=animator instance=] lives in an {{AnimationWorkletGlobalScope}}.
Each {{AnimationWorkletGlobalScope}} has an <dfn>animator instance set</dfn>. The set is populated
when the user agent constructs a new [=animator instance=] in the {{AnimationWorkletGlobalScope}}
scope. Each [=animator instance=] corresponds to a worklet animation in the document scope.
<div algorithm="create-animator">
To <dfn>create a new animator instance</dfn> given a |name|, |timeline|, |effect|,
|serializedOptions|, |serializedState|, and |workletGlobalScope|, the user agent <em>must</em> run
the following steps:
1. Let the |definition| be the result of looking up |name| on the |workletGlobalScope|'s
[=animator definitions=].
If |definition| does not exist abort the following steps.
2. Let |animatorCtor| be the [=class constructor=] of |definition|.
3. Let |options| be [=StructuredDeserialize=](|serializedOptions|).
4. Let |state| be [=StructuredDeserialize=](|serializedState|).
5. Let |animatorInstance| be the result of [=constructing=] |animatorCtor| with
«|options|, |state|» as arguments. If an exception is thrown, rethrow the exception and
abort all these steps.
6. Let |animatorEffect| be the result of [=constructing=] a {{WorkletAnimationEffect}}
with its [=corresponding effect=] being |effect|.
7. Set the following on |animatorInstance| with:
- [=animator name=] being |name|
- [=frame requested flag=] being <b>false</b>
- [=sync requested flag=] being <b>false</b>
- [=animator current time=] being unresolved
- [=effect=] being |animatorEffect|
- [=animator timeline=] being |timeline|
- [=animator serialized options=] being |options|
8. Add |animatorInstance| to |workletGlobalScope|'s [=animator instance set=].
</div>
Running Animators {#running-animators}
--------------------------------------
When the user agent wants to produce a new animation frame, if for any [=animator instance=] the
associated [=frame requested flag=] is <b>true</b> then the the user agent <em>must</em>
[=run animators=] for the current frame in all its associated global scopes.
Note: The user agent is not required to run animations on every visual frame. It is legal to defer
generating an animation frame until a later frame. This allow the user agent to
provide a different service level according to their policy.
<div algorithm="run-animators">
When the user agent wants to <dfn>run animators</dfn> in a given |workletGlobalScope|, it
<em>must</em> run the following steps:
1. Iterate over all [=animator instance=]s in the |workletGlobalScope|'s <a>animator instance
set</a>. For each such |animator| the user agent <em>must</em> perform the following steps:
1. Let |animatorName| be |animator|'s [=animator name=]
2. Let the |definition| be the result of looking up |animatorName| on the
|workletGlobalScope|'s [=animator definitions=].
If |definition| does not exist then abort the following steps.
3. If the [=frame requested flag=] for |animator| is <b>false</b> or the effect belonging
to the |animator| will not be visible within the visual viewport of the current frame
the user agent <em>may</em> abort all the following steps.
Issue: Consider giving user agents permission to skip running individual animator
instances to throttle slow animators.
4. Let |animateFunction| be |definition|'s [=animate function=].
5. Let |currentTime| be [=animator current time=] of |animator|.
6. Let |effect| be [=effect=] of |animator|.
7. [=Invoke=] |animateFunction| with arguments «|currentTime|, |effect|»,
and with |animator| as the [=callback this value=].
2. If any [=animator instance=]s in the |workletGlobalScope|'s [=animator instance set=]
has its [=sync requested flag=] set to <b>true</b> then [=sync local times to document=]
given |workletGlobalScope|.
</div>
Note: Although inefficient, it is legal for the user agent to [=run animators=] multiple times
in the same frame.
Issue: should be explicit as to what happens if the animateFunction throws an exception. At least
we should have wording that the localTime values of the effects are ignored to avoid incorrect
partial updates.
Removing an Animator Instance {#removing-animator}
--------------------------------------------------
<div algorithm="remove-animator">
To <dfn>remove an animator instance</dfn> given |animator| and |workletGlobalScope| the user agent
<em>must</em> run the following steps:
1. Remove |animator| from |workletGlobalScope|'s [=animator instance set=].
</div>
Migrating an Animator Instance {#migrating-animator}
----------------------------------------------------
The migration process allows [=stateful animator instance=] to be migrated to a different
{{AnimationWorkletGlobalScope}} without losing their local state.
<div algorithm="migrate-animator">
To <dfn>migrate an animator instance</dfn> from one {{AnimationWorkletGlobalScope}} to another,
given |animator|, |sourceWorkletGlobalScope|, |destinationWorkletGlobalScope|, the user agent
<em>must</em> run the following steps :
1. Let |serializedState| be undefined.
2. [=Queue a task=] on |sourceWorkletGlobalScope| to run the following steps:
1. Let |animatorName| be |animator|'s [=animator name=]
2. Let |definition| be the result of looking up |animatorName| on |sourceWorkletGlobalScope|'s
[=animator definitions=].
If |definition| does not exist then abort the following steps.
3. Let |stateful| be the [=animator definition/stateful flag=] of |definition|.
4. If |stateful| is <b>false</b> then abort the following steps.
5. Let |stateFunction| be |definition|'s [=state function=].
6. Let |state| be the result of [=Invoke=] |stateFunction| with |animator| as the
[=callback this value=]. If any exception is thrown, rethrow the exception and abort
the following steps.
7. Set |serializedState| to be the result of [=StructuredSerialize=](|state|).
If any exception is thrown, then abort the following steps.
8. Run the procedure to [=remove an animator instance=] given |animator|, and
|sourceWorkletGlobalScope|.
2. Wait for the above task to complete. If the task is aborted, abort the following steps.
3. [=Queue a task=] on |destinationWorkletGlobalScope| to run the following steps:
1. Run the procedure to [=create a new animator instance=] given:
- The |animator|'s [=animator name=] as name.
- The |animator|'s [=animator timeline=] as timeline.
- The |animator|'s [=effect=] as effect.
- The |animator|'s [=animator serialized options=] as options.
- The |serializedState| as state.
- The |destinationWorkletGlobalScope| as workletGlobalScope.
</div>
If an animator state getter throws the user agent will remove the animator but does not recreate it.
This effectively removes the animator instance.
Requesting Animation Frames {#requesting-animation-frames}
----------------------------------------------------------
Each [=animator instance=] has an associated <dfn>frame requested flag</dfn>. It is initially set
to <b>false</b>. Different circumstances can cause the [=frame requested flag=] to be set to
<b>true</b>. These include the following:
- Changes in the [=current time=] of the animator's [=timeline=]
- Changes in the [=current time=] of the animator's corresponding [=worklet animation=]
Performing [=run animators=] resets the [=frame requested flag=] on animators to <b>false</b>.
Web Animations Integration {#web-animation-integration}
=======================================================
Worklet Animation {#worklet-animation-desc}
-------------------------------------------
<dfn>Worklet animation</dfn> is a kind of [=animation=] that delegates animating its animation
effect to an [=animator instance=]. It controls the lifetime and playback state of its
[=corresponding animator instance=].
Being an [=animation=], [=worklet animation=] has an [=animation effect=] and a
[=timeline=]. However unlike other animations the worklet animation's [=current time=] does
not directly determine the animation effect's [=local time=] (via its [=inherited time=]).
Instead the associated [=animator instance=] controls the animation effect's [=local time=]
directly. Note that this means that the [=timeline's=] current time does not fully determine the
animation's output.
[=Worklet animation=] has the following properties in addition to the {{Animation}} interface:
- : <dfn>animation animator name</dfn>
:: A string that identifies its [=animator definition=].
- : <dfn>serialized options</dfn>
:: A serializable options object that is used whe constructing a new animator instance.
- : <dfn>corresponding animator instance</dfn>
:: A [=Animator Instance=].
The existence of [=corresponding animator instance=] for a [=worklet animation=] depends on
the animation [=play state=]. See [[#web-animation-overrides]] for details on when and this
correspondence changes.
<xmp class='idl'>
[Exposed=Window]
interface WorkletAnimation : Animation {
constructor(DOMString animatorName,
optional (AnimationEffect or sequence<AnimationEffect>)? effects = null,
optional AnimationTimeline? timeline,
optional any options);
readonly attribute DOMString animatorName;
};
</xmp>
<figure>
<img src="images/WorkletAnimation-timing-model.svg" width="600"
alt="Overview of the WorkletAnimation timing model.">
<figcaption>
Overview of the worklet animation timing model.
<br>
The animation current time is input to the animator instance, which produces a local time value
for the animation effect. If the animator instance is running in a parallel global scope the
implementation may also choose to use the local time value to produce the animation output and
update the visuals in parallel.
</figcaption>
</figure>
Creating a Worklet Animation {#creating-worklet-animation}
----------------------------------------------------------
<div algorithm="create-worklet-animation">
<dfn constructor for=WorkletAnimation>WorkletAnimation(|animatorName|, |effects|, |timeline|, |options|)</dfn>
Creates a new {{WorkletAnimation}} object using the following procedure:
1. Let |documentAnimatorDefinitions| be the associated [=document's=] <a>document animator
definitions</a> [=map=].
2. If |documentAnimatorDefinitions|[|animatorName|] does not [=map/exists=], [=throw=] an
[=TypeError=] and abort the following steps.
3. If |documentAnimatorDefinitions|[|animatorName|] is <code>"invalid"</code>, [=throw=] an
[=TypeError=] and abort the following steps.
4. Let |workletAnimation| be a new {{WorkletAnimation}} object.
5. Run the procedure to [=set the timeline of an animation=] on |workletAnimation| passing
|timeline| as the new timeline or, if a |timeline| argument is not provided,
passing the [=default document timeline=] of the {{Document}} associated with the
{{Window}} that is the [=current global object=].
6. Let |effect| be the result corresponding to the first matching condition from below.
: If |effects| is a {{AnimationEffect}} object,
:: Let effect be |effects|.
: If |effects| is a [=list=] of {{AnimationEffect}}</a> objects,
:: Let |effect| be a new {{WorkletGroupEffect}} with its children set to |effects|.
: Otherwise,
:: Let |effect| be undefined.
7. Let |serializedOptions| be the result of [=StructuredSerialize=](|options|).
Rethrow any exceptions.
8. Set the [=serialized options=] of |workletAnimation| to |serializedOptions|.
9. Set the [=animation animator name=] of |workletAnimation| to |animatorName|.
10. Run the procedure to [=set the target effect of an animation=] on |workletAnimation|
passing |effect| as the new effect. Note that this may trigger action to
[=set animator instance of worklet animation=]. See [[#web-animation-overrides]] for more
details.
</div>
Worklet Animation Timing and Sync Model {#timing-and-sync-model}
----------------------------------------------------------------
This section describes how [=worklet animation's=] timing model differs from other
[=animations=].
As described in [[#worklet-animation-desc]], the [=worklet animation's=] [=current time=] does
not determine its [=animation effect's=] [=local time=]. Instead the associated
[=animator instance=] controls the animation effect's [=local time=] directly. This means that the
animation effect's local time is controlled from a {{WorkletGlobalScope}} which may be in a parallel
execution context.
Here are a few implications of the above semantics:
- Setting the [=current time=] or [=start time=] of a [=worklet animation=] does not
necessarily change its output, but may change the animation [=play state=].
- Similarly, invoking {{Animation/finish()}} or updating a [=worklet animation's=] <a>playback
rate</a> does not necessarily change its output, but may change the animation [=play state=]
- Querying the animation effect's local time using {{AnimationEffect/getComputedTiming()}}
may return stale information, in the case where the [=animator instance=] is running in a
parallel execution context.
If a Worklet Animation animation is executing in a parallel worklet execution context, the last
known state of its Animator Effects should be periodically synced back to the main javascript
execution context. The synchronization of [=effect values=] from the parallel worklet execution
context to the main javascript execution context <em>must</em> occur before
[=running the animation frame callbacks=] as part of the document lifecycle.
Note that due to the asynchronous nature of this animation model a script running in the main
javascript execution context may see a stale value when reading a [=target property=] that is
being animated by a Worklet Animation, compared to the value currently being used to produce the
visual frame that is visible to the user. This is similar to the effect of asynchronous scrolling
when reading scroll offsets in the main javascript execution context.
<div algorithm="sync-local-times">
To <dfn>sync local times to document</dfn> for a given |workletGlobalScope| the user agent
<em>must</em> perform the action that corresponds to the first matching condition from the
following:
: If the |workletGlobalScope| is not running in a parallel execution context
:: perform the following steps immediately:
: If the |workletGlobalScope| is running in a parallel execution context
:: [=queue a task=] to run the following steps before <a>running the animation frame
callbacks</a> as part of the document lifecycle:
1. Iterate over all [=animator instance=]s in the animation worklet's global scope
[=animator instance set=]. For each such |animator| perform the following steps:
1. If |animator|'s [=sync requested flag=] is <b>false</b> skip the rest of the steps.
2. Let |animatorEffect| be |animator|'s [=effect=].
3. Let |effect| be |animatorEffect|'s [=corresponding effect=].
4. Set |effect|'s local time to |animatorEffect|'s local time.
5. Set |animator|'s [=sync requested flag=] to <b>false</b>.
</div>
<div algorithm="sync-animation-timings">
To <dfn>sync animation timings to worklet</dfn> for a given |workletAnimation| the user agent
<em>must</em> perform the following steps:
1. If |workletAnimation| does not have a [=corresponding animator instance=], abort the
following steps.
2. Let |animator| be |workletAnimation|'s [=corresponding animator instance=].
2. Let |workletGlobalScope| be the {{AnimationWorkletGlobalScope}} associated with
|workletAnimation|.
3. : If the |workletGlobalScope| is not running in a parallel execution context
:: perform the following steps immediately.
: If the |workletGlobalScope| is running in a parallel execution context
:: [=queue a task=] to run the following steps:
1. Set |animator|'s [=animator current time=] to |workletAnimation|'s [=current time=]
2. Let |animatorEffect| be |animator|'s [=effect=].
3. Let |effect| be |animatorEffect|'s [=corresponding effect=].
4. Set the following properties on |animatorEffect| to be the same as |effect|:
* [=start delay=],
* [=end delay=],
* [=fill mode=],
* [=iteration start=],
* [=iteration count=],
* [=iteration duration=],
* [=playback direction=], and
* [=timing function=].
</div>
Note: Notice that the local time is <b>not</b> synced from the document to animation worklet.
Issue(811): Come with appropriate mechanism's for [=animator instance=] to get notified when its
animation currentTime is changing e.g., via reverse(), finish() or playbackRate change. So that
it can react appropriately.
Web Animations Overrides {#web-animation-overrides}
---------------------------------------------------
In addition to the existing conditions on when the [=animation=] is considered [=ready=], a
[=worklet animation=] is only considered [=ready=] when the following condition is also true:
- the user agent has completed any setup required to create the [=worklet animation's=]
[=corresponding animator instance=].
When a given worklet animation's [=play state=] changes from [=idle=] to [=finished=],
[=running=], or [=paused=], run the procedure to
[=associate animator instance of worklet animation=] given the worket animation as
|workletAnimation|.
When a given worklet animation's [=play state=] changes from [=finished=], [=running=] or
[=paused=] to [=idle=], run the procedure to
[=disassociate animator instance of worklet animation=]given the worklet animation as
|workletAnimation|.
When a given worklet animation's [=replace state=] changes from [=active=] to either
[=persisted=] or [=removed=] run the procedure to
[=disassociate animator instance of worklet animation]= given the worklet animation as
|workletAnimation|.
Issue: In web-animation play state is updated before the actual change in particular some operations
such as play() are asynchronous. We should really invoke these Animator related operation after the
appropriate animation operation is complete instead of when play state has changed. This will
require either finding (or introducing) q new hook in web animation or having override for each such
async operation.
When the procedure to [=set the target effect of an animation=] for a given worklet animation
is called, then [=set animator instance of worklet animation=] given the worklet animation as
|workletAnimation|.
When the procedure to [=set the timeline of an animation=] for a given |workletAnimation|
is called, then [=set animator instance of worklet animation=] given the worklet animation as
|workletAnimation|.
When the procedure to [=set the current time=] or [=set the start time=] for a given worklet
animation is called, then [=sync animation timings to worklet=] given the worklet animation as
|workletAnimation|.
When the procedure to [=update the timing properties of an animation effect=] for a given effect is
called and that effect is owned be a worklet animation, then
[=sync animation timings to worklet=] given that worklet animation as |workletAnimation|.
<div algorithm="associate-animator-instance">
To <dfn>associate animator instance of worklet animation</dfn> given |workletAnimation|,
the user agent <em>must</em> run the following steps:
1. If |workletAnimation| has a [=corresponding animator instance=], abort the following steps.
2. Let |workletGlobalScope| be the {{AnimationWorkletGlobalScope}} associated with
|workletAnimation|.
3. [=Queue a task=] on |workletGlobalScope| to run the procedure to <a>create a new animator
instance</a>, passing:
* The |workletAnimation|'s [=animation animator name=] as name.
* The |workletAnimation|'s [=timeline=] as timeline.
* The |workletAnimation|'s [=animation effect=] as effect.
* The |workletAnimation|'s [=serialized options=] as options.
* The |workletGlobalScope| as workletGlobalScope.
4. If the procedure was successful, set the resulting [=animator instance=] to be the
[=corresponding animator instance=] of |workletAnimation|.
</div>
<div algorithm="disassociate-animator-instance">
To <dfn>disassociate animator instance of worklet animation</dfn> given
|workletAnimation|, the user age <em>must</em> run the following steps:
1. If |workletAnimation| does not have a [=corresponding animator instance=], abort the
following steps.
2. Let |workletGlobalScope| be the {{AnimationWorkletGlobalScope}} associated with
|workletAnimation|.
3. Let |animatorInstance| be |workletAnimation|'s [=corresponding animator instance=].
4. [=Queue a task=] on the |workletGlobalScope| to run the procedure to <a>remove an animator
instance</a>, passing |animatorInstance| as instance and |workletGlobalScope| as
workletGlobalScope.
5. Set |workletAnimation|'s [=corresponding animator instance=] as undefined.
</div>
<div algorithm="set-animator-instance">
To <dfn>set animator instance of worklet animation</dfn> given
|workletAnimation|, the user agent <em>must</em> run the following steps:
1. [=disassociate animator instance of worklet animation=] given |workletAnimation|.
2. [=associate animator instance of worklet animation=] given |workletAnimation|.
</div>
Effect Stack and Composite Order {#effect-stack-composite-order}
----------------------------------------------------------------
As with other animations, [=worklet animations=] participate in the [=effect stack=]. A worklet
animation does not have a specific [=animation class=] which means it has the same composite order
as other Javascript created web animations.
Additional Related Concepts {#related-concepts}
===============================================
Worklet Group Effect {#worklet-group-effect}
--------------------------------------------
<em>This section is not normative.</em>
[=Group effect=] is a type of [=animation effect=] that enbales multiple child animation
effects to be animated together as a group.
{{WorkletGroupEffect}} is a type of [=group effect=] that allows its [=child effect's=]
[=local times=] to be mutated individually.