Параметры анимации: repeat, repeatDelay, yoyo, delay

Система анимации в Phaser позволяет гибко управлять воспроизведением кадров с помощью набора параметров. Среди наиболее важных — repeat, repeatDelay, yoyo и delay. Эти свойства определяют поведение анимации во времени: количество повторов, паузы между циклами и характер изменения направления кадров.

Анимации могут быть созданы через this.anims.create() и применены к спрайту с помощью sprite.play(). Все рассматриваемые параметры задаются на этапе создания анимации либо при её запуске.

Параметр repeat

Назначение

repeat определяет, сколько раз анимация будет повторена после первого проигрывания.

По умолчанию значение равно 0, что означает:

  • анимация проигрывается один раз;
  • дополнительных повторов не выполняется.

Принцип работы

Значение repeat трактуется как количество дополнительных повторов, а не общее число циклов.

repeat Общее количество проигрываний
0 1 раз
1 2 раза
2 3 раза
-1 бесконечно

Бесконечная анимация

Если указать:

repeat: -1

анимация будет воспроизводиться циклически до явной остановки методом stop() или запуском другой анимации.

Это типичный сценарий для:

  • анимации ходьбы персонажа,
  • вращения объектов,
  • фоновых эффектов.

Пример

this.anims.create({
    key: 'walk',
    frames: this.anims.generateFrameNumbers('hero', { start: 0, end: 5 }),
    frameRate: 10,
    repeat: -1
});

В данном случае цикл кадров 0–5 будет воспроизводиться непрерывно.

Параметр repeatDelay

Назначение

repeatDelay задаёт задержку (в миллисекундах) перед началом следующего цикла анимации.

Важно понимать: задержка применяется только между повторами, а не перед первым воспроизведением.

Поведение

  1. Первый цикл запускается сразу (если не задан delay).
  2. После его завершения происходит пауза repeatDelay.
  3. Затем начинается следующий цикл.

Пример

this.anims.create({
    key: 'blink',
    frames: this.anims.generateFrameNumbers('eye', { start: 0, end: 2 }),
    frameRate: 8,
    repeat: 3,
    repeatDelay: 1000
});

Поведение:

  • проигрывание кадров 0–2,
  • пауза 1000 мс,
  • повтор,
  • снова пауза 1000 мс,
  • и так далее до завершения всех повторов.

Типовые сценарии использования

  • мигание с интервалами,
  • периодическая анимация эффектов,
  • циклические события с паузами.

Без repeatDelay повторы следуют друг за другом без временного промежутка.

Параметр yoyo

Назначение

yoyo определяет, будет ли анимация воспроизводиться в обратном направлении после достижения последнего кадра.

Тип значения: boolean.

  • false (по умолчанию) — обычный цикл от первого к последнему кадру.
  • true — после завершения прямого прохода происходит обратный проход.

Механика работы

При yoyo: true последовательность кадров выглядит так:

0 → 1 → 2 → 3 → 2 → 1 → 0

Таким образом создаётся эффект возврата без скачка к первому кадру.

Взаимодействие с repeat

Важно учитывать: один «повтор» включает в себя полный цикл туда и обратно.

Пример:

this.anims.create({
    key: 'pulse',
    frames: this.anims.generateFrameNumbers('orb', { start: 0, end: 3 }),
    frameRate: 6,
    repeat: 2,
    yoyo: true
});

Поведение:

  • прямой проход,
  • обратный проход,
  • повтор этого цикла ещё два раза.

Практическое применение

  • анимация дыхания персонажа,
  • пульсация света,
  • раскачивание объектов,
  • плавные циклические эффекты.

Использование yoyo избавляет от необходимости создавать отдельную анимацию для обратного движения.

Параметр delay

Назначение

delay задаёт задержку перед первым запуском анимации.

Единица измерения — миллисекунды.

В отличие от repeatDelay, эта пауза применяется только один раз — перед началом воспроизведения.

Пример

this.anims.create({
    key: 'explode',
    frames: this.anims.generateFrameNumbers('explosion', { start: 0, end: 7 }),
    frameRate: 12,
    repeat: 0,
    delay: 500
});

После вызова sprite.play('explode'):

  • система ожидает 500 мс,
  • затем запускается анимация,
  • проигрывается один раз.

Особенности

  • delay не влияет на интервалы между повторениями.
  • при повторном запуске анимации через play() задержка применяется снова.
  • при бесконечном повторе delay действует только перед первым циклом.

Совместное использование параметров

Пример сложной конфигурации

this.anims.create({
    key: 'signal',
    frames: this.anims.generateFrameNumbers('light', { start: 0, end: 4 }),
    frameRate: 10,
    delay: 1000,
    repeat: 3,
    repeatDelay: 2000,
    yoyo: true
});

Последовательность выполнения:

  1. Пауза 1000 мс.
  2. Прямой проход кадров.
  3. Обратный проход (из-за yoyo).
  4. Пауза 2000 мс.
  5. Повтор пункта 2–4 ещё три раза.

Временная схема

delay
[прямо → обратно]
repeatDelay
[прямо → обратно]
repeatDelay
...

Такой подход позволяет реализовать сложные анимационные паттерны без использования таймеров и дополнительных обработчиков событий.

Взаимодействие с управлением спрайтом

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

sprite.play('key');

Остановить можно через:

sprite.stop();

При остановке:

  • текущий цикл прерывается,
  • запланированные repeatDelay не выполняются,
  • новое воспроизведение начнётся заново с учётом delay.

Поведение при смене анимаций

Если во время работы одной анимации запускается другая:

  • предыдущая немедленно прекращается;
  • её повторы и задержки отменяются;
  • новая анимация начинает отсчёт собственных delay.

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

Производительность и логика

Параметры repeat, repeatDelay, yoyo и delay обрабатываются внутренним менеджером анимаций Phaser и не требуют ручного контроля времени через setTimeout или scene.time.addEvent.

Использование встроенных механизмов:

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

Ключевые различия параметров

Параметр Назначение
delay Пауза перед первым запуском
repeat Количество дополнительных циклов
repeatDelay Пауза между повторениями
yoyo Обратное воспроизведение кадров

Правильное понимание различий между delay и repeatDelay позволяет точно контролировать временную структуру анимации.

Гибкое комбинирование этих параметров формирует практически любой циклический сценарий: от простых повторов до сложных временных паттернов с паузами и реверсом кадров.

Оглавление