how to immediately jump to the end state in timeline(animation skip)

[Kent Wood]

I created a simple timeline to simulate a card unfold animation,  there are 2 tweens inside it, one is changing the card's scaleX from 1 to 0.01 and another one just does oppositely.

var timeline = this.scene.tweens.createTimeline();
timeline.add({targets:this.cardFace,scaleX:0.01,duration:500,ease:Phaser.Math.Easing.Cubic.Out,onComplete:function(){this.cardFace.setFrame('heart-2')}});
timeline.add({targets:this.cardFace,scaleX:1,duration:500,ease:Phaser.Math.Easing.Cubic.Out});
timeline.play();

my question is, how to ignore the tween's duration, and immediately jump to the end. in some case, I want to skip the animations but keep the ending process

[Kent Wood]

what I mean is the animation is already playing, and there is a"'skip" button, click to skip all the playing animations. I want to keep all the ending properties state of each tween and just skip the animations

[blackhawx]

According to the official API you can set methods on tweens to do stuff.  Try playing with this example

//CREATE YOUR TEXT OBJECT
 let tconfig = {
      x: 200,
      y: 50,
      text: 'Skip',
      style: {
        fontSize: '24px',
        fontFamily: 'Arial',
        color: '#ffffff',
        align: 'center',
        lineSpacing: 44,
      }
    };
    let text = this.make.text(tconfig);
    text.setWordWrapWidth(100, false);
    text.setScrollFactor(0);

  
//CREATE YOUR TWEEN 
let mtween =  this.tweens.add({
      targets: your-target,
      x: 300,
      ease: 'Elastic',
      duration:2000
});

//MAKE YOUR TEXT OBJECT A BUTTON
 text.setInteractive();
 text.on('pointerdown', (pointer, targets) => {
    this.input.addUpCallback(() => {
      //BASED ON THE API, THERE IS SEEK METHOD YOU CAN USE FOR TWEENS BETWEEN 0 AND 1
      mtween.seek(1);
    }, true);
  });

 

Hopefully this helps

 

[Kent Wood]

thanks for your replay

i rewrite and add a new method 'skipAll' for timeline class, works fine to me so far

//add a new property,to keep the timeline instance even the tweens inside finished playing
Phaser.Tweens.Timeline.prototype.keepalive = false;
Phaser.Tweens.Timeline.prototype.update = function (timestamp, delta) {
    if (this.state === Phaser.Tweens.PAUSED) {
        return;
    }

    var rawDelta = delta;

    if (this.useFrames) {
        delta = 1 * this.manager.timeScale;
    }

    delta *= this.timeScale;

    this.elapsed += delta;
    this.progress = Math.min(this.elapsed / this.duration, 1);

    this.totalElapsed += delta;
    this.totalProgress = Math.min(this.totalElapsed / this.totalDuration, 1);

    switch (this.state) {
        case Phaser.Tweens.ACTIVE:

            var stillRunning = this.totalData;

            for (var i = 0; i < this.totalData; i++) {
                var tween = this.data[i];

                if (tween.update(timestamp, rawDelta)) {
                    stillRunning--;
                }
            }

            var onUpdate = this.callbacks.onUpdate;

            if (onUpdate) {
                onUpdate.func.apply(onUpdate.scope, onUpdate.params);
            }

            this.emit('update', this);

            //  Anything still running? If not, we're done
            if (stillRunning === 0) {
//add these codes, pause the timeline, not change the state to pending_remove
                if (this.keepalive)
                    this.pause();
                else
                    this.nextState();
            }

            break;

        case Phaser.Tweens.LOOP_DELAY:

            this.countdown -= delta;

            if (this.countdown <= 0) {
                this.state = Phaser.Tweens.ACTIVE;
            }

            break;

        case Phaser.Tweens.COMPLETE_DELAY:

            this.countdown -= delta;

            if (this.countdown <= 0) {
                var onComplete = this.callbacks.onComplete;

                if (onComplete) {
                    onComplete.func.apply(onComplete.scope, onComplete.params);
                }

                this.emit('complete', this);

                this.state = Phaser.Tweens.PENDING_REMOVE;
            }

            break;
    }

    return (this.state === Phaser.Tweens.PENDING_REMOVE);
}
Phaser.Tweens.Timeline.prototype.play = function () {
    if (this.state === Phaser.Tweens.ACTIVE) {
        return;
    }

    if (this.paused) {
        if (!this.keepalive || this.state == Phaser.Tweens.PENDING_ADD) {
            this.paused = false;
            this.manager.makeActive(this);
        } else {
//add these codes, once i called 'skipAll', all the tweens inside have been removed, then once i add new tweens later, i call resume and also, i have to call calcDuration to calcalate the time staffs...
            this.resume();
            this.calcDuration();
            this.resetTweens(false);
        }

        return;

    }
    else {
        this.resetTweens(false);

        this.state = Phaser.Tweens.ACTIVE;
    }

    var onStart = this.callbacks.onStart;

    if (onStart) {
        onStart.func.apply(onStart.scope, onStart.params);
    }

    this.emit('start', this);
}

//this is the new method i added, in order to directly go to the end state of exisit tweens
Phaser.Tweens.Timeline.prototype.skipAll = function () {
//use a while loop, make sure all tweens insides has been update to the end
    while (!loopSkip.bind(this)()){}
    this.clear();
    if (this.keepalive && this.isPlaying())
        this.pause();
    return this;
}
Phaser.Tweens.Timeline.prototype.clear = function () {
    this.elapsed = 0;
    this.progress = 0;
    this.data = [];
    this.totalData = 0;
}

function loopSkip() {
    var rawDelta = this.totalDuration - this.totalElapsed;//Number.MAX_VALUE;

    if (this.state == Phaser.Tweens.ACTIVE) {

        var stillRunning = this.totalData;

        for (var i = 0; i < this.totalData; i++) {
            var tween = this.data[i];

            if (tween.update(null, rawDelta)) {
                stillRunning--;
            }
        }
        return stillRunning == 0;
    }
    return true;
}

 

[Monteiz]

Simply set the timeline timeScale property to Infinity:

timeline.timeScale = Infinity;

From the docs:

Quote

timeScale :number

Scales the time applied to this Timeline. A value of 1 runs in real-time. A value of 0.5 runs 50% slower, and so on. Value isn't used when calculating total duration of the Timeline, it's a run-time delta adjustment only.

 

Edited February 1, 2020 by Monteiz
Emphasised property names