Skip to content

[web-animations-1][web-animations-2] Move iterationComposite to web-animations-2 #4303

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

Merged
merged 4 commits into from
Sep 16, 2019
+163 −99
Merged

[web-animations-1][web-animations-2] Move iterationComposite to web-animations-2 #4303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1ce9f47
WIP
stephenmcgruer Sep 13, 2019
d2e5131
Move iterationComposite to web-animations-2
stephenmcgruer Sep 13, 2019
8ac8179
Missed changes when uploading
stephenmcgruer Sep 13, 2019
5d33612
Review fixes
stephenmcgruer Sep 16, 2019
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
112 changes: 14 additions & 98 deletions web-animations-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,9 @@ urlPrefix: https://drafts.csswg.org/css-writing-modes-4/; type: dfn; spec: css-w
text: equivalent physical property; url: logical-to-physical
urlPrefix: https://drafts.csswg.org/css-style-attr/; type: dfn; spec: css-style-attr
text: style attribute
urlPrefix: https://drafts.csswg.org/web-animations-2/; type: dfn; spec: web-animations-2
text: iteration composite operation
text: iteration composite operation accumulate
</pre>
<pre class="link-defaults">
spec:dom; type:interface; text:DocumentOrShadowRoot
Expand Down Expand Up @@ -3321,10 +3324,9 @@ a <a>target element</a> for which computed property values can be calculated.
<h4 id="the-effect-value-of-a-keyframe-animation-effect">The effect value of
a keyframe effect</h4>

The <a>effect value</a> of a single property
referenced by a <a>keyframe effect</a> as one of its
<a lt="target property">target properties</a>, for a given
<var>iteration progress</var>, <var>current iteration</var> and
The <a>effect value</a> of a single property referenced by a <a>keyframe
effect</a> as one of its <a lt="target property">target properties</a>, for a
given <var>iteration progress</var>, <var ignore=''>current iteration</var> and
<var>underlying value</var> is calculated as follows.

1. If <var>iteration progress</var> is <a>unresolved</a> abort this
Expand Down Expand Up @@ -3422,30 +3424,6 @@ referenced by a <a>keyframe effect</a> as one of its
corresponding to the <var>target property</var>'s
<a>animation type</a>.

1. If this <a>keyframe effect</a> has an <a>iteration
composite operation</a> of <a
lt="iteration composite operation accumulate">accumulate</a>,
apply the following step <var>current iteration</var> times:

* replace the property value of <var>target property</var>
on <var>keyframe</var> with the result of combining the
property value on the final keyframe in <var>property-specific
keyframes</var> (<var>V</var><sub>a</sub>) with the
property value on <var>keyframe</var>
(<var>V</var><sub>b</sub>) using the <a
lt="value accumulation">accumulation procedure</a>
defined for <var>target property</var>.

Note: The order of arguments here is important. In the case where
the animation type of the target property does not define a
procedure for accumulation or addition, the default definition
for these procedures result in <var>V</var><sub>b</sub> being
returned. When performing iteration composition on propreties
that do not support accumulation, the result should be the
initial property value of <var>target property</var> on
<var>keyframe</var>, hence we we make this
<var>V</var><sub>b</sub> in the above step.

1. If there is only one keyframe in <var>interval endpoints</var>
return the property value of <var>target property</var> on that
keyframe.
Expand Down Expand Up @@ -3733,29 +3711,6 @@ property</a> is applied using the following process.
effect at the top of the <a>effect stack</a> established for the target
property.

<h3 id="effect-accumulation-section">Effect accumulation</h3>

