要进行简单的补间管理，请添加一个补间对象以调用

Question

我已经为我的游戏主菜单创建了一些按钮，我希望添加一个漂亮的按钮动画，这些按钮会在屏幕上移动，并且相互之间会有很短的延迟。

所以我做了一堆按钮并给每个按钮自己的补间，然后像这样结合补间过程：

tempTweens[0].onStart.add(function () {
    console.log('onStart fired'); 
    game.time.events.add(tweenDelay, function () {
        tempTweens[1].start();
    }, this);

    game.time.events.add(tweenDelay * 2, function () {
        tempTweens[2].start();
    }, this);

    game.time.events.add(tweenDelay * 3, function () {
        tempTweens[3].start();
    }, this);
}, this);

但是当我做tempTweens [0] .start（）;它做了我想要的......一次。我第二次做tempTweens [0] .start（）;它只移动第一个按钮而不移动其他按钮。

我甚至在这段代码之后做了一个小循环来检查。

for (var i = 0; i < 10; i++) {
        tempTweens[0].start();
    }

它只会写入onStart已解雇的＆＃39;控制一次。

我知道如何在每次启动第一个补间时让.onStart工作吗？

我认为我还没有完全理解.onStart是如何工作的，但我的猜测是这样的事情只有在我使用过时才会发生.addOnce not .add。

Answer 1

更新

我刚刚通过创建一个单独的函数来获得所需的效果。

function animateMainMenuButtons(tweens) {
var tweenDelay = 50;

tweens[0].start();
game.time.events.add(tweenDelay, function () {
    tweens[1].start();
}, this);
game.time.events.add(tweenDelay * 2, function () {
    tweens[2].start();
}, this);
game.time.events.add(tweenDelay * 3, function () {
    tweens[3].start();
}, this); }

但是我仍然喜欢关于原帖的任何意见，因为我似乎缺乏关于.onStart如何工作以及何时实际被解雇的某种信息。这很可能会在将来再次困扰我。

Answer 2

Phaser tweens并不意味着可以重复使用。您需要在每次需要使用它时创建补间。我遇到了同样的问题，并尝试通过tweeen.pendingDelete = false和exists()来取得成功。但我建议你不要这样做。

Answer 3

要进行简单的补间管理，请添加一个补间对象以调用

您可以在每次通话中add进行新的补间。这意味着data属性每次都是新鲜的。

这是我在扩展游戏对象（图像，Sprite等）的类中的方法

initTweens = () => {
    this.tweens = {
        scaleUp: () => this.scene.tweens.add({
            targets: this,
            scale: 2.4,
            duration: 100,
            ease: 'Circ',
        }),
        scaleDown: () => this.scene.tweens.add({
            targets: this,
            scale: 2,
            duration: 100,
            ease: 'Circ',
        }),
        playCard: () => this.scene.tweens.add({
            targets: this,
            x: this.scene.PlayMat.playMat.x,
            y: this.scene.PlayMat.playMat.y,
            duration: 300,
            ease: 'Circ',
        }),
        resetCard: () => this.scene.tweens.add({
            targets: this,
            x: this.initialX,
            y: this.initialY,
            duration: 300,
            ease: 'Circ',
            onStart: (ween, git) => {
                console.log('started reset');
            },
            onComplete: (ween, git) => {
                console.log('complete reset');
            },
        })
    }
}

确保在设置类属性后在构造函数中初始化此函数或创建方法

constructor(scene: Game, x, y, texture, id) {
        super(scene, x, y, texture);
        this.id = id;
        this.scene = scene;
        this.initialX = x;
        this.initialY = y;
        this.scale = 2
        this.setInteractive({ draggable: true });
        scene.physics.world.enable(this);
        this.initTweens() // this line

最后，您可以通过调用对象并触发函数来触发补间。像这样。

this.tweens.playCard();
// or
this.tweens.resetCard();

结论

现在，每次调用它们时，都会同时触发onStart和onComplete补间方法

Answer 4

已经很长时间了，但对于那些仍然感兴趣的人，我认为您可以使用 Phaser 的 3 补间时间线来按序列播放补间。阅读更多 here 并查看示例 here。

Phaser Tween.onStart只工作一次？

4 个答案:

要进行简单的补间管理，请添加一个补间对象以调用

结论