Блог

Я пытаюсь создать анимацию разлива бутылок, которая перебирает 5 разных бутылок, каждая бутылка расположена сбоку и имеет разное количество выливаемой жидкости. Я пытаюсь отобразить первую бутылку, а затем вторую через 60 мс, затем 3-ю через 60 мс, и так далее, и так далее. Мне нужно удалить предыдущую бутылку и добавить следующую бутылку в том же месте. Мне интересно, какой самый краткий способ сделать это, я пробовал использовать несколько функций setTimout, но в коде есть некоторые ошибки, и он совсем не краткий. Я исследовал PIXI.Таймер, но я изо всех сил пытаюсь понять, как установить 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)
 

Я понял это. Вместо использования галочки используйте PIXI.Анимированный спрайт, подобный следующему:

 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;
}