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
Open

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

Show file tree
Hide file tree
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
Moved changes to Web-Animations-2 from Web-Animations-1
  • Loading branch information
Jordan Taylor committed Jan 5, 2021
commit 1ca89641a70575b6f535e7d41ad4e53d4e8e4024
114 changes: 20 additions & 94 deletions web-animations-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -817,14 +817,6 @@ 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>.

In addition to the <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.

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
in which they are created. Certain <a lt="animation class">classes of
Expand All @@ -844,7 +836,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>
<a>unresolved</a> and make <a>hold phase</a> unset.
<a>unresolved</a>.

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 @@ -933,37 +925,6 @@ matching condition from below:

</div>

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

In addition to their <a>current time</a>, <a>animations</a> provide their
<a>associated effects</a> with a <dfn>current phase</dfn>.
This is used in determining the animations effect's phase in certain boundary
conditions.

An <a>animation's</a> <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 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
1. the animation's [=start time=] is <a>unresolved</a>.

:: The <a>current phase</a> is [=timeline inactive phase|inactive=].

: Otherwise,
:: The <a>current phase</a> is the [=timeline phase=] of the associated
<a>timeline</a>.

</div>

### Setting the current time of an animation ### {#setting-the-current-time-of-an-animation}

The <a>current time</a> of an animation can be set to a new value to
Expand Down Expand Up @@ -997,9 +958,7 @@ an animation, <var>animation</var>, to <var>seek time</var> is as follows:
<a lt="inactive timeline">inactive</a>, or
* <var>animation</var>'s [=playback rate=] is 0,

:: 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=].
:: Set <var>animation</var>'s <a>hold time</a> to <var>seek time</var>.

: Otherwise,
:: Set <var>animation</var>'s [=start time=] to the result of evaluating
Expand Down Expand Up @@ -1029,8 +988,6 @@ The procedure to <dfn>set the current time</dfn> of an animation,
1. If <var>animation</var> has a <a>pending pause task</a>, synchronously
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|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 @@ -1054,7 +1011,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> <a>unresolved</a> and make <a>hold phase</a> unset.
<a>hold time</a> <a>unresolved</a>.

<p class=note>
This preserves the invariant that when we don't have an active timeline it
Expand All @@ -1069,29 +1026,23 @@ is as follows:
previous step which may cause the <a>current time</a> to become
<a>unresolved</a>.

1. Let <var>previous current phase</var> be <var>animation</var>'s <a>current
phase</a>.

1. [=Apply any pending playback rate=] on |animation|.

1. Set <var>animation</var>'s [=start time=] to <var>new start time</var>.

1. Update <var>animation</var>'s <a>hold time</a> and <a>hold phase</a> based
on the first matching condition from the following,
1. Update <var>animation</var>'s <a>hold time</a> based on the first matching
condition from the following,

<div class="switch">

: 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> <a>unresolved</a> and make
<a>hold phase</a> unset.
make <var>animation</var>'s <a>hold time</a> <a>unresolved</a>.

: Otherwise (<var>new start time</var> is <a>unresolved</a>),
:: Set <var>animation</var>'s <a>hold time</a> to <var>previous current
time</var> even if <var>previous current time</var> is
<a>unresolved</a>.
:: Set <var>animation</var>'s <a>hold phase</a> to <var>previous current
phase</var>.

</div>

Expand Down Expand Up @@ -1239,13 +1190,10 @@ 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=] be <a>unresolved</a> and
<a>hold phase</a> be unset.
1. Let |animation|'s [=hold time=] be <a>unresolved</a>.
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|active=].
:: Set <var>animation</var>'s <a>hold time</a> to <var>seek time</var>.

</div>

Expand Down Expand Up @@ -1299,7 +1247,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=] [=unresolved=] and make [=hold phase=] unset.
[=hold time=] [=unresolved=].

: If |animation|'s [=start time=] is resolved and |animation| has
a [=pending playback rate=],
Expand All @@ -1311,8 +1259,7 @@ as CSS Animations [[CSS-ANIMATIONS-1]].
1. [=Apply any pending playback rate=] on |animation|.

