This repository was archived by the owner on Jun 7, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 33
/
Copy pathanimation-elements.html
996 lines (970 loc) · 41.8 KB
/
animation-elements.html
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
<!DOCTYPE html>
<!-- vim: set expandtab ts=2 sw=2 tw=80: -->
<html>
<head>
<title>Animation Elements 1.0</title>
<meta charset="utf-8">
<script src="respec/respec.js" class="remove"></script>
<script src="respec/js/sh_html.min.js" class="remove"></script>
<script class='remove'>
var respecConfig = {
// specification status (e.g. WD, LCWD, NOTE, etc.). If in doubt use
// ED.
specStatus: "unofficial",
// the specification's short name, as in
// http://www.w3.org/TR/short-name/
// shortName: "animation-elements",
// if your specification has a subtitle that goes below the main
// formal title, define it here
// subtitle : "an excellent document",
// if you wish the publication date to be other than today, set this
// publishDate: "2009-08-06",
// if the specification's copyright date is a range of years, specify
// the start date here:
// copyrightStart: "2005"
// if there is a previously published draft, uncomment this and set
// its YYYY-MM-DD date and its maturity status
// previousPublishDate: "1977-03-15",
// previousMaturity: "WD",
// if there a publicly available Editor's Draft, this is the link
// edDraftURI:
// "http://dev.w3.org/2009/dap/ReSpec.js/documentation.html",
// if this is a LCWD, uncomment and set the end of its review period
// lcEnd: "2009-08-05",
// if you want to have extra CSS, append them to this list
// it is recommended that the respec.css stylesheet be kept
extraCSS: ["http://dev.w3.org/2009/dap/ReSpec.js/css/respec.css",
"web-animations.css"],
// Turning off inlineCSS for now since if extraCSS points to
// a relative URL your testing from a file URL the XHR will fail.
// Probably should turn this back on once this is hosted on a server
// somewhere.
inlineCSS: false,
// editors, add as many as you like
// only "name" is required
editors: [
{ name: "Brian Birtles", mailto: "[email protected]",
company: "Mozilla Japan", companyURL: "http://mozilla.jp/" }
],
// authors, add as many as you like.
// This is optional, uncomment if you have authors as well as editors.
// only "name" is required. Same format as editors.
//authors: [
// { name: "Your Name", url: "http://example.org/",
// company: "Your Company", companyURL: "http://example.com/" },
//],
// XXX If we continue using ReSpec then we need to tweak it to support
// multiple working groups. It includes updating the patent section
// prose to say "groups" instead of "group" etc.
// name of the WG
wg: "SVG Working Group (part of the Graphics Activity)",
// URI of the public WG page
wgURI: "http://www.w3.org/Graphics/",
// name (without the @w3c.org) of the public mailing to which comments
// are due
wgPublicList: "public-fx",
// URI of the patent status for this WG, for Rec-track documents
// !!!! IMPORTANT !!!!
// This is important for Rec-track documents, do not copy a patent URI
// from a random document unless you know what you're doing. If in
// doubt ask your friendly neighbourhood Team Contact.
wgPatentURI: "",
noIDLSorting: true,
noIDLIn: true
};
</script>
</head>
<body>
<section id='abstract'>
This specification defines an element-based markup for defining
animation and time-related changes to a Web page.
It is intended to replace the animation features of <a
href="http://www.w3.org/TR/SVG11/">SVG 1.1</a> by building on the model
defined in <a href="http://www.w3.org/TR/web-animations/">Web
Animations</a>.
</section>
<section>
<h2>Introduction</h2>
<p class="todo">TBD</p>
<section class="informative">
<h2>Use cases</h2>
<h4>Tweening and cutout animation</h4>
<p>
A common animation technique involves taking some graphical elements
and interpolating their properties such as position or color or moving
them along a path.
This is sometimes referred to as <em>cutout animation</em> since the
moving parts were traditionally represented by separate shapes cut
from cardboard or similar material.
</p>
<p>
For example, in the following segment of a cartoon, a golfer swings
his arms (and club!) and as a result the golf ball follows
a trajectory through the air before bouncing along the ground.
</p>
<pre class='example sh_html'>
<path id="golferBody" d="…"/>
<g id="armsAndClub">
<path id="club" d="…"/>
<path id="arms" d="…"/>
</g>
<circle id="ball" …/>
<seq>
<!-- Rotate man's arms and club -->
<animate href="armsAndClub" attributeName="transform"
values="rotate(0); rotate(-120); rotate(30); rotate(0)"
keyTimes="0; 0.5; 0.8; 1" additive="sum" dur="1.2s"/>
<!-- Show course of ball -->
<animateMotion href="ball" begin="-0.312s" path="…"/>
</seq>
</pre>
<h4>Timesheets</h4>
<p>
In simple examples such as the above cartoon, it is useful to
represent graphical content and timing side-by-side.
However, for applications that involve complex sequencing of effects
it is often convenient to separate the temporal markup into a separate
subtree or document sometimes referred to as
a “timesheet”—the temporal equivalent of
a stylesheet.
</p>
<p>
Such a timesheet may define animations directly or simply set classes
and define the animation effects using, for example, CSS Animations
[[CSS3-ANIMATIONS]].
</p>
<p>
For example, the title screen and first scene of an interactive
story might use the following timesheet:
</p>
<pre class='example sh_html'>
<!-- Title screen -->
<seq begin="0s">
<!-- Draw curtains to the side -->
<par>
<animate href="leftCurtain" attributeName="transform"
to="translate(-100 0)" dur="1s" additive="sum"/>
<animate href="rightCurtain" attributeName="transform"
to="translate(100 0)" dur="1s" additive="sum"/>
</par>
<!-- Then show the title by setting a class which may trigger,
for example, a fade animation defined in CSS -->
<set href="title" attributeName="class" to="active"/>
</seq>
<!-- Show the first scene when the user clicks the title screen -->
<seq begin="titleScreen.click" restart="whenNotActive">
<!-- Cross fade to show background -->
<par>
<animate href="titleScreen" attributeName="opacity" to="0" dur="1s"/>
<animate href="scene1Background" attributeName="opacity" to="1" dur="1s"/>
</par>
<!-- Move narrator onstage -->
<animate href="narrator" attributeName="transform"
to="translate(180 90)" dur="0.3s"/>
<!-- Set the active class on the narrator which may trigger further
animations or perhaps update the pointer-events property so he
becomes clickable-->
<set href="narrator" attributeName="class" to="active"/>
</seq>
</pre>
<p>
The triggers for these effects can be defined declaratively as in
the example above or they can be applied using script (see the
<code>beginElement</code> and <code>beginElementAt</code> methods).
</p>
<div class="feedbackWanted">
<p>
For more complex usage such as an interactive comic book the
following features would be useful:
</p>
<ul>
<li>Ability to define a “sequence” (which may or may not
be a type of <code><seq></code>) where each step is
gated on certain conditions (e.g. mouse clicks or keyboard
presses).
<li>Ability to step backwards through such a sequence.
<li>Ability to define alternative animations when stepping
backwards.
<li>Ability to step forwards causing the current in-play step to
skip to its end and triggering the next step.
<li>Ability to hyperlink to a particular step (including when steps
when such steps are nested)
</ul>
<p>
The features currently defined in this specification can be used to
realize some of these sort of use cases but typically it is
quite cumbersome.
</p>
<p>
It is possible to extend this specification to cover the above
features or we can defer it and introduce a more fully-featured
state tracking feature in a subsequent version.
</p>
</div>
<h4>Round-trip ad-hoc animation</h4>
<p>
When performing DOM manipulation, it is often useful to attach
animation to an element in such a form that it can be serialized for
later playback and editing.
</p>
<p>
For example, a presentation authoring tool allows a user to select
items on a slide and tween their various properties at different times
or in response to events such as mouse clicks.
This could be achieved by annotating the element in question with
a child element as follows:
</p>
<pre class='example sh_html'>
<image>
<animate begin="3s" dur="1s" attributeName="opacity" to="1" fill="forwards"/>
</image>
</pre>
<p>
In many cases, such an approach is easier to generate and re-parse
than doing so with stylesheet animation:
</p>
<pre class='example sh_html'>
<image>
<style scoped>
image {
animation: fadeIn 1s 3s forwards;
}
@keyframes fadeIn {
to {
opacity: 1.0;
}
}
</style>
</image>
</pre>
<h4>Frame-based animation</h4>
<p>
Rather than smoothly tweening values, sometimes it is desirable to
overlay a series of independent images in quick succession.
</p>
<p>
For example, a children's workshop teaching animation principles
allows children to draw a series of similar images and then show and
hide them in turn creating the illusion of movement.
</p>
<p>
Supposing each drawn image is contained in an SVG
<code><g></code> element, the animation could be produced as
follows:
</p>
<pre class='example sh_html'>
<!-- Graphical content -->
<g class="frame" visibility="hidden">…</g>
<g class="frame" visibility="hidden">…</g>
<g class="frame" visibility="hidden">…</g>
<g class="frame" visibility="hidden">…</g>
<!-- Timing -->
<seq repeatCount="indefinite">
<set select=".frame" dur="0.2s" attributeName="visibility" to="visible"/>
</seq>
</pre>
<h4>Animated user interface widgets</h4>
<p>
User interface widgets are often accompanied by animated effects that
provides affordances to the user.
These effects should be defined in a manner that allows re-use across
a variety of similar widgets.
</p>
<p>
For example, following is a re-usable definition of mouse hover
effects applied to some content representing a button.
</p>
<pre class='example sh_html'>
<!-- A button-like object -->
<g role="button">
<rect … />
<text filter="child">
<filter … />…<feGaussianBlur … /></filter>
Button label
</text>
</g>
<!-- A complex mouseover effect -->
<par select="g[role=button]" begin="mouseover" end="mouseout">
<!-- Tween background color of button -->
<animate select="rect" attributeName="fill" to="blue" dur="0.3s" fill="forwards"/>
<seq>
<!-- Wiggle text to the side -->
<animate select="text" attributeName="transform" dur="0.3s"
additive="sum" values="translate(0); translate(-10); translate(0)"/>
<!-- Then make it glow by tweaking part of the filter -->
<animate select="feGaussianBlur" attributeName="stdDeviation"
from="0" to="2" fill="forwards" dur="0.3s"/>
</seq>
</par>
<!-- Fade out button background on mouseout -->
<par select="g[role=button]" begin="mouseout" end="mouseover; indefinite">
<animate select="rect" begin="mouseout" attributeName="fill"
to="navy" dur="0.3s" fill="forwards"/>
<set select="feGaussianBlur" attributeName="stdDeviation" to="0"/>
</par>
</pre>
<div class="annotation">
This use case would also benefit from the custom reversing suggested
for timesheets / interactive comics.
</div>
</section>
<section>
<h2>Relationship to SVG 1.1 Animation</h2>
<p>
This specification is intended to be backwards-compatible with the
animation features defined in SVG 1.1 Second Edition [[SVG11]] with
the following exceptions:
</p>
<ul>
<li>The special behavior of a frozen to-animation has been altered to
follow the regular behavior of the model since no user agent
implemented the specified behavior.
<li>The procedure for resolving syncbase dependencies and particularly
breaking cyclic dependencies has been rewritten in a manner that
may produce slight variations in some circumstances.
This was done because the previous definition was incredibly vague
and as a result was implemented inconsistently in every user
agent.
<li>The <span class="elem">animateColor</span> element has been
removed since it was deprecated in SVG 1.1.
</ul>
<p>
The following features defined in SVG 1.1 have been deprecated in this
specification:
</p>
<ul>
<li>The <span class="elem">animateTransform</span> element.
This is because the <span class="elem">animate</span> element is
now able to animate transform lists which produces more
predictable behavior that avoids many of the issues surrounding
<span class="elem">animateTransform</span>.
</ul>
<p>
The following additional features not present in SVG 1.1 have been
added to this specification:
</p>
<ul>
<li>All features are now defined in terms of the Web Animations
[[WEBANIMATIONS]] model providing a consistent foundation for
applications also using CSS-based animations or the Web Animations
API.
This also makes it possible for the author to programmatically
inspect and modify the animations generated by the markup defined
in this specification.
<li>The <span class="elem">par</span> and
<span class="elem">seq</span> elements have been introduced to
provide more powerful synchronization behavior that avoids many of
the problems associated with syncbase timing such as being unable
to cancel a chain of animations or seek a document in constant
time.
These elements also facilitate re-use of complex animation
definitions.
<li>Animation elements now include the <span
class="attr">select</span> attribute for targetting a range of
elements making animations re-useable
(see <a
href="#attributes-to-identify-the-target-elements-for-a-timed-element"
class="sectionRef"></a>).
<li>The <span class="attr">href</span> attribute no longer requires
the XLink namespace in keeping with changes made in SVG 2.0
(see <a
href="#attributes-to-identify-the-target-elements-for-a-timed-element"
class="sectionRef"></a>).
<li>The <span class="attr">cancel</span> attribute has been added to
completely remove an animation or a group of animations including
fill effects when its conditions are met.
<li>The <span class="attr">reverse</span> attribute has been added to
specify conditions that cause and animation or a group of
animations to change direction.
<li>The <span class="attr">repeatStart</span> attribute has been added
to allow starting an animation part-way through its interval.
<li>The <span class="attr">playback-rate</span> attribute has been
added to control the playback rate of animations and groups
including reversing them.
<li>The <span class="attr">direction</span> attribute has been added
to allow controlling the direction of alternate iterations of
animations and groups.
<li>The <span class="attr">easing</span> and <span
class="attr">easing-times</span> attributes have been added to
allow specifying easing behavior using a common syntax to CSS and
Web Animations including the ability to specify step timing
functions.
<li>The <span class="attr">fill</span> attribute has been extended to
support the ‘backwards’, ‘both’, and
‘auto’ values.
<li>The <span class="elem">discard</span> element has been added so
that long-running animations can manually remove no-longer needed
resources and provide more performant playback, particularly on
resource-constrained devices.
<li>The <span class="attr">timelineStart</span> attribute has been
added to allow starting animations prior to the document load
event such as “spinner” and progress-bar animations
shown during page load.
<li>The <code>beginElement</code> and <code>beginElementAt</code>
methods have been extended to allow applying an animation
definition to an arbitrary target element or in an arbitrary
context (for example, another document;
see <a href="#timed-element-interfaces" class="sectionRef"></a>).
</ul>
<div class="todo">
Link the above to the appropriate sections once they have been
written.
</div>
<div class="todo">
Add support for Web Animations custom effects—perhaps through
a <code>sample</code> event dispatched to animation elements, or
perhaps only those that don't specify any <a>target elements</a>.
</div>
</section>
<section>
<h2>Relationship to SMIL Animation</h2>
<p>
To the extent that this specification is backwards-compatible with SVG
1.1's animation features, most of which are defined in terms of SMIL
Animation [[SMIL-ANIMATION]], this specification defines many features
similar to those defined in SMIL Animation.
However, since such features are fully-defined either in this
specification or in Web Animations [[!WEBANIMATIONS]], this
specification does not make any normative reference to SMIL Animation.
</p>
</section>
<section>
<h2>Relationship to Web Animations</h2>
<p>
Many of the features defined in this specification are defined in
terms of the Web Animations [[!WEBANIMATIONS]] model which serves as
a normative reference for this specification.
</p>
</section>
</section>
<section>
<h2>Timed elements</h2>
<p>
This specification defines a number of elements that share common timing
behavior referred to as <dfn title="timed element">timed elements</dfn>.
The common timing features of timed elements are described first
followed by the specific elements.
</p>
<section class="informative">
<h2>Introduction</h2>
<p>
The <a>timed elements</a> defined by Animation Elements act as
templates for creating animations and timing groups as defined by
[[!WEBANIMATIONS]].
</p>
<p>
The relationship between <a>timed elements</a> and Web Animations'
timed items is one-to-many since:
</p>
<ul>
<li>multiple elements may be targetted (for example,
<code>select="div.warning"</code>),
<li>animation triggers may match multiple times (for example,
<code>begin="2s; 5s; click"</code>),
<li>automatically-generated reverse effects are realized by separate
timed items (for example <code>reverse="mouseout"</code>), and
<li>a timed element can be applied to an arbitrary target using the
<code>beginElement</code> and <code>beginElementAt</code> methods
which will generate further timed items.
</ul>
<p class="todo">
Example and diagram
</p>
</section>
<section>
<h2>Timed element hierarchies</h2>
<p>
<a>Timing group elements</a> can contain other <a>timed elements</a>
to produce hierarchical tree structures.
Such structures can be described using the following definitions:
</p>
<dl>
<dt><dfn>parent timed element</dfn></dt>
<dd>
For a given <a>timed element</a> <var>A</var>, the first <a>timed
element</a>, if any, encountered when traversing the list of <a
href="http://www.w3.org/TR/dom/#concept-tree-ancestor">ancestor
elements</a> [[!DOM4]] beginning with the <a
href="http://www.w3.org/TR/dom/#concept-tree-parent">parent</a>
[[!DOM4]] of <var>A</var> and without leaving the current <a
href="http://www.w3.org/TR/SVG2/intro.html#TermSVGContext">SVG
context</a> [[!SVG2]].
</dd>
<dt><dfn>child timed element</dfn></dt>
<dd>
A <a>timed element</a> whose <a>parent timing group</a> is this
<a>timed element</a>.
</dd>
<dt><dfn>root timed element</dfn></dt>
<dd>
A <a>timed element</a> with no <a>parent timed element</a>.
</dd>
</dl>
</section>
<section>
<h2>Namespace</h2>
<p>
The <a>timed elements</a> defined in this specification belong to the
SVG namespace as defined in [[!SVG11]].
</p>
<div class="issue">
<p>If SVG2 allows SVG elements to exist outside the SVG namespace then
we will reflect that here as well.</p>
<p>Furthermore, SVG2 aside, it may be worth investigating allowing
these elements directly in HTML.</p>
</div>
</section>
<section>
<h2>Attributes to identify the target elements for a timed element</h2>
<p>
Each <a>timed element</a> may specify a set of <dfn>target
elements</dfn> which are used to determine:
</p>
<ul>
<li>which <a
href="http://www.w3.org/TR/web-animations/#dfn-target-element">timed items</a> to generate for a given <a>context
node</a>,
<li>the scopes in which the <a>target elements</a> of <a>child
timed elements</a> are resolved, and
<li>the <a
href="http://www.w3.org/TR/web-animations/#dfn-target-element">target
elements</a> of the <a
href="http://www.w3.org/TR/web-animations/#dfn-animation">animations</a>
generated by <a>animation elements</a>.
</ul>
<p class="annotation">
When we add media reference elements, the <a>target elements</a> will
be used to establish the source media element when not explicitly set.
</p>
<p>
Each element in the list of <a>target elements</a> may have an
associated <dfn>context element</dfn> which represents the scope in
which the reference to the target element was resolved.
Each pair of a target element and optional <a>context element</a> is
unique within the list of <a>target elements</a>.
</p>
<p>
The following attributes are the <dfn>target element attributes</dfn>
which specify the <a>target elements</a> for a <a>timed element</a>.
</p>
<p><em>Attribute definitions:</em></p>
<table class="propdef attrdef">
<thead>
<tr>
<th>Name
<th>Value
<th>Lacuna value
<th>Animatable
<tbody>
<tr>
<td><span class="attr">select</span>
<td><a
href="http://www.w3.org/TR/selectors4/#selector-list"><selector-list></a>
<td>(none)
<td>No
<tbody>
<tr>
<td><span class="attr">href</span>
<td>local IRI
<td>(none)
<td>No
<tr>
<td><span class="attr">xlink:href</span>
<td>local IRI
<td>(none)
<td>No
</table>
<p>
A <a>timed element</a> where one or more of the <a>target element
attributes</a> is specified is said to have a <dfn>specified
target</dfn>.
The list of <a>target elements</a> of a <a>timed element</a> without
a <a>specified target</a> is an empty list.
</p>
<p>
If more than one of the <a>target element attributes</a> is specified
then the attribute with the highest precedence is used even if its
value is empty or invalid; the other attributes are ignored.
<span class="attr">select</span> has the highest precedence followed
by <span class="attr">href</span> then <span
class="attr">xlink:href</span>.
</p>
<p>
A set of <a>target elements</a> is resolved with reference to a given
<dfn>context node</dfn> which may be either an <a
href="http://www.w3.org/TR/dom/#concept-element">element</a> or
a <a
href="http://www.w3.org/TR/dom/#concept-document">document</a>.
</p>
<p>
The <span class="attr">href</span> and <span
class="attr">xlink:href</span> attributes specify an element
belonging to the same document as the <a>context node</a>'s <a
href="http://www.w3.org/TR/dom/#concept-node-document">node
document</a>.
The syntax is that of a fragment identifier including the leading hash
(#, U+0023) but <em>without</em> an absolute IRI or relative IRI as
defined by [[!IRI]]. For example, <code>#button12</code>.
The fragment identifier is interpreted as an ID reference which is
resolved using the same definition for <a
href="http://www.w3.org/TR/dom/#dom-document-getelementbyid">getElementById</a>
from [[!DOM4]] with the <a>context node</a> as the <var>context
object</var>.
If no element matches the ID reference or it is malformed, the
resulting set of <a>target elements</a> is an empty list.
</p>
<p>
The <span class="attr">select</span> attribute specifies a CSS <a
href="http://www.w3.org/TR/selectors4/#selector-list">selector
list</a> [[!SELECTORS4]] that is matched against the subtree beginning
with the <a>context node</a> using the same procedure as for <a
href="http://www.w3.org/TR/selectors-api2/#queryselectorall">querySelectorAll</a>
[[!SELECTORS-API2]].
If no element matches or the selector list is malformed, the
resulting set of <a>target elements</a> is an empty list.
</p>
<p class="todo">
<span class="attr">select</span> should match content inside
a seamless iframe
</p>
<p class="todo">
Describe how to handle changes to what is selected (including an
iframe becoming seamless or not).
</p>
<p class="todo">
Describe how to handle dynamic changes to the attributes.
</p>
<section>
<h3>Generating new instances</h3>
<p>
<dfn title="generate new instances">New instance are
generated</dfn> for a given <a>timed element</a>, <var>current
element</var>, and either:
</p>
<ul>
<li>a <a>context node</a>, <var>current context</var>, or
<li>a <a>target element</a>, <var>initial target</var>,
</ul>
<p>using the following procedure.</p>
<ol>
<li>Initialize the list of <var>target elements</var> based on the
first matching condition from the following:
<dl class="switch">
<dt>If an <var>initial target</var> is provided,</dt>
<dd>
Let <var>target elements</var> be a list consisting of
a single element, <var>initial target</var>.
</dd>
<dt>If <var>element</var> has a <a>specified target</a>,</dt>
<dd>
Let <var>target elements</var> be the result of evaluating the
<var>current element</var>'s <a>target element attributes</a>
as defined in <a
href="#attributes-to-identify-the-target-elements-for-a-timed-element"
class="sectionRef"></a> using <var>current context</var> as
the <a>context node</a>.
</dd>
<dt>Otherwise,</dt>
<dd>
Let <var>target elements</var> be a list consisting of
a single element, <var>current context</var>.
</dd>
</dl>
<li>Let <var>generated items</var> be an empty list.
<li>For each element, <var>current target</var>, in <var>target
elements</var>:
<ol>
<li>Let <var>current item</var> be the result of generating a
timed item for the specific type of <var>current
element</var> as defined in <a
href="#generating-an-instance-of-an-animation-element"
class="sectionRef"></a> <span class="todo">and so on (TBD:
add specific references here to other sections as they are
added).</span>
The <a>context node</a> to be passed in each case is
<var>current target</var>.
<li>If <var>current element</var> is a <a>group timing
element</var>, then for each <a>child timed item</a>,
<var>current child</var> of <var>current element</var>
perform the following steps:
<ol>
<li>Recursively apply this procedure (i.e. <a
href="#generating-new-instances"
class="sectionRef"></a> with <var>current child</var> as
the <a>context node</a>.
<li>Append the resulting list of timed items to
<var>current item</var>'s list of <a
href="http://www.w3.org/TR/web-animations/#dfn-child-timed-item">child
timed items</a>.
</ol>
<li>Append <var>current item</var> to <var>generated
items</var>.
</ol>
<li>Return <var>generated items</var>.
</ol>
<p class="todo">
Make a section about interval handling where we say that when the
conditions match, we call the above procedure using the <a
href="http://www.w3.org/TR/dom/#concept-node-document">node
document</a> of the <a>timed element</a> as the <a>context node</a>.
For external timesheets we'll need to override it.
</p>
</section>
</section>
<section>
<h2>Attributes to control the triggering of timed elements</h2>
<section>
<h3>The <span class="attr">begin</span> attribute</h3>
<p class="todo">
TBD.<br>
Need to define that this is ignored in template-contexts. It's
treated as if it was indefinite.
</p>
</section>
</section>
<section>
<h2>Attributes to control timing</h2>
</section>
<section>
<h2>Timed element interfaces</h2>
<dl title="interface TimedElement" class="idl">
<dt>sequence<TimedItem> beginElement(optional BeginElementOptions options)</dt>
<dd>
<p>
<a title="generate new instances">Generates new instances</a> from
this timed element.
</p>
<p>
The <var>target element</var> or <var>context node</var> is based
on the first matching condition from below:
</p>
<dl class="switch">
<dt>If <code>options</code> and <code>options.target</code> are
not <code>null</code>,</dt>
<dd>Use <code>options.target</code> as the <var>target
element</var>.</dd>
<dt>If <code>options</code> and <code>options.context</code> are
not <code>null</code>,</dt>
<dd>Use <code>options.context</code> as the <var>context
node</var>.</dd>
<dt>Otherwise,</dt>
<dd>Use the <a
href="http://www.w3.org/TR/dom/#concept-node-document">node
document</a> of this element as the <var>context
node</var>.</dd>
</dl>
<p>
The return value is the set of generated timed items as returned
by <a href="#generating-new-instances" class="sectionRef"></a>.
</p>
</dd>
<dt>sequence<TimedItem> beginElementAt(float offset,
optional BeginElementOptions options)</dt>
<dd>
<p class="todo">
TBD.
</p>
</dd>
</dl>
<dl title="dictionary BeginElementOptions" class="idl">
<dt>Element? target = null</dt>
<dd>
</dd>
<dt>(Element or Document)? context = null</dt>
<dd>
</dd>
<dt>BeginElementAtReferenceTime since = "now"</dt>
<dd>
</dd>
</dl>
<p class="issue">
Add <code>sequence<Element>? targets = null</code> as well?
</p>
<dl title="enum BeginElementAtReferenceTime" class="idl">
<dt>now</dt>
<dd>
</dd>
<dt>start</dt>
<dd>
</dd>
</dl>
</section>
<section>
<h2>Animation elements</h2>
<section>
<h2>Attributes to identify the target attribute or property for an
animation</h2>
</section>
<section>
<h2>Attributes that define animation values over time</h2>
</section>
<section>
<h2>Attributes that control whether animations are additive</h2>
</section>
<section>
<h2>Elements, attributes and properties that can be animated</h2>
</section>
<section>
<h2>Generating an instance of an animation element</h2>
<p>
<a>Animation elements</a> generate <a
href="http://www.w3.org/TR/web-animations/#dfn-animation">animations</a>.
</p>
<p>
The <a
href="http://www.w3.org/TR/web-animations/#dfn-target-element">target
element</a> of the generated animation is the <a>context node</a>
provided when the animation was generated, provided it is an <a
href="http://www.w3.org/TR/dom/#concept-element">element</a>.
If the <a>context node</a> is a <a
href="http://www.w3.org/TR/dom/#concept-document">document</a> the
target element is the parent element of the <a>animation
element</a>'s <a>root timed element</a>.
</p>
<p class="issue">
What if the <a>root timed element</a> is not in the same document as
the context node?
Generate the animation with no target element? Abort?
</p>
</section>
<section>
<h2>The <span class="elem">animate</span> element</h2>
</section>
<section>
<h2>The <span class="elem">set</span> element</h2>
</section>
<section>
<h2>The <span class="elem">animateMotion</span> element</h2>
</section>
</section>
<section>
<h2>Timing group elements</h2>
<section>
<h2>The <span class="elem">par</span> element</h2>
</section>
<section>
<h2>The <span class="elem">seq</span> element</h2>
</section>
</section>
<section>
<h2>Structural elements</h2>
<section>
<h2>The <span class="elem">discard</span> element</h2>
</section>
</section>
<section>
<h2>Deprecated elements</h2>
<section>
<h2>The <span class="elem">animateTransform</span> element</h2>
</section>
</section>
</section>
<section>
<h2>Integration with SVG</h2>
<section>
<h2>Start of the timeline</h2>
</section>
<section>
<h2>The <span class="elem">svg</span> element</h2>
</section>
<section>
<h2>Reclaiming resources</h2>
</section>
<section>
<h2>Animations in elements referenced by a
<span class="elem">use</span> element</h2>
<p class="issue">
Can you have <span class="elem">use</span> elements inside
a <span class="elem">par</span> or <span class="elem">seq</span> that
pull in other animation elements?
</p>
<p class="issue">
What is the behavior in general?
</p>
</section>
<section>
<h2>Integration with Media Fragments</h2>
<p>
The Media Fragments specification [[!MEDIA-FRAGMENTS]] defines a means
for addressing a temporal range of a media resource.
The application of the temporal parameters to documents with the <a
href="http://www.w3.org/TR/SVG/intro.html#MIMEType">SVG MIME type</a>
[[!SVG11] is as follows.
</p>
<ul>
<li>If there is a begin time, seek the document controller to
the begin time at the earliest of two moments: when the document
begins to play or document load.
<p class="note">
Note that seeking behavior is well-defined even when the
document has yet to start.
</p>
</li>
<li>If there is an end time, set a flag on the controller to say
auto-pause at the given time.</li>
<li>Any calls to seek / pause / play etc. on that controller clear the
flag.</li>
<li>If the controller reaches (or passes) the end time and the flag is
still set, call pause and clear the flag.</li>
</ul>
<p class="todo">
What happens if the fragment is changed after the document has loaded
</p>
<p class="note">
Note that media fragments are defined to operate on resources based on
their MIME type.
As a result, temporal addressing may not have any effect for SVG
content that is served in a document with a MIME type other than the
SVG MIME type such as SVG embedded in HTML.
</p>
</section>
</section>
<section>
<h2>Resources in other documents</h2>
<div class="todo">
<p>
Need to define the document time used when:
</p>
<ul>
<li>You have an animation element in a separate
document—presumably you should use the document time of the
target elements.</li>
<li>What if you put a filter in a separate document and then pull it
in?</li>
<li>Likewise for clip paths, images referenced by image, iframe, use
etc.</li>
</ul>
</div>
</section>
<section>
<h2>DOM interfaces</h2>
<section>
<h2>The <code>TimedElement</code> interface</h2>
<p>
<dl title="interface TimedElement : Element" class="idl">
</dl>
</p>
<div class="issue">
<p>
Need to add <code>ownerSVGElement</code> from
<code>SVGElement</code> interface?
</p>
<p>
Add other attributes from <code>SVGElement</code> for backwards
compatibility?
</p>
</div>
</section>
<section>
<h2>The <code>AnimationElement</code> interface</h2>
<p>
<dl title="interface AnimationElement : TimedElement" class="idl">
</dl>
</p>
</section>
<section>
<h2>Reflecting changes to the DOM</h2>
</section>
</section>
</body>
</html>