Skip to content

Commit 0d6f12d

Browse files
birtlesbirtles
committed
[css-animations-2] Define event dispatch with regards to seeking
1 parent 890774e commit 0d6f12d

File tree

2 files changed

+121
-0
lines changed

2 files changed

+121
-0
lines changed

‎css-animations-2/Overview.bs

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,14 @@ urlPrefix: https://w3c.github.io/web-animations/; type: method; for: Animation;
3333
text: play()
3434
text: pause()
3535
urlPrefix: https://w3c.github.io/web-animations/; type: dfn; spec: web-animations
36+
text: animation playback rate
37+
text: current iteration
3638
text: current time
39+
text: idle play state
3740
text: pause an animation
3841
text: play an animation
42+
text: sampling
43+
text: start delay
3944
text: target element
4045
text: target effect
4146
text: target effect end
@@ -217,3 +222,49 @@ The <em>additional</em> types of animation events that can occur are:
217222
</ul>
218223
</dl>
219224
225+
## Event dispatch ## {#event-dispatch}
226+
227+
Note, this is a more general description of event dispatch than that of CSS
228+
Animations Level 1 [[CSS3-ANIMATIONS]] since it must account for the
229+
possibility of animations being seeked using the Web Animations API
230+
[[WEB-ANIMATIONS]].
231+
232+
For the purpose of determining which events to dispatch, an animation can
233+
be considered to be in one of four mutually-exclusive <dfn
234+
lt="event state">event states</dfn> determined using the following procedure:
235+
236+
1. If the animation is <a lt="idle play state">idle</a> or has no <a>target
237+
effect</a> it is <dfn>idle</dfn>.
238+
1. Otherwise, if the animation has a <a>current time</a> less than the
239+
<a>start delay</a> of its <a>target effect</a>, or, if the animation's
240+
<a lt="animation playback rate">playback rate</a> is less than zero and
241+
it has a <a>current time</a> less than <em>or equal</em> to the
242+
<a>start delay</a> of its <a>target effect</a>, it is
243+
<dfn>left-active</dfn>.
244+
1. Otherwise, if the animation has a <a>current time</a> greater than its
245+
<a>target effect end</a>, or, if the animation's
246+
<a lt="animation playback rate">playback rate</a> is greater than or equal
247+
to zero and it has a <a>current time</a> greater than <em>or equal</em> to
248+
its <a>target effect end</a>, it is <dfn>right-active</dfn>.
249+
1. Otherwise, it is <dfn>active</dfn>.
250+
251+
Each time the animation is <a lt="sampling">sampled</a>, the events to
252+
dispatch are determined by comparing the <a>event state</a> before and
253+
after the sample as follows:
254+
255+
: not <a>active</a> &rarr; <a>active</a>
256+
:: <a idl>animationstart</a>
257+
: <a>left-active</a> &rarr; <a>right-active</a>
258+
: <a>right-active</a> &rarr; <a>left-active</a>
259+
:: <a idl>animationstart</a>, <a idl>animationend</a>
260+
: <a>active</a> &rarr; <a>left-active</a>
261+
: <a>active</a> &rarr; <a>right-active</a>
262+
:: <a idl>animationend</a>
263+
: <a>active</a> &rarr; <a>active</a>
264+
:: <a idl>animationiteration</a> <em>if</em> there has been a change to the
265+
<a>current iteration</a> of the animation's <a>target effect</a>.
266+
: not <a>idle</a> &rarr; <a>idle</a>
267+
:: <a idl>animationcancel</a>
268+
269+
Issue: Define the value of <code>elapsedTime</code> for each case.
270+

