Re: [web-animations] Ordering animations based on when they transition from idle

On 2015/06/01 15:04, Kristopher Giesing wrote:
> I have to admit I'm a bit confused.  Doesn't getAnimations() always
> return a sequence that's ordered by the animation sequence number [1]?

Not for CSS animations and transitions. For example, the priority of CSS 
animations is determined by the ordering within the animation-name property.

So, if you write,

  animation: a 1s, b 1s, c 1s,

a has the lowest priority, and c has the highest regardless of when they 
start or when they were generated.

You could update the order as follows and the priority would change 
despite the sequence number not changing:

  element.style.animation = 'a 1s, c 1s, b 1s';

Likewise for transitions, if you write,

  element.style.transition = 'all 1s';
  getComputedStyle(element);
  element.style.transform = 'translateX(100px)';
  element.style.opacity = '0';
  getComputedStyle(element);

the resulting animation sequence number for each transition isn't 
defined since implementations aren't required to generate the 
transitions for 'transform' and 'opacity' in any particular order.

> That would mean in example 2 you'd get "a, b, c" in both invocations.
> Perhaps I'm missing a subtlety of the custom animation priority [2]?

I think the details discussed on the GitHub issue[1] will probably help 
here. We may or may not keep the custom animation priority depending on 
how we spec the result of that discussion.

Best regards,

Brian

[1] https://github.com/w3c/web-animations/issues/62

> Best,
>
> - Kris
>
> [1] http://w3c.github.io/web-animations/#dom-animatable-getanimations
> [2] http://w3c.github.io/web-animations/#custom-animation-priority
>
> On Sun, May 31, 2015 at 9:38 PM, Brian Birtles <bbirtles@mozilla.com
> <mailto:bbirtles@mozilla.com>> wrote:
>
>     Hi,
>
>     I'm trying to nail down the ordering of animations so I can
>     implement it in Firefox. I wrote up an outline of this on Github[1]
>     and went over it with Shane, Doug and Mike last week who agreed it
>     seems reasonable.[2]
>
>     Coming to implement this now, however, I've come across the
>     following edge case:
>
>        elem.style.animation = 'a 2s, b 3s, c 4s';
>        let b = elem.getAnimations[1];
>        let c = elem.getAnimations[2];
>        elem.style.animation = 'a 2s, d 5s';
>        c.play();
>        b.play();
>        elem.getAnimations(); // what is the order here?
>
>     The issue is that so long as b and c are in elem's list of
>     animations, their order (priority) is well-defined. Once we drop
>     them from that list, however, what determines their priority?
>
>     As the spec stands, we'd fall back to regular animation priority
>     which is based on its animation sequence number[3]. This is defined
>     as being based on when the animation is created.
>
>     That's problematic because we don't require CSS animations or
>     transitions to be created in any specific order. Furthermore, even
>     if we did require that, you'd get strange results when, for example,
>     you do the following:
>
>        elem.style.animation = 'a 2s, b 3s';
>        getComputedStyle(elem).animationName; // flush style
>        elem.style.animation = 'a 2s, c 4s, b 3s';
>        let anims = elem.getAnimations(); // returns a, c, b
>        elem.style.animation = '';
>        anims.forEach(anim => anim.play());
>        elem.getAnimations(); // returns a, b, c. What??
>
>     I wonder if we should change the animation sequence number to be
>     based on when the animation last transitioned out of the idle state.
>
>     If we did that, the order in the first example would be 'a, d, c,
>     b'. In the second example, we'd get 'a, b, c' in both cases.
>
>     Doing this would also allow authors to alter the priority of
>     animations without having to regenerate them: simply cancel() and
>     play() to push to the top of the stack.
>
>     I think this is intuitive since cancelling an animation effectively
>     takes it out of any composition stack it might be contributing to.
>
>     What do you think?
>
>     Brian
>
>
>     [1] https://github.com/w3c/web-animations/issues/62
>     [2]
>     https://lists.w3.org/Archives/Public/public-fx/2015AprJun/0046.html,
>     item 3
>     [3] http://w3c.github.io/web-animations/#animation-sequence-number
>
>

Received on Monday, 1 June 2015 06:24:32 UTC