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

Thanks Tab, that helps a lot.

That documentation path is a bit difficult to follow, especially considering this interface is 
meant to greatly simplify animation for the user.  The "Dictionary Members" section is 
especially confusing-- if you hadn't written that in explicitly I would have overlooked it.
I say that with full knowledge that it's an implementor's guide-- but then so is SVG 1.1 
and I can generally read that with no problem.  (And I'm a human. :)
-Jonathan




 


     On Thursday, October 15, 2015 5:42 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
   

 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