The Trouble with Tweening [solved]

[Wolfsbane]

Hi Gang,

Not sure if I'm missing something obvious here. I want to reverse a Tween

Say with the example Tweening from one point to another and then stopping there on completion:

https://www.panda2.io/examples#tween-easing

For my purposes, I'm wanting to essentially 'toggle' this Tween. I.e. halfway through the tweening, even before it's reached it's final destination, if some event occurs I want to reverse the tween right away. (And vice-versa, if some event then occurs.

An example of a use-case would possibly be a button. The user checks it, and then there is a smooth visual effect with the tween to mark the button as checked. But half-way through the tween, the user changes their mind, clicks the button again, so I would expect the tween to basically instantly reverse.

Checking the docs, and playing around with switching yoyoEnabled on/off, and reversed on/off don't seem to do anything. 

I can somewhat achieve this effect (for a button anyway) by dynamically chaining tween actions. But this is ugly, and not a nice solution. Or maybe I coded it incorrectly.

Any thoughts?

Cheers, D

[enpu]

@Wolfsbane

I have just added new reverse method to Tween class. It has boolean parameter, which if you set to true, will force the tween to start if it's not playing (not started or already ended).

Here is example usage:

game.createScene('Main', {
    init: function() {
        this.sprite = new game.Sprite('panda.png');
        this.sprite.anchorCenter();
        this.sprite.center(this.stage);
        this.sprite.addTo(this.stage);
        this.sprite.interactive = true;
        this.sprite.mouseover = this.tweenIn.bind(this);
        this.sprite.mouseout = this.tweenOut.bind(this);
    },
    
    tweenIn: function() {
        if (this.tween) this.tween.reverse(true);
        else {
            this.tween = game.Tween.add(this.sprite.scale, {
                x: 2, y: 2
            }, 2000).start();
        }
    },
    
    tweenOut: function() {
        this.tween.reverse(true);
    }
});

This will tween the sprite scale to 200% if you move your mouse over it, and then scale it back to 100% as soon as you move your mouse out of it, by reversing the tween.

[Wolfsbane]

@enpu Great, thanks! That looks like what I'm wanting. 

So that will be released in the next Panda Engine update? Or can I snag it earlier?

[enpu]

Yeah you can update to latest dev version of the engine by enabling "Update to dev version" in the settings:

Or if you click on the "Yes" button in the update pop-up while pressing down Shift-key, it will also update to latest dev (even if not enabled from settings).

[Wolfsbane]

Ah, nice! I'll use the Dev branch. Cheers!