stop() - остановка

Метод stop() используется для немедленной остановки анимации, созданной с помощью объектов библиотеки mo.js. В отличие от методов, управляющих паузой или повтором, stop() полностью прерывает текущий процесс анимации и фиксирует её состояние на момент вызова.

Назначение и поведение

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

  • анимация останавливается мгновенно
  • внутренний таймлайн больше не обновляется
  • текущее визуальное состояние элемента сохраняется
  • дальнейший вызов play() запускает анимацию заново, а не продолжает её

Это принципиально отличает stop() от метода pause().

Синтаксис

animation.stop();

Где animation — экземпляр одного из классов mo.js:

  • mojs.Shape
  • mojs.Tween
  • mojs.Timeline
  • mojs.Burst и другие

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

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

circle.play();

// остановка через 1 секунду
setTimeout(() => {
  circle.stop();
}, 1000);

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

  • анимация должна длиться 2 секунды
  • через 1 секунду вызывается stop()
  • круг остаётся в промежуточном состоянии (примерно на половине анимации)

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

Метод Поведение
pause() Временно останавливает анимацию с возможностью продолжения
stop() Полностью прекращает анимацию без сохранения прогресса

Пример различия:

circle.pause(); // можно продолжить с того же места
circle.play();  // продолжит

circle.stop();  // сбрасывает выполнение
circle.play();  // начнётся заново

Влияние на таймлайн

Если анимация является частью mojs.Timeline, вызов stop():

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

Пример:

const tween1 = new mojs.Tween({ duration: 1000 });
const tween2 = new mojs.Tween({ duration: 2000 });

const timeline = new mojs.Timeline()
  .add(tween1, tween2);

timeline.play();

// остановка всего таймлайна
timeline.stop();

Сброс состояния

Важно понимать:

  • stop() не возвращает объект в начальное состояние
  • визуальное состояние остаётся «замороженным»

Для полного сброса используется:

animation.stop();
animation.replay(); // или animation.play() с reset-параметрами

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

Повторный вызов stop():

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

Использование в интерактивных сценариях

Метод часто применяется при:

1. Управлении пользовательскими действиями

button.addEventListener('click', () => {
  animation.stop();
});

2. Переключении состояний интерфейса

При смене экранов или компонентов:

function hideAnimation() {
  animation.stop();
}

3. Предотвращении наложения анимаций

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

Гарантирует, что новая анимация начнётся без наложения предыдущей.

Особенности работы с Burst и Shape

Для сложных объектов:

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

burst.play();
burst.stop();
  • все дочерние элементы (children) также прекращают анимацию
  • состояние частиц фиксируется в момент остановки

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

Часто используется в связке:

stop() + play()

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

Перезапуск анимации

stop() + setProgress()

animation.stop();
animation.setProgress(0.5);

Фиксация анимации на определённой стадии

stop() + replay()

animation.stop();
animation.replay();

Полный перезапуск с начального состояния

Влияние на производительность

Метод stop():

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

Особенно важно при большом количестве анимаций.

Типичные ошибки

1. Ожидание продолжения после stop()

animation.stop();
animation.play(); // начнётся сначала, а не продолжится

2. Отсутствие сброса состояния

animation.stop();
// элемент остаётся в промежуточном состоянии

Решение:

animation.stop();
animation.setProgress(0);

3. Использование вместо pause()

Если требуется временная остановка — stop() не подходит.

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

element.addEventListener('mouseenter', () => {
  animation.stop();
});

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

  • мгновенного отключения эффектов
  • повышения отзывчивости интерфейса

Практический сценарий: защита от повторного запуска

function safePlay(anim) {
  anim.stop();
  anim.play();
}

Позволяет избежать конфликтов при частых вызовах.

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

Для анимаций с repeat: Infinity:

const anim = new mojs.Tween({
  duration: 1000,
  repeat: Infinity
});

anim.play();

// остановка бесконечного цикла
anim.stop();

stop() полностью завершает цикл независимо от текущей итерации.

Особенности внутренней реализации

Метод:

  • останавливает внутренний requestAnimationFrame
  • фиксирует текущее значение прогресса
  • отключает дальнейшие обновления

Когда использовать stop()

  • при необходимости жёсткой остановки
  • при переключении интерфейсов
  • при уничтожении компонентов
  • при предотвращении конфликтов анимаций

Когда не использовать

  • для временной паузы (используется pause())
  • для мягкого завершения (лучше управлять через easing и duration)

Краткая схема поведения

Действие Результат
stop() мгновенная остановка
play() после запуск с начала
состояние сохраняется визуально
прогресс не продолжается

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

Оглавление