‎css-animations-2/Overview.html

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@ <h2 class="no-num no-toc no-ref heading settled" id="contents"><span class="cont
140140
<a href="#events"><span class="secno">4</span> <span class="content">Animation Events</span></a>
141141
<ul class="toc">
142142
<li><a href="#event-animationevent"><span class="secno">4.1</span> <span class="content">Types of <code>AnimationEvent</code></span></a>
143+
<li><a href="#event-dispatch"><span class="secno">4.2</span> <span class="content">Event dispatch</span></a>
143144
</ul>
144145
<li>
145146
<a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
@@ -161,6 +162,7 @@ <h2 class="no-num no-toc no-ref heading settled" id="contents"><span class="cont
161162
<ul class="toc">
162163
<li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
163164
</ul>
165+
<li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
164166
</ul>
165167
</div>
166168
<main>
@@ -293,6 +295,56 @@ <h3 class="heading settled" data-level="4.1" id="event-animationevent"><span cla
293295
<li>Context Info: animationName, elapsedTime, pseudoElement
294296
</ul>
295297
</dl>
298+
<h3 class="heading settled" data-level="4.2" id="event-dispatch"><span class="secno">4.2. </span><span class="content">Event dispatch</span><a class="self-link" href="#event-dispatch"></a></h3>
299+
<p class="note" role="note">Note, this is a more general description of event dispatch than that of CSS
300+
Animations Level 1 <a data-link-type="biblio" href="#biblio-css3-animations">[CSS3-ANIMATIONS]</a> since it must account for the
301+
possibility of animations being seeked using the Web Animations API <a data-link-type="biblio" href="#biblio-web-animations">[WEB-ANIMATIONS]</a>.</p>
302+
<p>For the purpose of determining which events to dispatch, an animation can
303+
be considered to be in one of four mutually-exclusive <dfn data-dfn-type="dfn" data-lt="event state" data-noexport="" id="event-state">event states<a class="self-link" href="#event-state"></a></dfn> determined using the following procedure:</p>
304+
<ol>
305+
<li data-md="">
306+
<p>If the animation is <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#idle-play-state">idle</a> or has no <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#target-effect">target
307+
effect</a> it is <dfn data-dfn-type="dfn" data-noexport="" id="idle">idle<a class="self-link" href="#idle"></a></dfn>.</p>
308+
<li data-md="">
309+
<p>Otherwise, if the animation has a <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#current-time">current time</a> less than the <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#start-delay">start delay</a> of its <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#target-effect">target effect</a>, or, if the animation’s <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#animation-playback-rate">playback rate</a> is less than zero and
310+
it has a <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#current-time">current time</a> less than <em>or equal</em> to the <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#start-delay">start delay</a> of its <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#target-effect">target effect</a>, it is <dfn data-dfn-type="dfn" data-noexport="" id="left-active">left-active<a class="self-link" href="#left-active"></a></dfn>.</p>
311+
<li data-md="">
312+
<p>Otherwise, if the animation has a <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#current-time">current time</a> greater than its <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#target-effect-end">target effect end</a>, or, if the animation’s <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#animation-playback-rate">playback rate</a> is greater than or equal
313+
to zero and it has a <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#current-time">current time</a> greater than <em>or equal</em> to
314+
its <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#target-effect-end">target effect end</a>, it is <dfn data-dfn-type="dfn" data-noexport="" id="right-active">right-active<a class="self-link" href="#right-active"></a></dfn>.</p>
315+
<li data-md="">
316+
<p>Otherwise, it is <dfn data-dfn-type="dfn" data-noexport="" id="active">active<a class="self-link" href="#active"></a></dfn>.</p>
317+
</ol>
318+
<p>Each time the animation is <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#sampling">sampled</a>, the events to
319+
dispatch are determined by comparing the <a data-link-type="dfn" href="#event-state">event state</a> before and
320+
after the sample as follows:</p>
321+
<dl>
322+
<dt data-md="">
323+
<p>not <a data-link-type="dfn" href="#active">active</a> → <a data-link-type="dfn" href="#active">active</a></p>
324+
<dd data-md="">
325+
<p><a data-link-type="idl" href="https://drafts.csswg.org/css-animations-1/#dom-animationevent-animationstart">animationstart</a></p>
326+
<dt data-md="">
327+
<p><a data-link-type="dfn" href="#left-active">left-active</a> → <a data-link-type="dfn" href="#right-active">right-active</a></p>
328+
<dt data-md="">
329+
<p><a data-link-type="dfn" href="#right-active">right-active</a> → <a data-link-type="dfn" href="#left-active">left-active</a></p>
330+
<dd data-md="">
331+
<p><a data-link-type="idl" href="https://drafts.csswg.org/css-animations-1/#dom-animationevent-animationstart">animationstart</a>, <a data-link-type="idl" href="https://drafts.csswg.org/css-animations-1/#dom-animationevent-animationend">animationend</a></p>
332+
<dt data-md="">
333+
<p><a data-link-type="dfn" href="#active">active</a> → <a data-link-type="dfn" href="#left-active">left-active</a></p>
334+
<dt data-md="">
335+
<p><a data-link-type="dfn" href="#active">active</a> → <a data-link-type="dfn" href="#right-active">right-active</a></p>
336+
<dd data-md="">
337+
<p><a data-link-type="idl" href="https://drafts.csswg.org/css-animations-1/#dom-animationevent-animationend">animationend</a></p>
338+
<dt data-md="">
339+
<p><a data-link-type="dfn" href="#active">active</a> → <a data-link-type="dfn" href="#active">active</a></p>
340+
<dd data-md="">
341+
<p><a data-link-type="idl" href="https://drafts.csswg.org/css-animations-1/#dom-animationevent-animationiteration">animationiteration</a> <em>if</em> there has been a change to the <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#current-iteration">current iteration</a> of the animation’s <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#target-effect">target effect</a>.</p>
342+
<dt data-md="">
343+
<p>not <a data-link-type="dfn" href="#idle">idle</a> → <a data-link-type="dfn" href="#idle">idle</a></p>
344+
<dd data-md="">
345+
<p><a data-link-type="idl" href="#dom-animationevent-animationcancel">animationcancel</a></p>
346+
</dl>
347+
<p class="issue" id="issue-7ee97385"><a class="self-link" href="#issue-7ee97385"></a> Define the value of <code>elapsedTime</code> for each case.</p>
296348
</main>
297349
<h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
298350
<h3 class="no-ref heading settled" id="conventions"><span class="content"> Document conventions</span><a class="self-link" href="#conventions"></a></h3>
@@ -386,8 +438,13 @@ <h3 class="no-ref heading settled" id="testing"><span class="content"> Non-exper
386438
<h2 class="no-num heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
387439
<h3 class="no-num heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
388440
<ul class="indexlist">
441+
<li><a href="#active">active</a><span>, in §4.2</span>
389442
<li><a href="#dom-animationevent-animationcancel">animationcancel</a><span>, in §4.1</span>
443+
<li><a href="#event-state">event state</a><span>, in §4.2</span>
444+
<li><a href="#idle">idle</a><span>, in §4.2</span>
445+
<li><a href="#left-active">left-active</a><span>, in §4.2</span>
390446
<li><a href="#owning-element">owning element</a><span>, in §2.1</span>
447+
<li><a href="#right-active">right-active</a><span>, in §4.2</span>
391448
</ul>
392449
<h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
393450
<ul class="indexlist">
@@ -397,17 +454,26 @@ <h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="con
397454
<li><a href="https://drafts.csswg.org/css-animations-1/#propdef-animation-name">animation-name</a>
398455
<li><a href="https://drafts.csswg.org/css-animations-1/#propdef-animation-play-state">animation-play-state</a>
399456
<li><a href="https://drafts.csswg.org/css-animations-1/#dom-animationevent-animationend">animationend</a>
457+
<li><a href="https://drafts.csswg.org/css-animations-1/#dom-animationevent-animationiteration">animationiteration</a>
458+
<li><a href="https://drafts.csswg.org/css-animations-1/#dom-animationevent-animationstart">animationstart</a>
400459
<li><a href="https://drafts.csswg.org/css-animations-1/#valdef-animation-play-state-paused">paused</a>
401460
<li><a href="https://drafts.csswg.org/css-animations-1/#valdef-animation-play-state-running">running</a>
402461
</ul>
403462
<li>
404463
<a data-link-type="biblio" href="#biblio-web-animations">[web-animations]</a> defines the following terms:
405464
<ul>
465+
<li><a href="https://w3c.github.io/web-animations/#animation-playback-rate">animation playback rate</a>
466+
<li><a href="https://w3c.github.io/web-animations/#current-iteration">current iteration</a>
467+
<li><a href="https://w3c.github.io/web-animations/#current-time">current time</a>
468+
<li><a href="https://w3c.github.io/web-animations/#idle-play-state">idle play state</a>
406469
<li><a href="https://w3c.github.io/web-animations/#pause-an-animation">pause an animation</a>
407470
<li><a href="https://w3c.github.io/web-animations/#pause">pause()</a>
408471
<li><a href="https://w3c.github.io/web-animations/#play-an-animation">play an animation</a>
409472
<li><a href="https://w3c.github.io/web-animations/#play">play()</a>
473+
<li><a href="https://w3c.github.io/web-animations/#sampling">sampling</a>
474+
<li><a href="https://w3c.github.io/web-animations/#start-delay">start delay</a>
410475
<li><a href="https://w3c.github.io/web-animations/#target-effect">target effect</a>
476+
<li><a href="https://w3c.github.io/web-animations/#target-effect-end">target effect end</a>
411477
<li><a href="https://w3c.github.io/web-animations/#target-element">target element</a>
412478
</ul>
413479
</ul>
@@ -423,5 +489,9 @@ <h3 class="no-num heading settled" id="normative"><span class="content">Normativ
423489
<dt id="biblio-web-animations"><a class="self-link" href="#biblio-web-animations"></a>[WEB-ANIMATIONS]
424490
<dd>Brian Birtles; et al. <a href="http://www.w3.org/TR/web-animations-1/">Web Animations</a>. 7 July 2015. WD. URL: <a href="http://www.w3.org/TR/web-animations-1/">http://www.w3.org/TR/web-animations-1/</a>
425491
</dl>
492+
<h2 class="no-num heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
493+
<div style="counter-reset:issue">
494+
<div class="issue"> Define the value of <code>elapsedTime</code> for each case.<a href="#issue-7ee97385"> ↵ </a></div>
495+
</div>
426496
</body>
427497
</html>

0 commit comments

Comments
 (0)