Методы play, pause, stop

В Motion One управление жизненным циклом анимации строится вокруг объекта Animation, который возвращается при вызове функций animate() или timeline(). Этот объект предоставляет набор методов, позволяющих динамически контролировать выполнение анимации после её создания.

Основные методы управления состоянием анимации:

  • play() — запускает или возобновляет анимацию
  • pause() — приостанавливает выполнение
  • stop() — полностью останавливает и сбрасывает анимацию

Эти методы работают как с одиночными анимациями, так и с последовательностями в таймлайне.

play() — запуск и возобновление анимации

Метод play() используется для старта анимации либо продолжения её выполнения после паузы.

Поведение метода

  • Если анимация создана, но ещё не запускалась — play() инициирует выполнение.
  • Если анимация была поставлена на паузу — play() продолжает её с текущего прогресса.
  • Если анимация уже завершена, поведение зависит от конфигурации repeat.

Базовый пример

import { animate } from "motion";

const animation = animate(
  ".box",
  { x: 300, opacity: 0.5 },
  { duration: 2 }
);

animation.play();

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

Возобновление после паузы

const animation = animate(".box", { x: 500 }, { duration: 5 });

animation.pause();

// позже
animation.play();

Особенности поведения play()

Повторный вызов

Многократный вызов play() не создаёт новых анимаций и не сбрасывает состояние:

animation.play();
animation.play();
animation.play();

Анимация продолжит выполнение без перезапуска.

Работа с finished

Если анимация завершена, повторный play() не гарантирует повторный запуск без repeat:

const animation = animate(".box", { x: 100 }, { duration: 1, repeat: 0 });

pause() — остановка без сброса состояния

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

Поведение метода

  • Останавливает обновление кадров
  • Сохраняет текущую позицию во времени
  • Позволяет продолжить выполнение с того же места

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

const animation = animate(".box", { x: 400 }, { duration: 4 });

setTimeout(() => {
  animation.pause();
}, 1000);

После вызова pause() элемент остаётся в текущем состоянии трансформации.

Возобновление после pause()

animation.pause();

setTimeout(() => {
  animation.play();
}, 2000);

Состояние не сбрасывается, прогресс сохраняется внутри Animation.

Особенности pause()

Не обнуляет прогресс

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

Не влияет на настройки

Скорость, easing и другие параметры остаются неизменными.

stop() — полная остановка и сброс

Метод stop() полностью прекращает выполнение анимации и возвращает элемент в начальное состояние (или в состояние, определённое логикой библиотеки).

Поведение метода

  • Прекращает анимационный цикл
  • Сбрасывает прогресс
  • Освобождает ресурсы анимации
  • Делает объект неактивным для дальнейшего управления без пересоздания

Пример

const animation = animate(".box", { x: 600 }, { duration: 3 });

setTimeout(() => {
  animation.stop();
}, 1000);

После вызова stop() элемент возвращается к исходным стилям.

Отличие от pause()

Метод Состояние анимации Возможность продолжения
pause сохраняется да
stop сбрасывается нет (нужно создать заново)

Поведение после stop()

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

animation.stop();
animation.play(); // не всегда ожидаемое поведение

В большинстве случаев анимацию нужно создавать заново:

animate(".box", { x: 600 }, { duration: 3 });

Сравнение жизненных сценариев использования

Управление через пользовательские события

const animation = animate(".box", { x: 300 }, { duration: 2 });

buttonStart.addEventListener("click", () => animation.play());
buttonPause.addEventListener("click", () => animation.pause());
buttonStop.addEventListener("click", () => animation.stop());

Переключение состояний (toggle behavior)

let isRunning = true;

toggleButton.addEventListener("click", () => {
  if (isRunning) {
    animation.pause();
  } else {
    animation.play();
  }

  isRunning = !isRunning;
});

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

При использовании timeline() методы работают аналогично, но влияют на всю последовательность анимаций.

import { timeline } from "motion";

const sequence = timeline([
  [".box", { x: 200 }, { duration: 1 }],
  [".box", { opacity: 0 }, { duration: 1 }]
]);

sequence.pause();
sequence.play();
sequence.stop();

Особенности таймлайна

  • pause() фиксирует текущее положение в последовательности
  • play() продолжает выполнение с текущего шага
  • stop() сбрасывает весь таймлайн в начало

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

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

// неэффективно
button.addEventListener("click", () => {
  animate(".box", { x: 200 });
});

Правильнее:

const animation = animate(".box", { x: 200 });

button.addEventListener("click", () => animation.play());

Ожидание повторного запуска после stop()

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

animation.stop();
animation.play(); // поведение может быть некорректным

Рекомендуется пересоздание экземпляра.

Потеря контроля состояния

При отсутствии хранения ссылки на Animation управление методами становится невозможным:

animate(".box", { x: 300 });

// нет доступа к pause/stop/play

Поведение в асинхронных сценариях

Использование с задержками

const animation = animate(".box", { x: 500 }, { duration: 5 });

setTimeout(() => animation.pause(), 1000);
setTimeout(() => animation.play(), 3000);
setTimeout(() => animation.stop(), 5000);

Сложные сценарии переключения

async function runSequence() {
  const animation = animate(".box", { x: 400 }, { duration: 4 });

  await new Promise(r => setTimeout(r, 1500));
  animation.pause();

  await new Promise(r => setTimeout(r, 1000));
  animation.play();

  await new Promise(r => setTimeout(r, 1000));
  animation.stop();
}

Состояния анимации под управлением методов

Анимация в Motion One проходит через логические состояния:

  • активна (playing)
  • приостановлена (paused)
  • завершена (finished)
  • остановлена (stopped)

Методы play, pause, stop напрямую управляют переходами между этими состояниями, определяя поведение времени, прогресса и повторного запуска.

Оглавление