Событие onComplete

В библиотеке PixiJS событие onComplete играет ключевую роль при работе с анимациями, текстурами и асинхронными процессами. Оно позволяет выполнять действия после завершения определённого процесса, будь то загрузка ресурсов, проигрывание анимации или завершение твин-анимации.

Применение в загрузке ресурсов

В PixiJS загрузка текстур и других ресурсов осуществляется через объект Loader. Для выполнения действий после полной загрузки всех ресурсов используется событие onComplete.

Пример:

const loader = new PIXI.Loader();

loader.add('spriteTexture', 'images/sprite.png')
      .add('background', 'images/bg.jpg');

loader.load((loader, resources) => {
    console.log('Все ресурсы загружены');
    const sprite = new PIXI.Sprite(resources.spriteTexture.texture);
    app.stage.addChild(sprite);
});

Особенности:

  • loader.load принимает callback, который выполняется при завершении загрузки всех добавленных ресурсов.
  • resources содержит объект с загруженными ресурсами по ключам, указанным при добавлении.
  • Событие onComplete можно также подписывать через loader.onComplete.add(callback).

Пример с подпиской:

loader.onComplete.add(() => {
    console.log('Загрузка завершена');
});
loader.load();

Использование с PIXI.Ticker и анимациями

Для анимаций спрайтов или любого анимируемого объекта событие onComplete чаще всего применяется в связке с PIXI.AnimatedSprite. Этот объект позволяет воспроизводить последовательность текстур как анимацию.

Пример создания анимации:

const frames = [];
for (let i = 0; i < 10; i++) {
    frames.push(PIXI.Texture.from(`frame${i}.png`));
}

const animatedSprite = new PIXI.AnimatedSprite(frames);
animatedSprite.animationSpeed = 0.5;
animatedSprite.loop = false;

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

app.stage.addChild(animatedSprite);
animatedSprite.play();

Ключевые моменты:

  • loop = false — обязательно для однократного воспроизведения.
  • Событие onComplete срабатывает один раз после окончания анимации.
  • Можно повторно запускать анимацию и переназначать onComplete при необходимости.

Применение с твинами (gsap или кастомные твины)

Хотя PixiJS не включает встроенную систему твинов, часто используются библиотеки вроде GSAP для анимации свойств объектов. В таких случаях onComplete передается как параметр твина:

gsap.to(sprite, {
    x: 500,
    duration: 2,
    onComplete: () => {
        console.log('Твин-анимация завершена');
    }
});

Особенности:

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

Особенности работы и подводные камни

  1. Контекст выполнения В onComplete контекст (this) может отличаться в зависимости от того, как событие назначено. Для надёжной работы рекомендуется использовать стрелочные функции или явно привязывать контекст:

    animatedSprite.onCompl ete = () => this.doSomething();

  2. Многократное использование Если объект повторно запускается, onComplete будет срабатывать каждый раз, если это событие явно не удаляется:

    animatedSprite.onCompl ete = null; // отключение

  3. Асинхронные операции В случае загрузки ресурсов onComplete срабатывает после завершения всех асинхронных загрузок, включая ошибки. Для обработки ошибок существует отдельное событие onError.

Рекомендации по использованию

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

Интеграция с другими событиями

Часто onComplete комбинируется с другими событиями PixiJS:

  • onFrameChange — для отслеживания смены кадров анимации.
  • onLoop — для действий при каждом повторе цикла анимации.
  • onProgress — для отображения прогресса загрузки ресурсов.

Пример комбинирования:

animatedSprite.onFrameCha nge = (currentFrame) => {
    console.log('Текущий кадр:', currentFrame);
};
animatedSprite.onCompl ete = () => {
    console.log('Анимация полностью завершена');
};
animatedSprite.loop = false;
animatedSprite.play();

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

Оглавление