Similar to the compositing performed between <a>effect values</a>
(see [[#effect-composition]]), the <dfn>iteration composite operation</dfn>
determines how values are combined between successive iterations of
the same <a>keyframe effect</a>.

This specification defines two <a>iteration composite operations</a>
as follows:

: <dfn lt="iteration composite operation replace">replace</dfn>
:: Each successive iteration is calculated independently of previous
iterations.
: <dfn lt="iteration composite operation accumulate">accumulate
:: Successive iterations of the animation are <a
lt="value accumulation">accumulated</a> with the
final value of the previous iteration.

The application of the <a>iteration composite operation</a> is
incorporated in the calculation of the <a>effect value</a> in <a
href="#the-effect-value-of-a-keyframe-animation-effect"
section></a>.

<h3 id="replacing-animations">Replacing animations</h3>

<div class="informative-bg"><em>This section is non-normative</em>
Expand Down Expand Up @@ -4689,7 +4644,6 @@ dictionary ComputedEffectTiming : EffectTiming {
Constructor(KeyframeEffect source)]
interface KeyframeEffect : AnimationEffect {
attribute (Element or CSSPseudoElement)? target;
attribute IterationCompositeOperation iterationComposite;
attribute CompositeOperation composite;
sequence&lt;object&gt; getKeyframes();
void setKeyframes(object? keyframes);
Expand Down Expand Up @@ -4724,16 +4678,15 @@ interface KeyframeEffect : AnimationEffect {
If that procedure causes an exception to be thrown, propagate the
exception and abort this procedure.

1. If <var>options</var> is a {{KeyframeEffectOptions}} object,
assign the {{KeyframeEffect/iterationComposite}}, and
{{KeyframeEffect/composite}}, properties of <var>effect</var> to the
corresponding value from <var>options</var>.
1. If <var>options</var> is a {{KeyframeEffectOptions}} object, assign
the {{KeyframeEffect/composite}} property of <var>effect</var> to
the corresponding value from <var>options</var>.

When assigning these properties, the error-handling defined for the
corresponding setters on the {{KeyframeEffect}} interface is applied.
If any of those setters require an exception to be thrown
for the values specified by <var>options</var>, this procedure must
<a>throw</a> the same exception and abort all further steps.
When assigning this property, the error-handling defined for the
corresponding setter on the {{KeyframeEffect}} interface is applied.
If the setter requires an exception to be thrown for the value
specified by <var>options</var>, this procedure must <a>throw</a>
the same exception and abort all further steps.

1. Initialize the set of <a>keyframes</a> by performing the procedure
defined for {{KeyframeEffect/setKeyframes()}} passing
Expand Down Expand Up @@ -4777,7 +4730,6 @@ interface KeyframeEffect : AnimationEffect {

* <a>target element</a>,
* <a>keyframes</a>,
* <a>iteration composite operation</a>,
* <a>composite operation</a>, and
* all specified timing properties:
* [=start delay=],
Expand Down Expand Up @@ -4812,14 +4764,6 @@ interface KeyframeEffect : AnimationEffect {
a specific element such as an animation that produces a sound
using an audio API.

: <dfn attribute for=KeyframeEffect>iterationComposite</dfn>
:: The <a>iteration composite operation</a> property of this
<a>keyframe effect</a> as specified by one of the
<a>IterationCompositeOperation</a> enumeration values.

On setting, sets the <a>iteration composite operation</a> property of this
<a>animation effect</a> to the provided value.

: <dfn attribute for=KeyframeEffect>composite</dfn>
:: The <a>composite operation</a> used to composite this
<a>keyframe effect</a> with the <a>effect stack</a>, as
Expand Down Expand Up @@ -5603,17 +5547,12 @@ options)}} constructor by providing a {{KeyframeEffectOptions}} object.

<pre class='idl'>
dictionary KeyframeEffectOptions : EffectTiming {
IterationCompositeOperation iterationComposite = "replace";
CompositeOperation composite = "replace";
};
</pre>

<div class="members">

: <dfn dict-member for=KeyframeEffectOptions>iterationComposite</dfn>
:: The <a>iteration composite operation</a> used to define the way
animation values build from iteration to iteration.

: <dfn dict-member for=KeyframeEffectOptions>composite</dfn>
:: The <a>composite operation</a> used to composite this
animation with the <a>effect stack</a>, as specified by one
Expand All @@ -5624,29 +5563,6 @@ dictionary KeyframeEffectOptions : EffectTiming {

</div>

<h3 id="the-iterationcompositeoperation-enumeration">The <code>IterationCompositeOperation</code> enumeration</h3>

The possible values of an <a>animation effect</a>'s
<a>iteration composite operation</a> are represented by the
<dfn>IterationCompositeOperation</dfn> enumeration.

<pre class='idl'>
enum IterationCompositeOperation { "replace", "accumulate" };
</pre>

: <code>replace</code>
:: Corresponds to the <a
lt="iteration composite operation replace">replace</a>
<a>iteration composite operation</a> value such that the
<a>effect value</a> produced is independent of the
<a>current iteration</a>.
: <code>accumulate</code>
:: Corresponds to the <a
lt="iteration composite operation accumulate">accumulate</a>
iteration composite operation value such that
subsequent iterations of an <a>animation effect</a> build
on the final value of the previous iteration.

<h3 id="the-compositeoperation-enumeration">The <code>CompositeOperation</code> and <code>CompositeOperationOrAuto</code> enumerations</h3>

The possible values of an <a>keyframe effect</a>'s
Expand Down
150 changes: 149 additions & 1 deletion web-animations-2/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
<style>
.constructors::before, .members::before {
font: bold 100% sans-serif;
text-align: left;
margin: 1.33em 0px;
color: #005A9C;
}

.constructors::before { content: 'Constructors' }
</style>

<pre class='metadata'>
Title: Web Animations Level 2
Status: UD
Expand Down Expand Up @@ -1229,6 +1240,43 @@ Update the description of an effect that targets a non-animated property as:
> delaying the fulfilment of an <a>animation</a>'s <a>current finished
> promise</a>.

<h3 id="keyframe-effects">Keyframe Effects</h3>

<h4 id="the-effect-value-of-a-keyframe-animation-effect">The effect value of a keyframe effect</h4>

The procedure for computing the <a>effect value</a> of a single property
referenced by a <a>keyframe effect</a> as one of its <a>target properties</a>,
for a given <var ignore=''>iteration progress</var>, <var>current iteration</var> and
<var ignore=''>underlying value</var> is amended by inserting the following step
after the step to apply the keyframe effect composite mode.

12. For each <var>keyframe</var> in <var ignore=''>interval endpoints</var>:

1. (As in web-animations-1).

1. If this <a>keyframe effect</a> has an <a>iteration
composite operation</a> of <a
lt="iteration composite operation accumulate">accumulate</a>,
apply the following step <var>current iteration</var> times:

* replace the property value of <var>target property</var>
on <var>keyframe</var> with the result of combining the
property value on the final keyframe in <var ignore=''>property-specific
keyframes</var> (<var>V</var><sub>a</sub>) with the
property value on <var>keyframe</var>
(<var>V</var><sub>b</sub>) using the <a
lt="value accumulation">accumulation procedure</a>
defined for <var>target property</var>.

Note: The order of arguments here is important. In the case where
the animation type of the target property does not define a
procedure for accumulation or addition, the default definition
for these procedures result in <var>V</var><sub>b</sub> being
returned. When performing iteration composition on propreties
that do not support accumulation, the result should be the
initial property value of <var>target property</var> on
<var>keyframe</var>, hence we we make this
<var>V</var><sub>b</sub> in the above step.

<h3 id="combining-effects">Combining effects</h3>

Expand All @@ -1241,6 +1289,30 @@ The procedure for sorting effects appends the following step:
> same <a>animation</a> since otherwise the order would have been
> resolved in the previous step.)

<h3 id="effect-accumulation-section">Effect accumulation</h3>

Similar to the compositing performed between <a>effect values</a>
(see [[web-animations-1#effect-composition]]), the <dfn>iteration composite operation</dfn>
determines how values are combined between successive iterations of
the same <a>keyframe effect</a>.

This specification defines two <a>iteration composite operations</a>
as follows:

: <dfn lt="iteration composite operation replace">replace</dfn>
:: Each successive iteration is calculated independently of previous
iterations.
: <dfn lt="iteration composite operation accumulate">accumulate
:: Successive iterations of the animation are <a
lt="value accumulation">accumulated</a> with the
final value of the previous iteration.

The application of the <a>iteration composite operation</a> is
incorporated in the calculation of the <a>effect value</a> in <a
href="#the-effect-value-of-a-keyframe-animation-effect"
section></a>.


<h3 id="custom-effects">Custom effects</h3>

(This section is added.)
Expand Down Expand Up @@ -2043,12 +2115,48 @@ SequenceEffect implements GroupEffectMutable;
<h3 id="the-keyframeeffect-interfaces">The <code>KeyframeEffectReadOnly</code>
and <code>KeyframeEffect</code> interfaces</h3>

Add:
The <a>KeyframeEffect</a> interface is modified to add the following:

<pre class='idl'>
partial interface KeyframeEffect {
attribute IterationCompositeOperation iterationComposite;
};

KeyframeEffect implements AnimationEffectMutable;
</pre>

<div class="constructors">

: <dfn constructor for=KeyframeEffect
lt="KeyframeEffect(target, keyframes, options)">
KeyframeEffect (target, keyframes, options)</dfn>
:: Amend step 5 of the procedure to create a new <a>KeyframeEffect</a> object as follows:

5. If <var>options</var> is a {{KeyframeEffectOptions}} object,
assign the {{KeyframeEffect/iterationComposite}}, and
{{KeyframeEffect/composite}}, properties of <var>effect</var> to the
corresponding value from <var>options</var>.

When assigning these properties, the error-handling defined for the
corresponding setters on the {{KeyframeEffect}} interface is applied.
If any of those setters require an exception to be thrown
for the values specified by <var>options</var>, this procedure must
<a>throw</a> the same exception and abort all further steps.

: <dfn constructor for=KeyframeEffect lt="KeyframeEffect(source)">KeyframeEffect (source)</dfn>
:: Amend the procedure to create a new {{KeyframeEffect}} object with the
same properties as {{KeyframeEffect/KeyframeEffect(source)/source}} to include setting the
<a>iteration composite operation</a> from <var>source</var> on <var>effect</var>.

<div class="attributes">
: <dfn attribute for=KeyframeEffect>iterationComposite</dfn>
:: The <a>iteration composite operation</a> property of this
<a>keyframe effect</a> as specified by one of the
<a>IterationCompositeOperation</a> enumeration values.

On setting, sets the <a>iteration composite operation</a> property of this
<a>animation effect</a> to the provided value.

<h4 id="creating-a-new-keyframeeffect-object">Creating a new <code>KeyframeEffect</code> object</h4>

<div class='informative-bg'><em>This section is non-normative</em>
Expand Down Expand Up @@ -2078,6 +2186,46 @@ new SequenceEffect(

</div>

<h4 id="the-keyframeeffectoptions-dictionary">The KeyframeEffectOptions dictionary</h4>

The <a>KeyframeEffectOptions</a> dictionary interface is modified to add the
following member:

<pre class='idl'>
partial dictionary KeyframeEffectOptions {
IterationCompositeOperation iterationComposite = "replace";
};
</pre>

<div class="members">

: <dfn dict-member for=KeyframeEffectOptions>iterationComposite</dfn>
:: The <a>iteration composite operation</a> used to define the way
animation values build from iteration to iteration.

<h3 id="the-iterationcompositeoperation-enumeration">The IterationCompositeOperation enumeration</h3>

The possible values of an <a>animation effect</a>'s
<a>iteration composite operation</a> are represented by the
<dfn>IterationCompositeOperation</dfn> enumeration.

<pre class='idl'>
enum IterationCompositeOperation { "replace", "accumulate" };
</pre>

: <code>replace</code>
:: Corresponds to the <a
lt="iteration composite operation replace">replace</a>
<a>iteration composite operation</a> value such that the
<a>effect value</a> produced is independent of the
<a>current iteration</a>.
: <code>accumulate</code>
:: Corresponds to the <a
lt="iteration composite operation accumulate">accumulate</a>
iteration composite operation value such that
subsequent iterations of an <a>animation effect</a> build
on the final value of the previous iteration.

<h3 id="the-effectcallback-callback-function">The <code>EffectCallback</code> callback function</h3>

<a>Custom effects</a> can be defined in script by providing an
Expand Down