W3C home > Mailing lists > Public > public-fx@w3.org > October to December 2015

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

From: Jonathan Wilkes <jancsika@yahoo.com>
Date: Sat, 17 Oct 2015 15:46:44 +0000 (UTC)
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: "public-fx@w3.org" <public-fx@w3.org>
Message-ID: <1069061797.1796438.1445096804678.JavaMail.yahoo@mail.yahoo.com>
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. :)


     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
2. According to Animatable, the second argument is a
which contains an "id" key, and extends KeyframeEffectOptions.
3. KeyframeEffectOptions
defines "iterationComposite", "composite", and "spacing" keys, and
extends AnimationEffectTimingProperties.
4. 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.


Received on Saturday, 17 October 2015 15:59:18 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:49:54 UTC