运行 PIXI.JS 中的动画循环

Question

我正在尝试创建一个倒瓶动画，循环播放 5 个不同的瓶子，每个瓶子都是横向的，倒出的液体量不同。我正在尝试显示第一个瓶子，然后在 60 毫秒后显示第二个，然后在 60 毫秒后显示第三个，依此类推。我需要移除前一瓶并将下一瓶添加到完全相同的位置。我想知道最简洁的方法是什么，我尝试过几个 setTimout 函数，但代码有一些错误而且一点也不简洁。我已经研究了 PIXI.Timer 但我很难理解如何设置 5 个不同的精灵并循环遍历它们。如果您有任何想法或方向，请告诉我。我将 post 我的函数与下面使用的 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;
}

运行 PIXI.JS 中的动画循环

Running an animated loop in PIXI.JS

javascript

pixi.js