Jump to content

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


Kent Wood
 Share

Recommended Posts

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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;
}

 

Link to comment
Share on other sites

  • 1 year later...

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 by Monteiz
Emphasised property names
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...