在 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() {

    let textureArray = [];

    for (let i = 0; i < 5; i++)

    {

        let texture = {

            texture: PIXI.Texture.from(require(`@/assets/items/bottle/pouring/pouring bottle${i+1}.png`)),

            time: 100,

        };

        textureArray.push(texture);

    };

    let animatedSprite = new PIXI.AnimatedSprite(textureArray);

    return animatedSprite;

}