Методы контроля воспроизведения

В основе системы воспроизведения в mo.js лежит единый принцип: любой анимационный объект (Tween, Shape, Burst, Timeline) предоставляет унифицированный набор методов управления состоянием. Эти методы позволяют запускать, останавливать, перематывать и синхронизировать анимации без привязки к конкретному типу эффекта.

play()

Метод play() инициирует или возобновляет воспроизведение анимации с текущей позиции.

Ключевые особенности:

  • если анимация была остановлена, продолжает с последнего кадра
  • если анимация не запускалась, стартует с начала
  • может вызываться многократно без побочных эффектов
const tween = new mojs.Tween({
  duration: 1000,
  onUpdate: (p) => console.log(p)
});

tween.play();

play() часто используется в интерактивных сценариях, где анимация запускается по событию DOM, например клику или наведению.

pause()

Метод pause() фиксирует текущее состояние анимации без сброса прогресса.

Особенности поведения:

  • сохраняет текущий прогресс
  • не уничтожает внутренний таймер
  • позволяет возобновить выполнение через play()
tween.play();

setTimeout(() => {
  tween.pause();
}, 500);

pause() особенно полезен при построении интерфейсов с состоянием «hover hold» или при управлении несколькими анимациями одновременно.

stop()

Метод stop() полностью останавливает анимацию и возвращает её в начальное состояние.

Поведение:

  • сбрасывает прогресс в 0
  • отменяет текущий кадр
  • не удаляет объект
tween.stop();

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

replay()

Метод replay() представляет собой комбинацию stop() и play().

Логика работы:

  • принудительный сброс состояния
  • немедленный запуск с начала
tween.replay();

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

reset()

Метод reset() возвращает анимацию в начальную точку без запуска.

Отличие от stop():

  • не инициирует воспроизведение
  • только сбрасывает внутренний прогресс
tween.reset();

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

Управление прогрессом анимации

setProgress()

Метод setProgress() позволяет вручную установить позицию воспроизведения в диапазоне от 0 до 1.

tween.setProgress(0.5);

Это один из ключевых инструментов для:

  • синхронизации нескольких анимаций
  • создания скраббинг-интерфейсов
  • точного контроля состояния

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

  • не запускает анимацию автоматически
  • влияет на текущее визуальное состояние
  • может применяться как в состоянии play, так и pause

seek()

Метод seek(time) позволяет установить позицию анимации в миллисекундах относительно её длительности.

tween.seek(300);

В отличие от setProgress(), seek() работает с абсолютным временем.

Используется для:

  • временной навигации по анимации
  • реализации таймлайновых контроллеров
  • синхронизации с внешними таймкодами (например, аудио или видео)

Скорость воспроизведения

setSpeed()

Метод setSpeed() изменяет коэффициент скорости воспроизведения.

tween.setSpeed(2); // в 2 раза быстрее
tween.setSpeed(0.5); // в 2 раза медленнее

Поведение:

  • влияет на текущую и будущую анимацию
  • не сбрасывает прогресс
  • применяется ко всей цепочке в Timeline

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

  • адаптивные эффекты при взаимодействии пользователя
  • эффект замедления при наведении
  • ускоренная демонстрация состояний интерфейса

Методы повторного воспроизведения

playBackward()

Позволяет запустить анимацию в обратном направлении.

tween.playBackward();

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

  • прогресс уменьшается от текущего значения до 0
  • сохраняет кривые easing
  • работает не во всех конфигурациях одинаково предсказуемо при сложных Timeline

reverse()

Метод reverse() переключает направление воспроизведения.

tween.reverse();

Поведение:

  • если анимация шла вперёд — начинает идти назад
  • если назад — переключается вперёд
  • сохраняет текущее состояние прогресса

Используется для toggle-анимаций интерфейса: открытие/закрытие, появление/исчезновение.

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

isPlaying()

Метод isPlaying() возвращает логическое значение состояния.

if (tween.isPlaying()) {
  console.log('Анимация активна');
}

Позволяет:

  • избегать повторного запуска
  • синхронизировать несколько независимых анимаций
  • строить управляющие состояния интерфейса

Событийная модель управления

mo.js предоставляет набор событий, которые позволяют отслеживать жизненный цикл воспроизведения.

onStart

Вызывается при старте анимации.

new mojs.Tween({
  onStart: () => console.log('start')
});

onUpdate

Срабатывает на каждом кадре.

onUpdate: (progress) => {
  console.log(progress);
}

Используется для:

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

onComplete

Срабатывает при завершении анимации.

onComplete: () => console.log('done');

Контроль через Timeline

Timeline объединяет несколько анимаций и предоставляет централизованное управление.

Методы Timeline:

add()

Добавление анимации в последовательность.

const timeline = new mojs.Timeline();

timeline.add(tween1, tween2);

play / pause / stop

Поведение аналогично Tween, но применяется ко всей группе анимаций.

timeline.play();
timeline.pause();
timeline.stop();

setProgress()

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

timeline.setProgress(0.3);

Синхронизация и внешнее управление

mo.js позволяет привязывать управление воспроизведением к внешним источникам событий:

  • scroll-позиции
  • pointer events
  • requestAnimationFrame циклам
  • аудио/видео таймкодам

Пример синхронизации со скроллом:

window.addEventListener('scroll', () => {
  const progress = window.scrollY / document.body.scrollHeight;
  tween.setProgress(progress);
});

Комбинирование методов управления

В реальных сценариях методы управления редко используются изолированно. Чаще применяется комбинация:

  • pause() + setProgress() для интерактивного контроля
  • stop() + play() для полного перезапуска логики
  • reverse() + setSpeed() для адаптивных эффектов
  • Timeline + seek() для точной синхронизации сложных сцен
Оглавление