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

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> wrote:

> (This is a repost of
> 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?
>