【问题标题】：Phaser Tween.onStart works only 1 time?Phaser Tween.onStart 只工作 1 次？
【发布时间】：2015-08-20 10:36:49
【问题描述】：

我为我的游戏的主菜单创建了一些按钮，我想添加一个漂亮的动画，让这些按钮在一个短暂的延迟后移出屏幕。

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

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();它做我想要的...... 1次。我第二次做 tempTweens[0].start();它只移动第一个按钮，而不移动其他按钮。

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

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

它只向控制台写入 'onStart failed' 1 次。

知道每次开始第一个补间时如何使 .onStart 工作吗？

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

【问题讨论】：

标签： tween phaser-framework

【解决方案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 如何工作以及何时实际触发的信息。这很可能会在未来再次困扰我。

【讨论】：

【解决方案2】：

Phaser 补间不能重复使用。每次需要使用补间时都需要创建补间。我遇到了同样的问题，并尝试通过tween._hasStarted = false 和tweeen.pendingDelete = false 成功破解它。但我建议你不要这样做。

【讨论】：

没想到过了这么久才收到回复。已经在从事不同的项目。但我很乐意接受你的回答来结束这个问题，如果你提供了一个可靠的来源，补间确实只能使用一次。
是的，这个答案需要一个来源，我找不到任何关于不重用 Tweens 的信息。但是，这确实解决了我的问题。但是每次添加一个新的补间感觉有点不对劲。

【解决方案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 补间方法时触发它们

【讨论】：

【解决方案4】：

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

【讨论】：