play() - запуск анимации

Метод play() является основным инструментом управления воспроизведением анимации в библиотеке mo.js. Он инициирует проигрывание заранее сконфигурированного анимационного объекта, будь то Shape, Burst, Timeline или любая другая сущность, поддерживающая временную шкалу.

Общий принцип работы

Каждый анимационный объект в mo.js содержит внутренний механизм тайминга, основанный на параметрах:

  • duration — длительность анимации
  • delay — задержка перед стартом
  • repeat — количество повторений
  • yoyo — обратное проигрывание

Метод play() активирует этот механизм, переводя объект из состояния покоя в состояние воспроизведения.

Простейший пример:

const circle = new mojs.Shape({
  shape: 'circle',
  radius: { 0: 50 },
  duration: 1000
});

circle.play();

После вызова play() анимация начинается немедленно (с учётом delay, если он задан).

Поведение при повторном вызове

Если анимация уже воспроизводится, повторный вызов play() не запускает её заново, а игнорируется. Это важно учитывать при управлении состоянием:

circle.play();
circle.play(); // не перезапустит анимацию

Для перезапуска используется связка с методом replay() или предварительный stop().

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

mo.js оперирует несколькими внутренними состояниями:

  • idle — анимация не запускалась
  • playing — анимация воспроизводится
  • paused — анимация приостановлена
  • stopped — анимация остановлена

Метод play() переводит объект:

  • из idle → playing
  • из paused → playing (продолжение с текущего места)
  • из stopped → playing (с начала)

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

При работе с несколькими анимациями удобнее использовать Timeline, который позволяет синхронизировать несколько эффектов:

const shape1 = new mojs.Shape({ x: { 0: 100 } });
const shape2 = new mojs.Shape({ y: { 0: 100 } });

const timeline = new mojs.Timeline();
timeline.add(shape1, shape2);

timeline.play();

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

Учет задержки (delay)

Метод play() не игнорирует параметр delay. Если он задан, фактический старт анимации откладывается:

const shape = new mojs.Shape({
  radius: { 0: 40 },
  delay: 500,
  duration: 1000
});

shape.play(); // визуально начнётся через 500 мс

Это позволяет точно выстраивать последовательности без дополнительной логики.

Комбинирование с другими методами

play() + pause()

shape.play();
shape.pause();
shape.play(); // продолжение с паузы

play() + stop()

shape.play();
shape.stop();
shape.play(); // начнёт заново

play() + replay()

shape.play();
shape.replay(); // гарантированный перезапуск

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

Метод play() часто используется в обработчиках событий:

document.addEventListener('click', () => {
  shape.play();
});

Или, например, при наведении:

element.addEventListener('mouseenter', () => shape.play());

Это открывает возможности для интерактивных интерфейсов.

Работа с isPlaying

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

if (!shape.isPlaying()) {
  shape.play();
}

Метод isPlaying() возвращает true, если анимация активна.

Особенности при работе с Burst

Анимации типа Burst (взрывы частиц) часто запускаются именно через play():

const burst = new mojs.Burst({
  radius: { 0: 100 },
  count: 10
});

burst.play();

Каждый вызов play() создаёт новый визуальный эффект, если объект не остановлен.

Поведение при repeat и yoyo

Если заданы параметры:

repeat: 2,
yoyo: true

то play() инициирует полный цикл:

  1. Прямое движение
  2. Обратное (yoyo)
  3. Повтор

Метод управляет всей последовательностью автоматически.

Влияние easing-функций

play() запускает анимацию с учётом функции сглаживания (easing):

const shape = new mojs.Shape({
  x: { 0: 200 },
  easing: 'cubic.out',
  duration: 1000
});

shape.play();

Без вызова play() easing не применяется, так как анимация не активна.

Использование в цепочках

Метод play() можно комбинировать с then() для последовательных анимаций:

shape
  .then({ x: 100 })
  .then({ y: 100 });

shape.play();

play() запускает всю цепочку анимаций.

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

  • Множественные вызовы play() без необходимости могут создавать лишнюю нагрузку
  • Лучше переиспользовать объекты, чем создавать новые при каждом запуске
  • Управление через Timeline снижает количество отдельных вызовов

Практический паттерн: ленивый запуск

Иногда анимация создаётся заранее, но запускается позже:

const anim = new mojs.Shape({
  opacity: { 0: 1 },
  duration: 500
});

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

Это позволяет отделить конфигурацию от момента исполнения.

Асинхронное управление

Хотя play() сам по себе не возвращает Promise, можно отслеживать окончание через onComplete:

const shape = new mojs.Shape({
  duration: 1000,
  onComplete() {
    console.log('Анимация завершена');
  }
});

shape.play();

Ошибки и распространённые проблемы

1. Анимация не запускается

Причины:

  • элемент не добавлен в DOM
  • нулевая длительность (duration: 0)
  • объект уже в состоянии playing

2. Повторный вызов не работает

Использовать replay() вместо play().

3. Не учитывается задержка

delay работает только при первом запуске или после stop().

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

Метод Поведение
play() Запуск или продолжение
pause() Приостановка
stop() Остановка и сброс
replay() Полный перезапуск

Внутренняя механика

Под капотом play():

  • активирует requestAnimationFrame
  • инициирует внутренний таймер
  • рассчитывает прогресс (progress)
  • обновляет свойства на каждом кадре

Это делает его ключевым элементом жизненного цикла любой анимации в mo.js.

Расширенные сценарии

Управление несколькими экземплярами

const shapes = Array.from({ length: 5 }, () =>
  new mojs.Shape({ radius: { 0: 30 } })
);

shapes.forEach(shape => shape.play());

Запуск с разной задержкой

shapes.forEach((shape, i) => {
  shape.delay = i * 100;
  shape.play();
});

Поведение в цепочках взаимодействий

play() часто становится частью более сложной логики:

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

Итоговое понимание роли

Метод play() — это точка входа в выполнение анимации. Он не изменяет конфигурацию, не пересоздаёт объект, а лишь активирует уже описанное поведение. Эффективное использование этого метода требует понимания состояний анимации, взаимодействия с другими методами и грамотной организации временной логики.

Оглавление