Цепочки твинов: TweenChain

В библиотеке Phaser tween (анимация свойств объектов) является мощным инструментом для динамического управления объектами на сцене. TweenChain — это концепция последовательного объединения нескольких твинов таким образом, чтобы каждый следующий запускался после завершения предыдущего, формируя цепочку анимаций. Она позволяет создавать сложные анимационные сценарии без необходимости вручную отслеживать события завершения каждого твина.

В Phaser 3 tween создаётся через метод this.tweens.add и управляется объектом конфигурации:

this.tweens.add({
    targets: sprite,
    x: 400,
    duration: 1000,
    ease: 'Power2'
});

Создание цепочки твинов

Цепочку можно реализовать двумя способами: через функцию обратного вызова onComplete или с помощью Timeline — встроенного механизма Phaser для последовательных анимаций.

Использование onComplete

Каждый твин в цепочке запускается после завершения предыдущего:

this.tweens.add({
    targets: sprite,
    x: 400,
    duration: 1000,
    ease: 'Power2',
    onComplete: () => {
        this.tweens.add({
            targets: sprite,
            y: 300,
            duration: 800,
            ease: 'Power1'
        });
    }
});

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

  • onComplete вызывается после завершения текущей анимации.
  • Цепочка строится вручную, что позволяет гибко управлять логикой.

Использование Timeline

Timeline — более структурированный способ, который автоматически управляет порядком твинов:

const timeline = this.tweens.createTimeline();

timeline.add({
    targets: sprite,
    x: 400,
    duration: 1000,
    ease: 'Power2'
});

timeline.add({
    targets: sprite,
    y: 300,
    duration: 800,
    ease: 'Power1'
});

timeline.play();

Преимущества Timeline:

  • Управление последовательностью твинов через один объект.
  • Возможность задавать повторы (repeat) и обратное воспроизведение (yoyo) для всей цепочки.
  • Поддержка меток (labels) для точного позиционирования начала твинов внутри цепочки.

Конфигурация твинов в цепочке

Каждый твин в цепочке может иметь следующие свойства:

  • targets — объекты, к которым применяется анимация.
  • duration — продолжительность анимации в миллисекундах.
  • delay — задержка перед запуском твина.
  • ease — функция сглаживания анимации (например, Linear, Power1, Bounce).
  • onStart, onUpdate, onComplete — колбэки для управления событиями твина.

В Timeline можно комбинировать твины с различными эффектами, используя offset:

timeline.add({
    targets: sprite,
    alpha: 0,
    duration: 500,
    ease: 'Linear',
    offset: '-=200'
});

offset позволяет запускать твины с перекрытием, создавая эффекты параллельных анимаций внутри цепочки.

Повторение и yoyo

Для сложных анимационных сцен часто требуется повторение цепочки или возврат к исходному состоянию:

timeline.setLoop(2); // повтор цепочки 2 раза
timeline.setYoyo(true); // обратное воспроизведение каждого твина после завершения

Это особенно полезно для интерактивных элементов, эффектов персонажей и повторяющихся анимаций.

Практические приёмы

  1. Комбинирование свойств: можно анимировать несколько свойств одновременно.
timeline.add({
    targets: sprite,
    x: 400,
    y: 300,
    scale: 1.5,
    duration: 1000,
    ease: 'Power2'
});

  1. Метки для синхронизации: timeline.add({ ... , offset: 'label1+=500' }) позволяет запускать твины относительно меток.

  2. События на уровне Timeline:

timeline.setCallback('onComplete', () => console.log('Цепочка завершена'));

  1. Управление скоростью: timeline.timeScale = 2 ускоряет воспроизведение всех твинов в цепочке в 2 раза.

  2. Использование повторов отдельных твинов: можно задавать repeat для конкретного твина, не влияя на всю цепочку.

Практическая структура TweenChain

Оптимальная структура для сложной цепочки выглядит так:

const timeline = this.tweens.createTimeline();

timeline.add({ targets: sprite, x: 400, duration: 500 });
timeline.add({ targets: sprite, y: 200, duration: 700 });
timeline.add({ targets: sprite, scale: 1.5, duration: 300 });
timeline.add({ targets: sprite, alpha: 0, duration: 400 });

timeline.setLoop(1);
timeline.setYoyo(true);
timeline.play();

Эта структура обеспечивает:

  • Чистый и читаемый код.
  • Легкое добавление и удаление анимаций.
  • Контроль над повторением и обратным воспроизведением.

Особенности производительности

  • Использование Timeline предпочтительнее, чем каскадное использование onComplete, для сложных сцен с большим количеством твинов.
  • Анимации Phaser используют GPU-ускорение при работе с WebGL, что повышает плавность.
  • При работе с большим числом объектов рекомендуется минимизировать одновременные твины, чтобы избежать падения FPS.

Заключение по концепции TweenChain

TweenChain в Phaser предоставляет гибкий механизм создания последовательных и комбинированных анимаций. Использование Timeline упрощает управление сложными цепочками и улучшает читаемость кода, а продуманная конфигурация твинов позволяет реализовать динамические и визуально привлекательные сцены с минимальной нагрузкой на производительность.

Оглавление