补间动画所针对的对象没有向后移动，我该如何解决？

Question

我是 Phaser 3 的新手。这是我改编自 a Phaser 3 official example

的代码

class BootScene extends Phaser.Scene {
  constructor() {
    super();
    console.log(this);
  }

  preload() {
    this.load.spritesheet('brawler', 'https://raw.githubusercontent.com/photonstorm/phaser3-examples/master/public/assets/animations/brawler48x48.png', {
      frameWidth: 48,
      frameHeight: 48
    });
  }

  create() {
    this.player = this.physics.add.sprite(50, 50, 'brawler', 30).setOrigin(0).setScale(2);

    this.player2 = this.physics.add.sprite(50, 50, 'brawler', 30).setOrigin(0).setScale(2);

    var tween = this.tweens.add({
      targets: this.player2,
      x: 350,
      ease: 'Power1',
      duration: 1000,
      yoyo: true,
      repeat: 0,
    });
    //tween.stop();

    let btn = this.add.text(150, 200, 'click me');
    btn.setInteractive();
    btn.on('pointerdown', () => {
      console.log('btn');
      // this.player.play('raise');
      tween.play();
    }, this);

  }
}

var config = {
  width: 400,
  height: 300,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: {
        y: 0
      },
      debug: false // set to true to view zones
    }
  },
  backgroundColor: 0x000000,
  scene: [BootScene]
}

var game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

一切正常：当游戏完成加载时，player2 向右移动并向后移动。

点击按钮同样有效。

但是，如果我取消注释以下行并单击 btn

//tween.stop();

player2 没有回到他离开的确切位置。

我该如何解决？

Answer 1

你说得对，这是一个奇怪的错误。我在文档中找不到任何解释此行为的内容。

你可以solve/workaround这个问题，设置补间的开始和结束位置x: { from: 50, to: 350 }。 here a link to the documenation

class BootScene extends Phaser.Scene {
  constructor() {
    super();
    console.log(this);
  }

  preload() {
    this.load.spritesheet('brawler', 'https://raw.githubusercontent.com/photonstorm/phaser3-examples/master/public/assets/animations/brawler48x48.png', {
      frameWidth: 48,
      frameHeight: 48
    });
  }

  create() {
    this.player = this.physics.add.sprite(50, 50, 'brawler', 30).setOrigin(0).setScale(2);

    this.player2 = this.physics.add.sprite(50, 50, 'brawler', 30).setOrigin(0).setScale(2);

    var tween = this.tweens.add({
      targets: this.player2,
      x: { from: 50, to: 350 },
      ease: 'Power1',
      duration: 1000,
      yoyo: true,
      repeat: 0,
    });
    tween.stop();

    let btn = this.add.text(150, 200, 'click me');
    btn.setInteractive();
    btn.on('pointerdown', () => {
      console.log('btn');
      // this.player.play('raise');
      tween.play();
    }, this);

  }
}

var config = {
  width: 400,
  height: 300,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: {
        y: 0
      },
      debug: false // set to true to view zones
    }
  },
  backgroundColor: 0x000000,
  scene: [BootScene]
}

var game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

备选方案： 您可以创建暂停的补间动画：paused:true,，您不需要停止它，也应该可以工作。

class BootScene extends Phaser.Scene {
      constructor() {
        super();
        console.log(this);
      }

      preload() {
        this.load.spritesheet('brawler', 'https://raw.githubusercontent.com/photonstorm/phaser3-examples/master/public/assets/animations/brawler48x48.png', {
          frameWidth: 48,
          frameHeight: 48
        });
      }

      create() {
        this.player = this.physics.add.sprite(50, 50, 'brawler', 30).setOrigin(0).setScale(2);

        this.player2 = this.physics.add.sprite(50, 50, 'brawler', 30).setOrigin(0).setScale(2);

        var tween = this.tweens.add({
          targets: this.player2,
          x: 350 ,
          ease: 'Power1',
          duration: 1000,
          yoyo: true,
          repeat: 0,
          paused:true
        });

        let btn = this.add.text(150, 200, 'click me');
        btn.setInteractive();
        btn.on('pointerdown', () => {
          console.log('btn');
          tween.play();
        }, this);

      }
    }

    var config = {
      width: 400,
      height: 300,
      physics: {
        default: 'arcade',
        arcade: {
          gravity: {
            y: 0
          },
          debug: false // set to true to view zones
        }
      },
      backgroundColor: 0x000000,
      scene: [BootScene]
    }

    var game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

补间动画所针对的对象没有向后移动，我该如何解决？

The object that tweens animation targeted doesn't move back, how do I fix it?

javascript

phaser-framework