Skip to content

[web-animations-1] Add hold phase to animation #4325 #5479

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
+569 −26
Open

[web-animations-1] Add hold phase to animation #4325 #5479

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5581f2d
Added hold phase calculations to all places where hold time is also u…
Aug 26, 2020
01e9af7
Added conditions to the animation effect phase calculation to account…
Aug 26, 2020
f183cfe
Reworded explanation of current phase, reworded setting hold phase fr…
Sep 10, 2020
6885c21
Fixed a few spacing, punctuation, and grammar issues.
Sep 11, 2020
fad6e37
Adding back in condition for current phase that is needed when animat…
Sep 15, 2020
1ca8964
Moved changes to Web-Animations-2 from Web-Animations-1
Jan 5, 2021
d4d46a6
Fixed typo
Jan 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Reworded explanation of current phase, reworded setting hold phase fr… 
…om resolved to unset, fixed some formatting errors
  • Loading branch information
Jordan Taylor committed Jan 4, 2021
commit f183cfe1cfc9f56165ae698d922d1402ec0cadd3
66 changes: 35 additions & 31 deletions web-animations-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -817,10 +817,12 @@ which is used to fix the animation's output <a>time value</a>, called its
<a>current time</a>, in circumstances such as pausing.
The <a>hold time</a> is initially <a>unresolved</a>.

An <a>animation</a> also maintains a <dfn>hold phase</dfn> [=timeline phase=]
which is used to fix the animation's output [=timeline phase=], called its
<a>current phase</a>, in circumstances such as pausing.
The <a>hold phase</a> is initially <a>unresolved</a>.
In a addition to <a>hold time</a>, an <a>animation</a> maintains a
<dfn>hold phase</dfn> which is set along with the <a>hold time</a> to determine
the <a>current phase</a> of an <a>animation</a> with a fixed
<a>current time</a>. The <a>hold phase</a> has the same range of values as the
[=timeline phase=] and can be set or unset. The <a>hold phase</a> is initially
unset.
Copy link
Contributor

@birtles birtles Sep 11, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit for future reference as much as anything, in specs we try to use semantic line breaking where possible. This makes diffs smaller and easier to read.

There are a few articles about this like:
https://rhodesmill.org/brandon/2012/one-sentence-per-line/
https://ramshankar.org/blog/posts/2019/semantic-line-breaks/

We haven't done this very consistently in this spec so far, but going forward we should try to at least start each sentence on a new line (and preferably also after each comma, clause etc.).

Copy link
Contributor Author

@JTensai JTensai Sep 11, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will try to remember that going forward. Thanks!


In order to establish the relative ordering of conflicting <a>animations</a>,
animations are appended to a <dfn>global animation list</dfn> in the order
Expand All @@ -841,7 +843,7 @@ follows:
1. Let the <a>timeline</a> of <var>animation</var> be <var>new timeline</var>.
1. If the [=start time=] of <var>animation</var> is <a
lt=unresolved>resolved</a>, make <var>animation</var>'s <a>hold time</a>
and <a>hold phase</a> <a>unresolved</a>.
<a>unresolved</a> and make <a>hold phase</a> unset.

Note: This step ensures that the <a>finished play state</a> of
<var>animation</var> is not &ldquo;sticky&rdquo; but is re-evaluated
Expand Down Expand Up @@ -932,22 +934,22 @@ matching condition from below:

### The current phase of an animation ### {#the-current-phase-of-an-animation}

<a>Animations</a> provide a <a>timeline phase</a> to their <a>associated
effect</a> called the animation's <dfn>current phase</dfn>.
In addition to their <a>current time</a>, an <a>animation</a> also provides
their <a>associated effect</a> with a <dfn>current phase</dfn>. This is used in
determining the animations effect's phase in certain boundary conditions.

An <a>animation</a>'s <a>current phase</a> has the same range of values as the
[=timeline phase=].

The <a>current phase</a> is calculated from the first matching condition from
below:

<div class="switch">

: If the animation's <a>hold phase</a> is <a lt="unresolved">resolved</a>,
: If the animation's <a>hold phase</a> is set,
:: The <a>current phase</a> is the animation's <a>hold phase</a>.

: If <em>either</em> of the following are true:

1. the animation has no associated <a>timeline</a>, or
2. the animation's [=start time=] is <a>unresolved</a>.

: If the animation has no associated <a>timeline</a>:
:: The <a>current phase</a> is [=timeline inactive phase|inactive=].

: Otherwise,
Expand Down Expand Up @@ -991,7 +993,7 @@ an animation, <var>animation</var>, to <var>seek time</var> is as follows:

:: Set <var>animation</var>'s <a>hold time</a> to <var>seek time</var>
:: Set <var>animation</var>'s <a>hold phase</a> to
[=timeline active phase=].
[=timeline active phase|active=].

: Otherwise,
:: Set <var>animation</var>'s [=start time=] to the result of evaluating
Expand Down Expand Up @@ -1022,7 +1024,7 @@ The procedure to <dfn>set the current time</dfn> of an animation,
complete the pause operation by performing the following steps:
1. Set <var>animation</var>'s <a>hold time</a> to <var>seek time</var>.
1. Set <var>animation</var>'s <a>hold phase</a> to
[=timeline active phase=].
[=timeline active phase|active=].
1. [=Apply any pending playback rate=] to |animation|.
1. Make <var>animation</var>'s [=start time=] <a>unresolved</a>.
1. Cancel the <a>pending pause task</a>.
Expand All @@ -1046,7 +1048,7 @@ is as follows:

