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

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Thu, 15 Oct 2015 14:40:53 -0700
Message-ID: <CAAWBYDA-ogoO5WDDU6m_X2Wd4qmqsOrOiA+Qn2SV0g6iPPzVqg@mail.gmail.com>
To: Jonathan Wilkes <jancsika@yahoo.com>
Cc: "public-fx@w3.org" <public-fx@w3.org>
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

This archive was generated by hypermail 2.3.1 : Thursday, 15 October 2015 21:41:41 UTC