diff --git a/Overview.bs b/Overview.bs index f1f6e25..4533f49 100644 --- a/Overview.bs +++ b/Overview.bs @@ -3657,11 +3657,6 @@ In order to animate a property, the following procedures must be defined. -* distance computation — given two property - values Vstart and - Vend, calculates some notion of scalar - distance between the values, distance. - Note that the above procedures apply to CSS computed property values (see [[#calculating-computed-keyframes]]). As a result, it is not necessary to define, for example, how to add a length value of "15pt" @@ -3707,11 +3702,6 @@ lt="animation accumulation">accumulation procedure is identical to the addition procedure for that type. -For animation types that do not define a specific procedure -for distance computation or which are defined as not -paceable, the distance computation procedure is simply -distance = 0. -

Not animatable

Some properties are specifically defined as animation types, no procedures for interpolation, -addition and distance -computation are defined for properties whose animation +addition and +accumulation +are defined for properties whose animation type is not animatable since these properties should not be modified. @@ -3789,9 +3780,6 @@ lt="real number animation type">real number has the following behavior: * addition: Vresult = Va + Vb -* distance computation: - distance = - |Vend - Vstart|

Length, percentage, or calc

@@ -3809,55 +3797,6 @@ calc has the following behavior: determining the computed value as defined in CSS Values and Units [[!CSS3VAL]].) -* distance computation: as with real - number but using the computed - value [[!CSS21]] for Vstart and - Vend. - - Issue: This whole section needs to be rewritten to account for when we - have lengths and percentages. In short, we don't expand these to - used values since that was deemed overly complex (without compelling use - cases) and makes calculating keyframe offsets dependent on layout. So we - should probably just use the square distance of each component, despite the - fact that it will rarely produce a useful result. - - When there is insufficient context to calculate a computed value for all - possible values of Vstart and - Vend, the result of the distance computation - calculation is zero (i.e. the behavior degenerates to not paceable). - -
- For example, for a keyframe effect that does not have - an target element, there is no context for resolving - em-based values against. - As a result, the following code snippet falls back to not paceable - animation type. - - 
-var effect =
-  new KeyframeEffect([ { top: '10px' },
-                       { top: '20em' },
-                       { top: '50em' } ],
-                     { spacing: 'paced(top)' });
-// Prints '0, 0.5, 1'
-effect.getKeyframes().map(frame => frame.computedOffset).join(', ');
-
- - For consistency, this definition applies even when a computed value - could be calculated for each of the animation values in question. - As such, the following code fragment produces the same result. - - 
-var effect =
-  new KeyframeEffect([ { top: '10px' },
-                       { top: '20px' },
-                       { top: '50px' } ],
-                     { spacing: 'paced(top)' });
-// Prints '0, 0.5, 1'
-effect.getKeyframes().map(frame => frame.computedOffset).join(', ');
-
-

Color

@@ -3874,67 +3813,6 @@ lt="color animation type">color has the following behavior: the channel values may be performed upon each addition or once when composition is complete.

-* distance computation: -
- - - distance= - - - - - Rend - - - Rstart - - 2 - - + - - - - Gend - - - Gstart - - 2 - - + - - - - Bend - - - Bstart - - 2 - - + - - - - Aend - - - Astart - - 2 - - - - - -
- distance = sqrt((Rend - Rstart)^2 + (Gend - Gstart)^2 + (Bend - Bstart)^2 + (Aend - Astart)^2) -
- -
- - where <R|G|B|Astart|end> - represents the red, green, blue, or alpha channel of - Vstart or Vend - respectively. - Each value is normalized to the [0.0, 1.0] range and expressed - in premultiplied color space.

Transform list

@@ -3987,29 +3865,6 @@ behavior: Vremainder-b Vcombined’. -* distance computation: See issue below. - -
- - For distance computation we previously defined it as follows: - - 1. Look only at the first component of the two lists - 2. If both are translate → euclidean distance - 3. If both are scale → absolute difference - 4. If both are rotate → absolute difference - 5. If both match but are something else → use linear - 6. If they don't match → use matrix decomposition and - euclidean distance between translate components - - This seems really arbitrary, especially part 5. - - Also, looking at only the first component seems odd. - Going through each component, working out the distance and then - getting the square of the distance also seems much more consistent - with what we do elsewhere. - -
-

Other animation types

The set of animation types defined here may be extended @@ -4020,31 +3875,6 @@ href="https://drafts.csswg.org/css-images/#interpolating-images">CSS Image Values and Replaced Content [[CSS3-IMAGES]]. -
- - There are a bunch of CSS properties for which distance (and in - some cases addition) is not defined or which need special - handling. - - For example, - - * font-stretch (an enum but handled like an integer) - * visibility (0 or 1 depending on if endpoints match or not) - * flex-grow and flex-shrink which allow animation only if one of - the endpoints is 0) - * value pairs, triples (use square distance) - * rects (use square distance) - * dash arrays (square distance but a bit weird due to - percentages) - * shadows (square distance of components) - * filters (undefined) - * background-position (special list handling needed) - * pair lists - - Should we define these here or in the CSS Transitions 2 spec? - -
-

Keyframe effects

@@ -4091,189 +3921,36 @@ If no keyframe-specific composite operation is specified for a keyframe, the composite operation specified for the keyframe effect as a whole is used for values specified in that keyframe. -

Spacing keyframes

-
This section is non-normative. - -It is often useful to be able to provide a series of property values -without having calculate the keyframe offset of each value in -time but instead to rely on some automatic spacing. - -For example, rather than typing: - -
-elem.animate([ { color: 'blue', offset: 0 },
-               { color: 'green', offset: 1/3 },
-               { color: 'red', offset: 2/3 },
-               { color: 'yellow', offset: 1 } ], 2000);
- -It should be possible to type the following and allow the user agent -to calculate the offset of each -keyframe: - -
-elem.animate([ { color: 'blue' },
-               { color: 'green' },
-               { color: 'red' },
-               { color: 'yellow' } ], 2000);
- -Web Animations provides spacing modes for this purpose. The default -spacing mode for keyframe effects is -“distribute” which -produces the result described above. - -The other spacing mode, “paced”, is useful when -it is desirable to maintain an even rate of change such as for motion path -animation. - -For example, consider the following animation: - -
-elem.animate([ { left: '0px' },
-               { left: '-20px' },
-               { left: '100px' },
-               { left: '50px' } ], 1000);
- -The resulting value of the left -property is illustrated below: - -
- The animated value of the left property over time when applying the distribute spacing mode. -The values are evenly spaced in time but the rate of change differs for each segment as indicated the varying slope of the graph. -
- The animated value of the left property over time when applying the - distribute spacing - mode. - The values are evenly spaced in time but the rate of change differs - for each segment as indicated the varying slope of the graph. -
-
- -We can use the paced -spacing mode as follows: - -
-elem.animate([ { left: '0px' },
-               { left: '-20px' },
-               { left: '100px' },
-               { left: '50px' } ],
-             { duration: 1000, spacing: "paced(left)" });
- -The result is illustrated below: - -
- The animated value of the left property over time when applying the paced spacing mode. -The absolute value of the slope is graph is equal for all segments of the animation indicating a constant rate of change. -
- The animated value of the left property over time when applying the - paced spacing mode. - The absolute value of the slope is graph is equal for all segments - of the animation indicating a constant rate of change. -
-
- -It is also possible to combine fixed keyframe offsets with -spacing modes as follows: - -
-elem.animate([ { left: '0px' },
-               { left: '-20px' },
-               { left: '100px', offset: 0.5 },
-               { left: '50px' } ],
-             { duration: 1000, spacing: "paced(left)" });
- -The result is illustrated below: +

Calculating computed keyframes

-
- The animated value of the left property over time when applying the paced spacing mode and a fixed offset that puts the 100px value at 0.5. -The slope of the graph is equal for the first two segments but changes for the last segment in order to accommodate the fixed offset. -
- The animated value of the left property over time when applying the - paced spacing mode and - a fixed keyframe offset that - puts the 100px value at 0.5. - The slope of the graph is equal for the first two segments but - changes for the last segment in order to accommodate the fixed - offset. -
-
+Before calculating the effect value of a keyframe effect, +the property values specified on its keyframes are resolved to +computed values, and the offset to use for any keyframes with a null +keyframe offset is computed. The result of resolving these values is +a set of computed keyframes. -
+The calculated keyframe offsets of a set of keyframe that +includes suitable values for each null keyframe offset are referred +to as the computed keyframe offsets. -Before calculating effect values from a keyframe effect, -an absolute value must be computed for the keyframe offset -of each keyframe with a null offset. - -The values computed depend on the keyframe spacing mode -specified for the keyframe effect. -The keyframe spacing modes are: - -: distribute -:: Indicates that keyframes with a null keyframe offset - are positioned so that the difference between subsequent - keyframe offsets are equal. -: paced -:: Indicates that keyframes with a null keyframe offset - are positioned so that the distance between subsequent - values of a specified paced property are equal. - The distance is calculated using the distance computation - procedure defined by the animation type associated - with the paced property. - -Since the absolute value calculated for a keyframe offset may change -depending on the keyframe values, the number of values, or external context -(such as when using paced keyframe spacing mode in combination with -em-based units), the original null values are not overwritten but rather, the -calculated absolute values are stored as a separate -value on each keyframe known as its computed keyframe offset. - -
Applying spacing to keyframes
- -We define a generic procedure for evenly distributing -a keyframe, keyframe, between two reference -keyframes, start and end, whose computed keyframe -offsets are not null, as follows: - -1. Let offsetk be the computed - keyframe offset of a keyframe k. -1. Let n be the number of keyframes between and - including start and end minus 1. -1. Let index refer to the position of - keyframe in the sequence of keyframes between - start and end such that the first keyframe - after start has an index of 1. -1. Set the computed keyframe offset of keyframe to - offsetstart + - (offsetend − - offsetstart) - × index / n. - -The procedure to apply spacing to a series of keyframes takes the -following parameters: - -* a sequence of keyframes: keyframes, -* a spacing mode, spacing, and -* a context element used for resolving relative units, context - element, (only required when spacing is - paced) - -and has the following steps: +To produce computed keyframe offsets, we define a procedure to +compute missing keyframe offsets that takes a sequence of +keyframes, keyframes, and has the following steps: 1. For each keyframe, in keyframes, let the computed keyframe offset of the keyframe be equal to its keyframe offset value. + 1. If keyframes contains more than one keyframe and the computed keyframe offset of the first keyframe in keyframes is null, set the computed keyframe offset of the first keyframe to 0. + 1. If the computed keyframe offset of the last keyframe in keyframes is null, set its computed keyframe offset to 1. + 1. For each pair of keyframes A and B where: @@ -4286,103 +3963,21 @@ and has the following steps: calculate the computed keyframe offset of each keyframe between A and B - depending on the value of spacing as follows: - -
- - : If spacing is paced, - :: - - 1. Define a keyframe as paceable if it - contains a value for the paced property. - 1. Let paced A be the first keyframe in the - range [A, B] that is - paceable, if any. - 1. Let paced B be the last keyframe in the - range [A, B] that is - paceable, if any. - 1. If there is no paced A or paced - B let both refer to B. - - Note: In this case the spacing behavior degenerates to distribute spacing. - - 1. For each keyframe in the range - (A, paced A] and - [paced B, B), - apply the procedure for evenly distributing - a keyframe using A and B as - the start and end keyframes - respectively. - -
- - Yes, this is correct. - We want, index and n in that - procedure to reflect all the keyframes - between A and B, not just the - keyframes between, for example, A and - paced A. - -
- - 1. For each keyframe in the range - (paced A, paced B) that is - paceable: - - 1. Let - distk - represent the cumulative distance to a keyframe - k from paced A - as calculated by applying the distance - computation defined by the animation - type of the paced property to the - values of the paced property on each pair of - successive paceable keyframes in the range - [paced A, k]. - Use context element as the basis for resolving - context-sensitive values such as font-size based units. - 1. Set the computed keyframe offset of k to - offsetpaced - A + - (offsetpaced - B − - offsetpaced - A) × - distk / - distpaced - B. - If distpaced B - is zero, leave the computed keyframe offset as - null—it will be set in the next step when we apply - distribute spacing to remaining keyframes. - 1. For each keyframe in the range (paced A, - paced B) that still has - a null computed keyframe offset (because it is not - paceable, or because the cumulative distance between - paceable properties was zero), apply the procedure - for evenly distributing a keyframe using - the nearest keyframe before and after the - keyframe in question in keyframes that has - a computed keyframe offset that is not null, as the - start and end keyframes - respectively. - : Otherwise, - :: Apply the procedure for evenly distributing - a keyframe to each keyframe in the range (A, - B) using A and B as the - start and end keyframes respectively. - -
- -

Calculating computed keyframes

- -Before calculating the effect value of a keyframe effect, -we must resolve specified property values to computed values and applying -spacing to compute absolute values for the keyframe offset of each -keyframe with a null offset. The result of resolving these values is -a set of computed keyframes. + as follows: + + 1. Let offsetk be the computed + keyframe offset of a keyframe k. + 1. Let n be the number of keyframes between and + including A and B minus 1. + 1. Let index refer to the position of + keyframe in the sequence of keyframes between + A and B such that the first keyframe + after A has an index of 1. + 1. Set the computed keyframe offset of keyframe to + offsetA + + (offsetB − + offsetA) + × index / n. Computed keyframes are produced using the following procedure. Note that this procedure is only performed on a keyframe effect having @@ -4422,22 +4017,15 @@ a target element for which computed property values can be calculated. 'border-top-color' overrides 'border-top'). 1. Shorthand properties with fewer longhand components override those with more longhand components (e.g. 'border-top' overrides - 'border-color') + 'border-color'). 1. For shorthand properties with an equal number of longhand components, properties whose IDL name (see the CSS property to IDL attribute algorithm [[!CSSOM]]) appears earlier when sorted in ascending order by the Unicode codepoints that make up each IDL name, override those who appear later. - NOTE: Invalid property values and values unsupported by the - implementation MUST be preserved such that when spacing is applied - later in this procedure, the keyframes are spaced as if the - value was supported. - -1. Perform the procedure to apply spacing to a series of keyframes - on computed keyframes using the keyframe spacing mode for - this effect as spacing, and the target element - for this effect as the context element. +1. Apply the procedure to compute missing keyframe offsets to + computed keyframes. 1. Return computed keyframes. @@ -4467,8 +4055,7 @@ referenced by a keyframe effect as one of its effect. 1. Remove any keyframes from property-specific keyframes that do not have a property value for - target property or for which the property value is - invalid or unsupported by the implementation. + target property. 1. If property-specific keyframes is empty, return underlying value. 1. If there is no keyframe in property-specific @@ -6305,7 +5892,6 @@ interface KeyframeEffectReadOnly : AnimationEffectReadOnly { readonly attribute Animatable? target; readonly attribute IterationCompositeOperation iterationComposite; readonly attribute CompositeOperation composite; - readonly attribute DOMString spacing; sequence<object> getKeyframes (); }; @@ -6317,7 +5903,6 @@ interface KeyframeEffect : KeyframeEffectReadOnly { inherit attribute Animatable? target; inherit attribute IterationCompositeOperation iterationComposite; inherit attribute CompositeOperation composite; - inherit attribute DOMString spacing; void setKeyframes (object? keyframes); }; @@ -6384,9 +5969,8 @@ KeyframeEffect implements AnimationEffectMutable; that here. 1. If options is a {{KeyframeEffectOptions}} object, - assign the {{KeyframeEffectReadOnly/iterationComposite}}, - {{KeyframeEffectReadOnly/composite}}, and - {{KeyframeEffectReadOnly/spacing}} properties of effect to + assign the {{KeyframeEffectReadOnly/iterationComposite}}, and + {{KeyframeEffectReadOnly/composite}}, properties of effect to the corresponding value from options. As with timing input, when assigning these properties the @@ -6443,9 +6027,8 @@ KeyframeEffect implements AnimationEffectMutable; * target element, * keyframes, - * iteration composite operation, - * composite operation, and - * spacing mode. + * iteration composite operation, and + * composite operation. Issue: If source is using a {{SharedKeyframeList}} should we continue to share it? @@ -6531,11 +6114,8 @@ KeyframeEffect implements AnimationEffectMutable; console.log(animation.effect.constructor.name); // "KeyframeEffect" // It is now possible to manipulate the effect - // e.g. apply 'paced' spacing - const keyframes = animation.effect.getKeyframes(); - animation.setKeyframes(keyframes.map( - keyframe => Object.assign(keyframe, { offset: null })); - animation.effect.spacing = 'paced(margin-left)'; + // e.g. apply 'add' composite mode + animation.effect.composite = 'add'; // Note that changing 'animation-*' properties will not affect the // new effect. @@ -6585,55 +6165,14 @@ KeyframeEffect implements AnimationEffectMutable; On setting, sets the composite operation property of this animation effect to the provided value. -: spacing -:: On getting, returns the spacing mode to - use for this keyframe effect. - - On setting, sets the spacing mode - property of this keyframe effect to the provided value. - - Recognized values are defined by the following grammar: - -
- 
distribute | paced(<>)
-
- - The meaning of each value is as follows: - - : distribute - :: Use the distribute keyframe spacing mode. - : paced(<>) - :: Use the paced keyframe spacing mode with the property - name indicated by <ident> as the paced - property. - - For example, paced(transform) would indicate that - the keyframes should be spaced such that changes to the transform property occur at - a constant rate. - - If an attempt is made to set the spacing mode to a value that does not - conform to the above grammar, a TypeError - must be thrown and the value of the spacing mode left unaffected. - - If the paced property is not a property supported by the - implementation, or is not animatable by the implementation, the spacing mode must be set to distribute. - A property is considered to be animatable if its animation type is - anything other than not animatable, or, for shorthand properties, if - at least one of its component longhand properties has an animation - type other than not animatable. -
: sequence<object> getKeyframes() -:: Returns the computed-offset keyframes that make up this effect. +:: Returns the keyframes that make up this effect along with their + computed keyframe offsets.
This section is non-normative @@ -6655,17 +6194,15 @@ KeyframeEffect implements AnimationEffectMutable; : offset :: The keyframe offset of the keyframe specified as - a number between 0.0 and 1.0 inclusive or null. + a number between 0.0 and 1.0 inclusive, or null. - This will be null if the keyframe is - automatically spaced using the keyframe effect's - keyframe spacing mode. + This will be null if the keyframe is to be + automatically spaced between adjacent keyframes. : computedOffset :: The computed keyframe offset for this keyframe - calculated by applying the keyframe effect's keyframe - spacing mode when the list of computed-offset keyframes - was produced. + calculated as part of running the compute missing keyframe + offsets procedure. Unlike the offset member, the computedOffset is never null. @@ -6688,9 +6225,9 @@ KeyframeEffect implements AnimationEffectMutable; used to prepare the result of this method is defined in prose below: 1. Let result be an empty sequence of objects. - 1. Let keyframes be the result of calculating the - computed-offset keyframes for this keyframe effect - (see [[#computed-offset-keyframes-section]]). + 1. Let keyframes be the result of applying the procedure to + compute missing keyframe offsets to the keyframes + for this keyframe effect. 1. For each keyframe in keyframes perform the following steps: @@ -6997,14 +6534,13 @@ The meaning and allowed values of each argument is as follows: a number between 0.0 and 1.0 inclusive or null. A null value indicates that the keyframe - should be positioned using the keyframe effect's - keyframe spacing mode. + should be automatically spaced between adjacent keyframes. Specifying an offset outside the range [0.0, 1.0] will cause a TypeError to be thrown. Keyframes that specify an offset must be provided in increasing - order of offset. Overlapping offsets, however, are permitted. + order of offset. Adjacent and equal offsets, however, are permitted. : easing :: The timing function used to transform the progress of time @@ -7241,36 +6777,8 @@ keyframes or a {{SharedKeyframeList}} object using the following procedure: 1. Append k to property keyframes. - 1. Apply the procedure to apply spacing to a series of - keyframes to property keyframes using a - spacing mode of distribute. - -
- - We unconditionally apply distribute spacing simply for the - purposes of merging keyframes. This produces consistent and - intuitive results. - - Paced spacing can produce different results depending on the - context in which relative values are resolved. Using paced - spacing to calculate offsets and then merging would mean that - the merge results could differ over time. It would also mean - that the keyframes returned from - {{KeyframeEffectReadOnly/getKeyframes()}} would - produce a different result if passed back to - {{KeyframeEffect/setKeyframes()}} since the merge result which, - until that point, was dynamic, would suddenly become fixed. - - Due to these considerations we apply merging once when updating - the keyframes using distribute spacing which does not vary in - its results. - - Before computing the effect result or returning keyframes from - {{KeyframeEffectReadOnly/getKeyframes()}} the specified spacing mode is applied. - -
+ 1. Apply the procedure to compute missing keyframe + offsets to property keyframes. 1. Add keyframes in property keyframes to processed keyframes. @@ -7290,10 +6798,9 @@ keyframes or a {{SharedKeyframeList}} object using the following procedure: value using the syntax specified for that property. If the property value is invalid according to the syntax for the - property, store the original DOMString used for the property value. - + property, discard the property-value pair. User agents that provide support for diagnosing errors in content - SHOULD produce an appropriate warning highlighting the unrecognized + SHOULD produce an appropriate warning highlighting the invalid property value. 1. Let the timing function of frame be the result of @@ -7323,7 +6830,6 @@ constructors by providing a {{KeyframeEffectOptions}} object. dictionary KeyframeEffectOptions : AnimationEffectTimingProperties { IterationCompositeOperation iterationComposite = "replace"; CompositeOperation composite = "replace"; - DOMString spacing = "distribute"; }; @@ -7340,53 +6846,8 @@ dictionary KeyframeEffectOptions : AnimationEffectTimingProperties { This is used for all keyframes that do not specify a keyframe-specific composite operation. -: spacing -:: The spacing mode to apply - to this animation effect's keyframes. - - See the {{KeyframeEffect/spacing}} attribute of the - {{KeyframeEffect}} interface for the recognized values and - their meanings. -
-

Computed-offset keyframes

- -The set of keyframes returned by {{KeyframeEffectReadOnly/getKeyframes()}} -is based on the specified keyframes for the keyframe effect (i.e. the -result of running the process a keyframes argument procedure) but also -includes the offsets from the computed keyframes. -This combined result is referred to as the computed-offset keyframes -and, for {{KeyframeEffect}} effect, is produced as follows: - -1. Let computed-offset keyframes be a copy of the keyframes - specified for effect. - -1. If there is a target element specified for effect that - can be used to calculate CSS computed values, perform the following steps. - - 1. Let computed keyframes be the result of calculating - the computed keyframes for effect. - - 1. Copy the computed keyframe offset values from computed - keyframes to their corresponding keyframes in - computed-offset keyframes. - - Otherwise, if there is no target element specified for - effect, or the target element is not able to be used to - calculate CSS computed values, perform the following steps: - - 1. Apply the procedure to apply spacing to a series of - keyframes to computed-offset keyframes using a - spacing mode of distribute. - -1. Return computed-offset keyframes. - -ISSUE: This procedure needs to be updated to correctly return -a {{SharedKeyframeList}} object when specified. This is currently deferred -since {{SharedKeyframeList}} is awaiting implementation experience. -

The IterationCompositeOperation enumeration

The possible values of an animation effect's @@ -7996,6 +7457,8 @@ The following changes have been made since the idle phase. * Adjusted the procedure to update an animation's finished state to accommodate timelines that change direction. +* Dropped keyframe spacing, distance calculation, and retention of invalid + keyframe property values. diff --git a/img/spacing-distribute.svg b/img/spacing-distribute.svg deleted file mode 100644 index ed81a97..0000000 --- a/img/spacing-distribute.svg +++ /dev/null @@ -1,94 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - -50px50px100px - - - left - - - - - 0.3330.6661 - - time - - 0 - - - - spacing="distribute" - - diff --git a/img/spacing-paced-with-offset.svg b/img/spacing-paced-with-offset.svg deleted file mode 100644 index db65ec3..0000000 --- a/img/spacing-paced-with-offset.svg +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - -50px50px100px - - - left - - - - - 0.070.51 - - time - - 0 - - - - spacing="paced(left)"and fixed offset at 0.5 - - diff --git a/img/spacing-paced.svg b/img/spacing-paced.svg deleted file mode 100644 index 129feb7..0000000 --- a/img/spacing-paced.svg +++ /dev/null @@ -1,94 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - -50px50px100px - - - left - - - - - 0.1050.7371 - - time - - 0 - - - - spacing="paced(left)" - -