1. If <var>timeline time</var> is <a>unresolved</a> and <var>new start
time</var> is <a lt="unresolved">resolved</a>, make <var>animation</var>'s
<a>hold time</a> and <a>hold phase</a> both <a>unresolved</a>.
<a>hold time</a> <a>unresolved</a> and make <a>hold phase</a> unset.

<p class=note>
This preserves the invariant that when we don't have an active timeline it
Expand Down Expand Up @@ -1075,8 +1077,8 @@ is as follows:

: If <var>new start time</var> is <a lt="unresolved">resolved</a>,
:: If <var>animation</var>'s [=playback rate=] is not zero,
make <var>animation</var>'s <a>hold time</a> and <a>hold phase</a> both
<a>unresolved</a>.
make <var>animation</var>'s <a>hold time</a> <a>unresolved</a> and make
<a>hold phase</a> unset.

: Otherwise (<var>new start time</var> is <a>unresolved</a>),
:: Set <var>animation</var>'s <a>hold time</a> to <var>previous current
Expand Down Expand Up @@ -1231,11 +1233,13 @@ as CSS Animations [[CSS-ANIMATIONS-1]].

: If |has finite timeline| is true,
:: 1. Set <var>animation</var>'s <a>start time</a> to <var>seek time</var>.
1. Let |animation|'s [=hold time=] and [=hold phase=] be <a>unresolved</a>.
1. Let |animation|'s [=hold time=] be <a>unresolved</a> and
<a>hold phase</a> be unset.
1. [=Apply any pending playback rate=] on |animation|.
: Otherwise,
:: 1. Set <var>animation</var>'s <a>hold time</a> to <var>seek time</var>.
1. Set <var>animation</var>'s <a>hold phase</a> to [=timeline active phase=]
1. Set <var>animation</var>'s <a>hold phase</a> to
[=timeline active phase|active=]

</div>

Expand Down Expand Up @@ -1289,7 +1293,7 @@ as CSS Animations [[CSS-ANIMATIONS-1]].
1. Set the [=start time=] of |animation| to |new start time|.

1. If |animation|'s [=playback rate=] is not 0, make |animation|'s
[=hold time=] and [=hold phase=] [=unresolved=].
[=hold time=] [=unresolved=] and make [=hold phase=] unset.

: If |animation|'s [=start time=] is resolved and |animation| has
a [=pending playback rate=],
Expand Down Expand Up @@ -1415,10 +1419,10 @@ follows:
: If |has finite timeline| is true,
:: Set <var>animation</var>'s <a>start time</a> to <var>seek time</var>.
: Otherwise,
:: 1. Set <var>animation</var>'s <a>hold time</a> to
<var>seek time</var>.
1. Set <var>animation</var>'s <a>hold phase</a> to
[=timeline active phase=]
:: 1. Set <var>animation</var>'s <a>hold time</a> to
<var>seek time</var>.
1. Set <var>animation</var>'s <a>hold phase</a> to
[=timeline active phase|active=]

</div>

Expand Down Expand Up @@ -1611,7 +1615,7 @@ follows:
<a>associated effect end</a>,
:: If <var>did seek</var> is true, let the <a>hold time</a>
be the value of <var>unconstrained current time</var> and let
<a>hold phase</a> be [=timeline active phase=].
<a>hold phase</a> be [=timeline active phase|active=].

If <var>did seek</var> is false, let the <a>hold time</a> be the maximum
value of <a>previous current time</a> and <a>associated effect end</a>
Expand All @@ -1623,7 +1627,7 @@ follows:
<var>unconstrained current time</var> is less than or equal to 0,
:: If <var>did seek</var> is true, let the <a>hold time</a>
be the value of <var>unconstrained current time</var> and let
<a>hold phase</a> be [=timeline active phase=].
<a>hold phase</a> be [=timeline active phase|active=].

If <var>did seek</var> is false, let the <a>hold time</a> be the
minimum value of <a>previous current time</a> and zero and let
Expand All @@ -1643,7 +1647,7 @@ follows:
of <a>timeline</a> associated with <var>animation</var>.

1. Let the <a>hold time</a> be <a>unresolved</a>.
1. Let the <a>hold phase</a> be <a>unresolved</a>.
1. Let the <a>hold phase</a> be unset.

</div>

Expand Down Expand Up @@ -1791,7 +1795,7 @@ for <var>animation</var> defined below:
unresolved except in the case when the animation was previously <a
lt="idle play state">idle</a>.</div>

1. Let the <a>hold phase</a> be <a>unresolved</a>.
1. Let the <a>hold phase</a> be unset.

1. Cancel the <a>pending pause task</a>.

Expand Down Expand Up @@ -1858,7 +1862,7 @@ as follows:
source=].

1. Make <var>animation</var>'s <a>hold time</a> <a>unresolved</a>.
1. Make <var>animation</var>'s <a>hold phase</a> <a>unresolved</a>.
1. Make <var>animation</var>'s <a>hold phase</a> unset.
1. Make <var>animation</var>'s [=start time=] <a>unresolved</a>.

### Speed control ### {#speed-control}
Expand Down Expand Up @@ -2421,7 +2425,7 @@ animation effect's <a>local time</a> is not <a>unresolved</a> and
1. the effect is <a>associated with an animation</a> <em>and</em> the
associated <a>animation</a>'s <a>current phase</a> is
[=timeline after phase|after=] <em>and</em> the <a>local time</a> is equal
to the <a>active-after boundary time</a>, <em>or</em>
to the <a>active-after boundary time</a>, <em>or</em>uirecjkeiucfjseuejdjijauzsuwqaiuaizjjsujzisaijreuwnghweww
1. the <a>animation direction</a> is &lsquo;forwards&rsquo; and the <a>local
time</a> is equal to the <a>active-after boundary time</a>.

Expand Down