1. If |animation|'s [=playback rate=] is zero, let |animation|'s
[=hold time=] be |current time to match| and let [=hold phase=]
be the |animation|'s [=current phase=].
[=hold time=] be |current time to match|.

1. Let |new start time| be the result of evaluating
<code>|ready time| - |current time to match| /
Expand Down Expand Up @@ -1425,10 +1372,7 @@ 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|active=].
:: Set <var>animation</var>'s <a>hold time</a> to <var>seek time</var>.

</div>

Expand Down Expand Up @@ -1459,8 +1403,7 @@ follows:
<em>not</em> resolved,
let <var>animation</var>'s <a>hold time</a> be the result of evaluating
<code>(<var>ready time</var> - [=start time=]) &times;
[=playback rate=]</code> and let <var>animation</var>'s
<a>hold phase</a> be the <var>animation</var>'s <a>current phase</a>.
[=playback rate=]</code>.

Note: The <a>hold time</a> might be already set if the animation
is <a lt="finished play state">finished</a>, or if the animation
Expand Down Expand Up @@ -1610,34 +1553,29 @@ follows:
* <var>animation</var> does <em>not</em> have a <a>pending play task</a>
or a <a>pending pause task</a>,

then update <var>animation</var>'s <a>hold time</a> and <a>hold phase</a>
based on the first matching condition for <var>animation</var> from below,
if any:
then update <var>animation</var>'s <a>hold time</a> based on the first
matching condition for <var>animation</var> from below, if any:

<div class='switch'>

: If [=playback rate=] &gt; 0 and
<var>unconstrained current time</var> is greater than or equal to
<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|active=].
be the value of <var>unconstrained current time</var>.

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>
and let <a>hold phase</a> be the <a>current phase</a>.
value of <a>previous current time</a> and <a>associated effect end</a>.
If the <a>previous current time</a> is
<a>unresolved</a>, let the <a>hold time</a> be <a>associated
effect end</a>.
: If [=playback rate=] &lt; 0 and
<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|active=].
be the value of <var>unconstrained current time</var>.

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
<a>hold phase</a> be the <a>current phase</a>.
minimum value of <a>previous current time</a> and zero.
If the <a>previous current time</a> is
<a>unresolved</a>, let the <a>hold time</a> be zero.
: If [=playback rate=] &ne; 0, and
Expand All @@ -1653,7 +1591,6 @@ 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 unset.

</div>

Expand Down Expand Up @@ -1801,8 +1738,6 @@ 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 unset.

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

1. <a lt="resolve a Promise">Resolve</a> the <a>current ready promise</a>
Expand Down Expand Up @@ -1868,7 +1803,6 @@ 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> unset.
1. Make <var>animation</var>'s [=start time=] <a>unresolved</a>.

### Speed control ### {#speed-control}
Expand Down Expand Up @@ -2411,27 +2345,19 @@ definitions:

An <a>animation effect</a> is in the <dfn>before phase</dfn> if the
animation effect's <a>local time</a> is not <a>unresolved</a> and
<em>any</em> of the following conditions are met:
<em>either</em> of the following conditions are met:

1. the <a>local time</a> is less than the <a>before-active boundary time</a>,
<em>or</em>
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 before phase|before=] <em>and</em> the <a>local time</a> is equal
to the <a>before-active boundary time</a>, <em>or</em>
1. the <a>animation direction</a> is &lsquo;backwards&rsquo; and the <a>local
time</a> is equal to the <a>before-active boundary time</a>.

An <a>animation effect</a> is in the <dfn>after phase</dfn> if the
animation effect's <a>local time</a> is not <a>unresolved</a> and
<em>any</em> of the following conditions are met:
<em>either</em> of the following conditions are met:

1. the <a>local time</a> is greater than the <a>active-after boundary
time</a>, <em>or</em>
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>
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
Loading