Re: [web-animations] Can AnimationNode expose finished like promises in AnimationPlayer?

Thank you for the detailed explanation.

The rationale behind animation end events is to let authors know when the target has stopped animating, so they could clean up the target, display a message, etc. So if the timing function of a group extrapolates a child animation, that child animation’s end event should be delayed, until that extrapolation is ended. It’s hard to imagine the transient end event could provide any practical use, since by the time it fires, the target is still animating.

And if the event is supposed to fire between samples, I think the event should fire at the second sample, but before the player applies the animation. This should be least surprising.

The solution your offerred sounds like the right approach for my use case, but it doesn’t seem to work in the web-animations polyfill (http://github.com/web-animations/web-animations-js <http://github.com/web-animations/web-animations-js>): the clean up function is executed after the first keyframe of the first animation is applied. I guess it’s a bug of that polyfill, will open an issue later.

This solution also demonstrates the end event should be delayed, because if I provide a timing function to the AnimationSequence that overshoots 1, the child animations should still animate in sequence, which means each animation's real end time is later then its original end time.

> On Feb 8, 2015, at 1:31 PM, Shane Stephens <shans@google.com> wrote:
> 
> Hi Glen,
> 
> There are some significant problems caused by providing events inside animation, mainly around the interplay between discrete sampling (animation frames) and continuous timing functions. Examples:
> * when a timing function in a group modifies the final end time of a child animation, should the event match the modified timing or the unmodified timing?
> * if that timing function causes the animation to animate past its end and back into effect, should the transient end also generate an event?
> * what about if this happens entirely between adjacent samples?
> 
> These problems have led us to try and avoid the issue of Animation events altogether.
> 
> An alternative mechanism for your use case is to include zero-length fill-forward custom effects:
> 
> new AnimationSequence([
>     new Animation( ... ), // animation 1
>     new Animation(null, function(tf) { // do cleanup for 1 }, {duration: 0, fill: 'forwards'}),
>     new Animation( ... ), // animation 2
>     new Animation(null, function(tf) { // do cleanup for 2 }, {duration: 0, fill: 'forwards'})
> ]);
> 
> These will execute only once (the function call is suppressed if the tf doesn't change) if you don't do things to cause the behaviors listed above.
> 
> Cheers,
>     -Shane
> 
> 
> On Sun Feb 08 2015 at 2:54:32 PM Glen Huang <curvedmark@gmail.com <mailto:curvedmark@gmail.com>> wrote:
> (This is a repost of https://lists.w3.org/Archives/Public/public-fx/2015JanMar/0038.html <https://lists.w3.org/Archives/Public/public-fx/2015JanMar/0038.html>, with title now correctly prefixed with the topic and some minor adjustment to the content. Hope it won’t be treated as a spam. :)
> 
> If I understand the spec correctly, currently, only when a whole sequence of animation nodes are finished, will authors be notified, through the finished promise exposed by the player. However, it’s impossible to get notified when each individual animation node inside that sequence is finished animating. Since animation nodes have the knowledge of its staring and ending time, I wonder if it makes sense expose these time points? For example, start (fired at 0 local time), end (fired and end of the active interval) and also iterationStart (fired at start of each iteration), iterationEnd ((fired at end of each iteration). Ideally, these events should bubble to the player, but not sure how that could be done if only promises are used.
> 
> The use case is that I want to manipulate the class name of each animation node’s element after they done animating. For example, an element is slowly moved to the middle of the viewport by manipulating its transform property (by dynamically calculating viewport's dimension and element’s dimension), but once it’s done moving, I want to change the element's class name so it actually use flex layout to stay in the middle, to eliminate the space occupied by its original box (in turn to eliminate the scroll bar for example), which basically use class names to implement forwards fill mode.
> 
> Is this the right thing to do? If so, would it be possible for animation nodes to expose their time points?