Остановка и пауза

В библиотеке SVG.js каждая анимация создается с помощью метода .animate(), который возвращает объект анимации. Для управления жизненным циклом анимации используются методы stop(), pause() и play(). Понимание их различий критически важно для реализации интерактивных анимаций.

Метод stop()

Метод stop() полностью завершает текущую анимацию. После вызова stop() анимация больше не продолжает изменять свойства объекта. Синтаксис прост:

let rect = draw.rect(100, 100).fill('#f06');
let animation = rect.animate(2000).move(300, 0);

// Остановить анимацию
animation.stop();

Особенности stop():

  • Останавливает анимацию немедленно, оставляя элемент в текущем состоянии.
  • Не позволяет продолжить анимацию с места остановки.
  • Используется, когда необходимо прервать анимацию без возможности возобновления.

Метод pause()

Метод pause() временно приостанавливает анимацию, сохраняя её текущее состояние. После паузы анимацию можно возобновить с помощью play().

let circle = draw.circle(80).fill('#0f9');
let anim = circle.animate(3000, '<>').move(400, 0);

// Приостановка через 1 секунду
setTimeout(() => anim.pause(), 1000);

// Возобновление через 2 секунды
setTimeout(() => anim.play(), 3000);

Ключевые моменты работы pause():

  • Сохраняет текущее время анимации и состояние свойств.
  • Позволяет создавать интерактивные интерфейсы с возможностью «заморозки» анимаций.
  • Можно использовать совместно с таймерами или событиями пользователя для управления визуальными эффектами.

Метод play()

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

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

Особенности:

  • Если анимация не была приостановлена, вызов play() не имеет эффекта.
  • Можно сочетать с loop() для циклических анимаций, создавая эффект бесконечного воспроизведения с паузами.

Комбинированное использование

Для сложных анимационных сцен удобно комбинировать pause(), play() и stop(). Пример — создание анимации, которая останавливается при наведении и возобновляется при уходе курсора:

let rect = draw.rect(150, 100).fill('#06f');
let anim = rect.animate(5000).move(400, 0);

rect.on('mouseenter', () => anim.pause());
rect.on('mouseleave', () => anim.play());

Примечания:

  • События DOM полностью совместимы с анимациями SVG.js.
  • pause() и play() могут быть вызваны многократно без создания новых объектов анимации.

Состояние анимации

Объект анимации хранит внутренние свойства, позволяющие проверять её состояние:

  • animation.stopped — true, если анимация была остановлена stop().
  • animation.paused — true, если анимация в паузе.
  • animation.finished — true, когда анимация завершена естественным образом.

Пример проверки состояния:

if (!anim.paused && !anim.stopped) {
  anim.pause();
}

Практические советы

  1. Не создавать новые анимации при каждом вызове pause/play — лучше хранить объект анимации.
  2. Сохранять ссылки на анимации для возможности их контроля.
  3. Для циклических анимаций с остановкой на определённом кадре использовать комбинацию loop() и pause().

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

Оглавление