rerun() - повторный запуск

Метод rerun() в библиотеке mo.js предназначен для повторного воспроизведения анимации без необходимости заново создавать экземпляр анимационного объекта. Это особенно важно в сценариях, где требуется многократное воспроизведение одного и того же эффекта: при кликах, наведении, циклических взаимодействиях или реакциях на пользовательские события.

Назначение метода

После завершения анимации объект mo.js сохраняет своё конечное состояние. Без дополнительных действий повторный запуск невозможен, поскольку внутренняя временная шкала уже достигла конца. Метод rerun() выполняет следующие задачи:

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

Базовый пример использования

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

// первый запуск
circle.play();

// повторный запуск через 2 секунды
setTimeout(() => {
  circle.rerun();
}, 2000);

В этом примере:

  • play() инициирует первый запуск;
  • rerun() полностью перезапускает анимацию, как будто она только что создана.

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

Методы play() и rerun() выполняют разные роли:

Метод Поведение
play() Запускает анимацию с текущего состояния
rerun() Сбрасывает и запускает анимацию с начала

Если анимация уже завершена, play() не даст эффекта, тогда как rerun() гарантированно начнёт её заново.

Внутренний механизм работы

При вызове rerun() происходят следующие шаги:

  1. Сброс прогресса анимации (progress = 0)
  2. Повторная инициализация tween-значений
  3. Перезапуск таймлайна
  4. Применение начальных стилей к DOM или canvas

Это делает rerun() безопасным и предсказуемым способом повторного воспроизведения.

Использование в обработчиках событий

Наиболее частый сценарий — привязка к пользовательским действиям:

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

document.addEventListener('click', () => {
  burst.rerun();
});

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

Работа с несколькими анимациями

При использовании 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();

// повторный запуск
setTimeout(() => {
  timeline.rerun();
}, 1500);

rerun() применим не только к отдельным объектам, но и к таймлайнам.

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

Если параметры анимации изменяются после первого запуска, rerun() учитывает обновлённые значения:

const shape = new mojs.Shape({
  radius: { 0: 30 }
});

shape.play();

// изменение параметров
shape.tune({ radius: { 0: 60 } });

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

Метод tune() изменяет конфигурацию, а rerun() запускает уже обновлённую анимацию.

Частые ошибки

1. Использование play() вместо rerun()

shape.play(); // не сработает повторно после завершения

2. Создание новых объектов вместо повторного использования

// неэффективно
document.addEventListener('click', () => {
  new mojs.Shape({...}).play();
});

Правильнее:

const shape = new mojs.Shape({...});

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

Это снижает нагрузку на память и повышает производительность.

Повторные циклы и псевдолоопинг

rerun() можно использовать для ручной реализации циклов:

function loop() {
  shape.rerun();
  setTimeout(loop, 1000);
}

loop();

Хотя mo.js имеет встроенные механизмы repeat/yoyo, такой подход даёт больше контроля над логикой.

Асинхронные сценарии

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

async function animateSequence() {
  shape1.rerun();
  await delay(500);
  shape2.rerun();
}

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

Повторное использование объектов через rerun():

  • уменьшает количество создаваемых экземпляров;
  • снижает нагрузку на GC (сборщик мусора);
  • обеспечивает более плавную анимацию при частых вызовах.

Особенно критично в интерактивных интерфейсах и играх.

Особенности при работе с stagger-анимациями

При использовании массивов или stagger-эффектов:

const shapes = new mojs.Stagger(mojs.Shape)({
  delay: 'stagger(0, 100)',
  x: { 0: 200 }
});

// повторный запуск всей группы
shapes.rerun();

rerun() перезапускает всю последовательность с учётом задержек.

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

При анимации DOM-элементов важно учитывать, что rerun():

  • возвращает стили к исходным значениям;
  • повторно применяет трансформации;
  • может конфликтовать с внешними CSS-анимациями.

Рекомендуется избегать одновременного управления стилями из разных источников.

Управление через callbacks

rerun() можно комбинировать с колбэками:

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

shape.rerun();

Каждый вызов rerun() заново инициирует жизненный цикл, включая onStart, onUpdate, onComplete.

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

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

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

  • полный сброс состояния анимации;
  • повторный запуск без пересоздания объекта;
  • совместимость с Shape, Burst, Timeline, Stagger;
  • высокая производительность при частом использовании.

Метод rerun() является базовым инструментом для управления жизненным циклом анимации в mo.js и обеспечивает гибкость при построении интерактивных интерфейсов.

Оглавление