Остановка и удаление анимации

Библиотека anime.js предоставляет мощные средства для создания и управления анимациями. Помимо базового запуска анимации, ключевое значение имеет контроль над её жизненным циклом — возможность остановки, удаления или перезапуска. Это особенно важно при динамическом взаимодействии с пользователем или при необходимости синхронизации нескольких анимаций.

Остановка анимации

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

let animation = anime({
  targets: '.box',
  translateX: 250,
  duration: 2000,
  loop: true
});

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

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

Особенности использования .pause():

  • Сохраняется текущее состояние свойств (translateX, opacity и т.д.).
  • Анимация не удаляется и может быть перезапущена.
  • Работает для анимаций с любым количеством целей (targets).

Полная остановка и сброс состояния

Метод .restart() не только запускает анимацию заново, но и позволяет очистить текущее состояние, что важно для повторяемых эффектов:

let animation = anime({
  targets: '.box',
  translateX: 250,
  duration: 1000
});

animation.restart(); // сброс прогресса и перезапуск анимации

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

Удаление анимации

Anime.js не имеет прямого метода destroy, но для полной остановки анимации и удаления всех её влияний можно использовать комбинацию .pause() и сброса стилей через Jav * aScript:

let animation = anime({
  targets: '.box',
  translateX: 250,
  duration: 2000
});

// Остановка анимации
animation.pause();

// Сброс свойств объекта
animation.animatables.forEach(anim => {
  anim.target.style.transform = '';
});

Разбор подхода:

  • animation.animatables — массив объектов, содержащих ссылки на все элементы и их свойства.
  • Сброс стиля через style.transform = '' возвращает объект в исходное состояние.
  • Этот способ позволяет «удалить» анимацию без полного удаления HTML-элемента.

Остановка анимации с помощью событий

Anime.js поддерживает события жизненного цикла, которые позволяют выполнять действия при остановке или завершении анимации:

  • begin — вызывается в начале анимации
  • update — вызывается на каждом кадре
  • complete — вызывается по завершении анимации

Пример управления анимацией с помощью события update:

let animation = anime({
  targets: '.box',
  translateX: 500,
  duration: 5000,
  update: function(anim) {
    if (anim.progress > 50) {
      anim.pause();
    }
  }
});

В этом примере анимация автоматически останавливается, когда прогресс превышает 50%. Такой подход позволяет создавать условные и интерактивные анимации без внешнего таймера.

Удаление анимации из цикла

Для анимаций с loop: true управление остановкой особенно важно. Методы .pause() и .restart() позволяют корректно завершить или перезапустить цикл. Если необходимо полностью убрать анимацию и освободить ресурсы, рекомендуется:

  1. Вызвать .pause() для остановки всех кадров.
  2. Очистить все inline-стили, влияющие на анимированные свойства.
  3. Удалить ссылку на объект анимации, чтобы сборщик мусора мог освободить память.
let animation = anime({
  targets: '.box',
  translateX: 250,
  duration: 2000,
  loop: true
});

animation.pause();
animation.animatables.forEach(anim => anim.target.style.transform = '');
animation = null;

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

  • Для сложных интерфейсов лучше хранить все активные анимации в массиве, чтобы можно было остановить или удалить их централизованно.
  • Использование событий update и complete позволяет реализовать условные остановки без дополнительных таймеров.
  • Сброс стилей через style помогает избежать визуальных «артефактов» после остановки анимации.

Эти методы создают полный контроль над анимациями в anime.js, позволяя управлять их жизненным циклом от запуска до полной очистки, что критически важно для динамических веб-интерфейсов.

Оглавление