pause() - пауза

Метод pause() используется для временной остановки анимации в библиотеке mo.js без сброса её текущего состояния. Это означает, что после вызова паузы анимация «замораживается» на текущем кадре и может быть продолжена с того же места при помощи метода play().

Общая концепция паузы анимации

Внутри mo.js каждая анимация управляется внутренним таймлайном. При вызове pause() происходит:

  • остановка обновления кадров
  • сохранение текущего прогресса анимации
  • прекращение выполнения easing-функций
  • фиксация всех визуальных параметров (позиция, масштаб, прозрачность и т.д.)

В отличие от метода stop(), который полностью завершает анимацию и сбрасывает её состояние, pause() сохраняет контекст выполнения.

Синтаксис

animation.pause();

Где animation — экземпляр анимационного объекта mo.js (например, mo.Tween, mo.Timeline, mo.Burst, mo.Shape и др.).

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

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

// запуск анимации
circle.play();

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

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

  • анимация начинается с помощью play()
  • через 1000 мс вызывается pause()
  • круг останавливается в текущем состоянии (примерно на середине роста)

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

После остановки можно продолжить анимацию:

circle.play();

mo.js автоматически продолжит воспроизведение с момента, на котором была вызвана пауза.

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

Если pause() вызывается:

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

Работа с Timeline

Метод pause() особенно важен при работе с mojs.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();

// пауза всех анимаций
timeline.pause();

При вызове pause() у Timeline:

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

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

Если у анимации задана задержка (delay):

const shape = new mojs.Shape({
  delay: 1000,
  duration: 2000
});

При вызове pause() во время задержки:

  • таймер задержки также приостанавливается
  • после возобновления (play()) отсчёт продолжается с того же момента

Взаимодействие с repeat и yoyo

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

repeat: 3,
yoyo: true

метод pause():

  • фиксирует текущую итерацию
  • сохраняет направление анимации (вперёд или назад)
  • при продолжении не сбрасывает цикл

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

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

document.addEventListener('click', () => {
  circle.pause();
});

или:

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    circle.pause();
  } else {
    circle.play();
  }
});

Такая практика позволяет:

  • экономить ресурсы
  • улучшать UX
  • синхронизировать анимации с состоянием страницы

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

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

1. При наведении (hover-пауза):

element.addEventListener('mouseenter', () => circle.pause());
element.addEventListener('mouseleave', () => circle.play());

2. В медиаплеерах и UI-компонентах:

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

3. При переходах между страницами:

  • остановка анимаций перед уничтожением DOM

Отличие от других методов управления

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

Ключевое отличие pause() — сохранение текущего состояния.

Внутренние особенности реализации

  • mo.js использует requestAnimationFrame
  • при вызове pause() отключается цикл обновления
  • сохраняется текущее время (currentTime)
  • easing-функции не пересчитываются

Это обеспечивает точное восстановление анимации.

Потенциальные ошибки и ограничения

1. Потеря ссылки на объект

let anim = new mojs.Shape(...);
anim.play();
anim = null;

// pause() уже невозможен

2. Конфликт с внешними таймерами

Если используются setTimeout или setInterval, важно учитывать, что:

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

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

При работе с промисами:

setTimeout(() => circle.pause(), 500);
setTimeout(() => circle.play(), 600);

возможны неожиданные эффекты при наложении событий.

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

  • использовать pause() вместо stop(), если требуется продолжение
  • комбинировать с play() для создания интерактивности
  • применять в Timeline для централизованного управления
  • учитывать состояние анимации перед вызовом метода

Сценарий с контролем состояния

if (circle._isPlaying) {
  circle.pause();
} else {
  circle.play();
}

Хотя _isPlaying — внутреннее свойство, его иногда используют для простого контроля состояния.

Итоговое поведение

Метод pause():

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