Wizcorp / tina.js

Tweening and INterpolations for Animation
MIT License
12 stars 8 forks source link

onComplete not being called for nested Timeline #54

Open nullorvoid opened 7 years ago

nullorvoid commented 7 years ago

Description

Ran into an issue when using nested timelines, it seems the top level Timeline when it ends does not trigger the child timelines to call their onComplete.

entry() {
    var that = this;
    setTimeout(function () {
        for (var i = 0; i < 5; i += 1) {
            that.createTweenAnimation({ id: i, tweenProperty: 0 });
        }
    }, 600);
}

createTweenAnimation(obj) {
    var timeline = new TINA.Timeline();
    timeline.add(this.createTweenSub(obj, 1));
    timeline.add(this.createTweenSub(obj, 2));

    timeline.onComplete(function(){
        console.log('Timeline Completed for:', obj.id);
    });

    timeline.start();
}

createTweenSub(obj, num) {
    var timeline = new TINA.Timeline();
    var fade = new TINA.Tween(obj, ['tweenProperty'])
        .to({ tweenProperty: 0 }, (10 * Math.random()), TINA.easing.cubicOut)
        .to({ tweenProperty: -1 }, 1.5, TINA.easing.cubicOut);

    timeline.add(fade, 0);

    timeline.onComplete(function () {
        console.log('Sub Timeline Completed for:', obj.id, 'number:', num);
    });

    return timeline;
}

Calling entry() ends up with this result image

It should be that it has 5 top level calls and 10 sub level calls. It seems sporadic on what it returns, sometimes completing all the sub timelines successfully and other times hardly completing any at all.

From the outputs I have been getting it looks like when the top level timeline completes it gets destroyed without calling any of its children's onComplete events.

cainmartin commented 7 years ago

This assessment is correct - looking at the code, Tina does indeed complete a top level timeline without checking if it has any children that it needs to update.

I will create a PR with a fix shortly - that makes it more stable for timelines / sequences.