Isyoyo - реверсивное воспроизведение

В анимационной модели mo.js поведение объектов строится вокруг понятий tween и timeline, где каждый tween представляет собой интерполяцию состояния во времени. Одним из ключевых механизмов управления динамикой является реверсивное воспроизведение, позволяющее анимации автоматически возвращаться в исходное состояние без ручного дублирования ключевых кадров.

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

Реверсивное воспроизведение в mo.js реализуется через параметр isYoyo. Его задача — запустить анимацию в прямом направлении, а затем выполнить её обратное воспроизведение, создавая эффект «качания» или возврата.

const tween = new mojs.Tween({
  duration: 1000,
  isYoyo: true
});

tween.play();

При включённом isYoyo движение проходит полный цикл:

  • первый этап: интерполяция от начального состояния к конечному
  • второй этап: обратная интерполяция от конечного состояния к начальному

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

Поведение значений при реверсе

Внутри tween значения свойств проходят через функцию интерполяции дважды. Если в прямом направлении параметр изменяется линейно от 0 до 1, то при обратном ходе используется инверсия этого диапазона.

Ключевой момент заключается в том, что обратный прогон не является повторным запуском анимации, а представляет собой продолжение того же временного отрезка с изменённой функцией прогресса.

Связь isYoyo и repeat

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

const tween = new mojs.Tween({
  duration: 800,
  isYoyo: true,
  repeat: 3
});

В этом случае формируется цикл:

  • прямое движение
  • обратное движение
  • повтор всего цикла указанное количество раз

Важно учитывать, что repeat увеличивает общее количество фаз, каждая из которых включает полный цикл forward + backward.

Отличие от направления animation direction

В mo.js существует параметр direction, который управляет направлением воспроизведения:

  • normal — стандартное воспроизведение
  • reverse — запуск с конца
  • alternate — чередование направлений

На первый взгляд alternate похож на isYoyo, однако различие заключается в уровне управления:

  • isYoyo работает внутри одного tween, добавляя обратный ход после завершения
  • alternate управляет направлением между повторениями или фазами воспроизведения

Поведение easing при обратном воспроизведении

Функции сглаживания (easing) при реверсе инвертируются. Если в прямом направлении используется ease-out, то в обратном ходе он фактически превращается в ease-in.

const tween = new mojs.Tween({
  duration: 1200,
  isYoyo: true,
  easing: 'ease.out'
});

График скорости при этом сохраняет симметрию, но направление изменения ускорения становится зеркальным.

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

В timeline реверсивное воспроизведение позволяет строить сложные последовательности без дублирования элементов.

const circle = new mojs.Shape({
  shape: 'circle',
  radius: 30,
  fill: 'blue',
  duration: 500,
  isYoyo: true
});

const timeline = new mojs.Timeline();
timeline.add(circle);

timeline.play();

При работе в составе timeline каждый tween сохраняет собственную логику реверса, не влияя на соседние элементы, если явно не задано общее управление направлением.

Состояния временной шкалы при yoyo

При включённом реверсе временная шкала фактически удлиняется вдвое. Если duration равен t, то полный цикл становится равен 2t.

Внутреннее распределение времени:

  • 0 → t: прямое воспроизведение
  • t → 2t: обратное воспроизведение

При этом состояние объекта в момент времени t соответствует максимальному значению анимации.

Практическое поведение при прерывании

Если анимация прерывается в середине цикла, mo.js фиксирует текущее состояние без ожидания завершения обратного хода. Это важно при динамическом управлении интерфейсом, где возможны частые перезапуски tween.

Прерывание не вызывает автоматического «докручивания» обратно — оно просто останавливает интерполяцию на текущем значении.

Комбинация с трансформациями

Реверсивное воспроизведение особенно эффективно при работе с трансформациями:

const square = new mojs.Shape({
  shape: 'rect',
  x: {0: 200},
  rotate: {0: 180},
  scale: {1: 2},
  duration: 900,
  isYoyo: true
});

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

Частые ошибки при использовании

Одной из распространённых ошибок является одновременное ожидание поведения isYoyo и ручного возврата значений. Это приводит к конфликту логики:

  • попытка вручную сбросить состояние
  • параллельный автоматический возврат tween

Также ошибочно предполагать, что isYoyo работает как бесконечный цикл. Без repeat анимация выполняет только один полный forward-backward проход.

Особенности синхронизации нескольких tween

При одновременном использовании нескольких анимаций с isYoyo важно учитывать фазовую синхронизацию. Даже при одинаковом duration их обратные фазы могут расходиться из-за различий easing или задержек startDelay.

Для синхронного поведения требуется:

  • одинаковый duration
  • идентичный easing
  • отсутствие случайных задержек
  • единый запуск через timeline

Поведение памяти и перезапусков

mo.js оптимизирует повторное использование tween-объектов, однако при частом создании новых экземпляров с isYoyo в динамических интерфейсах возможна нагрузка на GC из-за удвоенного числа фаз интерполяции.

Рациональнее переиспользовать существующие tween или объединять их в timeline, чем создавать новые экземпляры при каждом запуске.

Взаимодействие с физикой анимации

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

  • отскок
  • колебания
  • возврат в точку равновесия

При этом isYoyo задаёт базовую симметрию движения, а физические эффекты достигаются комбинацией с easing и изменением амплитуды трансформаций.

Оглавление