Параметры твина: duration, delay, ease, repeat, yoyo

В библиотеке Phaser анимации и плавные изменения свойств объектов создаются с помощью твинов (tweens). Твин — это механизм, который позволяет изменять значение свойства объекта от начального до конечного состояния за заданный промежуток времени с возможностью настройки задержки, повторений и кривой интерполяции. Ключевыми параметрами твина являются duration, delay, ease, repeat и yoyo.

duration — продолжительность анимации

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

Пример использования:

this.tweens.add({
    targets: player,
    x: 500,
    duration: 2000
});

В этом примере объект player будет перемещаться по оси X до координаты 500 за 2 секунды.

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

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

delay — задержка перед запуском

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

Пример:

this.tweens.add({
    targets: enemy,
    alpha: 0,
    duration: 1000,
    delay: 500
});

Здесь объект enemy начнет уменьшать прозрачность через 0,5 секунды после вызова твина.

Примечания:

  • Задержка применяется только один раз перед стартом.
  • Можно комбинировать с repeat для создания циклических пауз.

ease — функция интерполяции

Параметр ease определяет кривую изменения значения свойства, влияя на то, как объект будет ускоряться и замедляться во время твина.

Часто используемые значения:

  • 'Linear' — линейная анимация без ускорений.
  • 'Power1', 'Power2', 'Power3' — экспоненциальные ускорения.
  • 'Bounce' — имитация подпрыгивания.
  • 'Elastic' — эффект пружины.

Пример:

this.tweens.add({
    targets: ball,
    y: 400,
    duration: 1000,
    ease: 'Bounce'
});

Объект ball опустится вниз с эффектом подпрыгивания при касании конечной точки.

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

  • Phaser позволяет использовать функции в стиле 'Power2.easeInOut' для более гибкой настройки.
  • Можно комбинировать несколько твинов с разными функциями easing для сложной анимации.

repeat — количество повторов

Параметр repeat определяет сколько раз твин повторится после первого прохождения. Значение -1 означает бесконечный цикл.

Пример:

this.tweens.add({
    targets: star,
    scale: 1.5,
    duration: 500,
    yoyo: true,
    repeat: 3
});

Здесь объект star увеличится до 1.5, затем уменьшится (из-за yoyo: true) и повторит цикл 3 раза.

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

  • Повторение начинается сразу после завершения текущего цикла.
  • Можно комбинировать с delay для создания пауз между повторениями.

yoyo — обратное воспроизведение

Параметр yoyo включает обратное воспроизведение твина, возвращая объект к исходному состоянию после достижения конечной точки.

Пример:

this.tweens.add({
    targets: platform,
    x: 300,
    duration: 1000,
    yoyo: true
});

Платформа переместится вправо до X = 300, а затем вернется в исходное положение.

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

  • yoyo работает совместно с repeat. Например, repeat: 2, yoyo: true даст два полных цикла туда-обратно.
  • Можно использовать для плавных анимаций объектов, таких как качающиеся платформы или мигающие элементы.

Комбинация параметров для сложных анимаций

Все параметры твина могут комбинироваться для создания динамичных эффектов. Пример комплексного твина:

this.tweens.add({
    targets: enemy,
    x: 600,
    y: 300,
    scale: 1.2,
    alpha: 0.5,
    duration: 1500,
    delay: 200,
    ease: 'Power2.easeInOut',
    yoyo: true,
    repeat: 4
});

В этом примере объект enemy:

  • перемещается по X и Y,
  • увеличивает размер и становится полупрозрачным,
  • использует плавное ускорение и замедление,
  • возвращается в исходное состояние после каждой итерации,
  • повторяет цикл 4 раза с небольшой задержкой перед стартом.

Такой подход позволяет создавать богатые визуальные эффекты, управляя каждым аспектом движения и поведения объектов.

Понимание и правильное использование duration, delay, ease, repeat и yoyo позволяет строить плавные, реалистичные анимации в Phaser, делая игровой процесс более живым и динамичным.

Оглавление