Re: [web-animations] state and 2nd animate parameter

On Mon, Oct 12, 2015 at 1:16 PM, Jonathan Wilkes <jancsika@yahoo.com> wrote:
> Hi web animators,
> Two questions:
> 1) I have played around with the element.animate method in Chrome, with an
> image "i":
> var my_animation = i.animate([ { width: "10px" }, { width: "100px" } ],
> 1000);
>
> When the animation is finished, is there a shortcut to set the "width"
> property of
> the element to the final value "100px"?  Right now it looks like it just
> resets to
> whatever the property was before the animate method was called.  (Currently
> I'm using the onfinish callback to achieve this.)

You want to use a fill mode
<https://w3c.github.io/web-animations/#fill-modes>, which you can
specify as part of the second argument, if you use an object instead
of a number. <https://w3c.github.io/web-animations/#dictdef-animationeffecttimingproperties>

> 2) For element.animate(param1, param2), is there a list somewhere of all the
> possible names that can appear in the param2 object?  (name as in name:value
> pairs).

Yes, but it's spread out a little, and you have to know how to read WebIDL. ^_^

1. el.animate() is defined by the Animatable interface
<https://w3c.github.io/web-animations/#animatable>.
2. According to Animatable, the second argument is a
KeyframeAnimationOptions
<https://w3c.github.io/web-animations/#dictdef-keyframeanimationoptions>,
which contains an "id" key, and extends KeyframeEffectOptions.
3. KeyframeEffectOptions
<https://w3c.github.io/web-animations/#dictdef-keyframeeffectoptions>
defines "iterationComposite", "composite", and "spacing" keys, and
extends AnimationEffectTimingProperties.
4. AnimationEffectTimingProperties
<https://w3c.github.io/web-animations/#dictdef-animationeffecttimingproperties>
defines "delay", "endDelay", "fill", "iterationStart", "iterations",
"duration", "direction", and "easing".  This is a base class, so no
more extensions.

So the list is the combination of the keys in 2, 3, and 4.

~TJ

Received on Thursday, 15 October 2015 21:41:41 UTC