Цикличность и свойство loop

В библиотеке PixiJS работа с анимациями основана на системе текстур и спрайтов, где каждая анимация представлена объектом AnimatedSprite. Ключевым аспектом управления анимациями является возможность повторного воспроизведения, задаваемого через свойство loop.

Создание анимации с помощью AnimatedSprite

Анимация создается из массива текстур:

const textures = [
    PIXI.Texture.from('frame1.png'),
    PIXI.Texture.from('frame2.png'),
    PIXI.Texture.from('frame3.png')
];

const animatedSprite = new PIXI.AnimatedSprite(textures);

AnimatedSprite автоматически обладает набором методов и свойств для управления воспроизведением:

  • play() — запуск анимации;
  • stop() — остановка анимации;
  • gotoAndStop(frameNumber) — переход к конкретному кадру и остановка;
  • gotoAndPlay(frameNumber) — переход к конкретному кадру и воспроизведение.

Свойство loop

Свойство loop отвечает за цикличность анимации. Оно принимает булево значение:

animatedSprite.loop = true;  // анимация будет повторяться бесконечно
animatedSprite.loop = false; // анимация проиграется один раз и остановится

По умолчанию loop равен true. Если требуется, чтобы анимация проигрывалась только один раз, необходимо явно установить loop = false. Это особенно важно при создании анимаций событий, например, взрывов или действий персонажа.

События окончания анимации

При использовании loop = false удобно отслеживать момент завершения анимации через событие complete:

animatedSprite.onCompl ete = () => {
    console.log('Анимация завершена');
};

Альтернативно можно использовать метод once для подключения обработчика события:

animatedSprite.once('complete', () => {
    console.log('Анимация проиграна один раз');
});

Управление скоростью анимации

Скорость воспроизведения регулируется свойством animationSpeed:

animatedSprite.animationSpeed = 0.5; // половинная скорость
animatedSprite.animationSpeed = 2.0; // удвоенная скорость

Значение 1.0 соответствует стандартной частоте кадров анимации. Изменение скорости не влияет на цикличность — loop продолжает работать независимо от animationSpeed.

Примеры использования loop в различных сценариях

  1. Бесконечный фоновой эффект:
const textures = [PIXI.Texture.from('bg1.png'), PIXI.Texture.from('bg2.png')];
const backgroundAnimation = new PIXI.AnimatedSprite(textures);

backgroundAnimation.loop = true;
backgroundAnimation.animationSpeed = 0.2;
backgroundAnimation.play();
  1. Однократная анимация события:
const textures = [PIXI.Texture.from('explosion1.png'), PIXI.Texture.from('explosion2.png')];
const explosion = new PIXI.AnimatedSprite(textures);

explosion.loop = false;
explosion.animationSpeed = 0.8;

explosion.onCompl ete = () => {
    explosion.visible = false;
};
explosion.play();

Особенности поведения при смене текстур

Если текстуры анимации заменяются динамически, важно учитывать, что loop сохраняется за объектом AnimatedSprite:

animatedSprite.textures = [PIXI.Texture.from('new1.png'), PIXI.Texture.from('new2.png')];
animatedSprite.gotoAndPlay(0); // воспроизведение с начала с текущим значением loop

Это позволяет легко переключать анимационные состояния персонажей или объектов, сохраняя контролируемое поведение цикла.

Итоговые принципы работы loop

  • Управляет повторением анимации: true — бесконечно, false — однократно.
  • Независимо от скорости анимации (animationSpeed), цикличность сохраняется.
  • Позволяет связывать завершение анимации с обработчиками событий через onComplete или once('complete', ...).
  • Сохраняется при динамической смене текстур.
  • Используется для оптимизации игровых и визуальных эффектов: фоны, персонажи, события, интерфейсы.

Свойство loop является базовым инструментом для контроля анимаций в PixiJS, обеспечивая гибкость в создании как повторяющихся, так и однократных визуальных эффектов.

Оглавление