在 PIXI.JS 中运行动画循环

Question

我正在尝试创建一个瓶子倒出动画，循环遍历 5 个不同的瓶子，每个瓶子都是侧面的，并且倒出的液体量不同。我试图显示第一个瓶子，然后在 60 毫秒后显示第二个瓶子，然后在 60 毫秒后显示第三个瓶子，依此类推。我需要取出前一个瓶子并将下一个瓶子添加到完全相同的位置。我想知道最简洁的方法是什么，我尝试过几个 setTimout 函数，但代码有一些错误并且根本不简洁。我研究了 PIXI.Timer，但很难理解如何设置 5 个不同的精灵并循环它们。如果您有任何想法或方向，请告诉我。我将使用下面使用的 setTimout 发布我的函数：

    setTimeout(() => {

        let pour1Texture = new PIXI.Texture.from(require('@/assets/items/bottle/pouring/pouring bottle1.png'))

        let pour1 = new PIXI.Sprite.from(pour1Texture)

        sprites.push(pour1)

        pour1.position.x = 438;

        pour1.position.y = -40;

        labBenchComponent.pixiApp.stage.addChild(

            pour1

          );

    },1000)

    setTimeout(() => {

        labBenchComponent.pixiApp.stage.removeChild(sprites.pop())

        const pour2Texture = new PIXI.Texture.from(require('@/assets/items/bottle/pouring/pouring bottle2.png'))

        const pour2 = new PIXI.Sprite.from(pour2Texture)

        pour2.position.x = 438;

        pour2.position.y = -10;

        sprites.push(pour2)

        labBenchComponent.pixiApp.stage.addChild(

            pour2

          );

    }, 1000)

    setTimeout(() => {

        labBenchComponent.pixiApp.stage.removeChild(sprites.pop())

        const pour3Texture = new PIXI.Texture.from(require('@/assets/items/bottle/pouring/pouring bottle2.png'))

        const pour3 = new PIXI.Sprite.from(pour3Texture)

        pour3.position.x = 438;

        pour3.position.y = 10;

        sprites.push(pour3)

        labBenchComponent.pixiApp.stage.addChild(

            pour3

          );

    }, 1000)

Answer 1

我想到了。不要使用刻度，而是使用 PIXI.AnimatedSprite，如下所示：import * as PIXI from 'pixi.js-legacy';export default function pourBottle() {&nbsp; &nbsp; let textureArray = [];&nbsp; &nbsp; for (let i = 0; i < 5; i++)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; let texture = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; texture: PIXI.Texture.from(require(`@/assets/items/bottle/pouring/pouring bottle${i+1}.png`)),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; time: 100,&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; textureArray.push(texture);&nbsp; &nbsp; };&nbsp; &nbsp; let animatedSprite = new PIXI.AnimatedSprite(textureArray);&nbsp; &nbsp; return animatedSprite;}