Управление памятью

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

Анимационные объекты и их жизненный цикл

Каждая анимация в anime.js создаётся функцией anime() и возвращает анимационный объект. Этот объект содержит ключевые свойства:

  • paused — состояние паузы анимации.
  • completed — флаг завершения.
  • currentTime — текущее время анимации.
  • Методы управления: play(), pause(), restart(), seek(), remove().

Важно: объекты анимации продолжают удерживаться в памяти, если на них существуют ссылки. После завершения анимации ссылки на объект должны быть удалены, иначе они будут препятствовать сборке мусора.

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

// После завершения анимации
animation = null; // позволяет сборщику мусора освободить память

Отмена анимаций и освобождение ресурсов

Для остановки анимации и предотвращения утечек памяти используется метод remove(). Он удаляет все анимационные эффекты с указанных элементов и очищает внутренние таймеры:

anime.remove('.box'); // остановит все анимации на элементах с классом 'box'

Если анимации создаются динамически, важно вызывать remove() перед удалением DOM-элементов:

let dynamicBox = document.createElement('div');
document.body.appendChild(dynamicBox);

let animation = anime({
  targets: dynamicBox,
  translateY: 300,
  duration: 2000
});

// Перед удалением элемента из DOM
anime.remove(dynamicBox);
dynamicBox.remove();

Тайминги и циклы: управление памятью при повторяющихся анимациях

Анимации с loop: true или direction: 'alternate' создают непрерывные циклы, которые могут удерживать ссылки на DOM и внутренние объекты. Если необходимо остановить такую анимацию:

let loopAnimation = anime({
  targets: '.circle',
  translateX: 200,
  loop: true,
  duration: 1500
});

// Остановить цикл и очистить память
loopAnimation.pause();
loopAnimation = null;

Анимации с динамическими целями

При анимации динамически создаваемых элементов, следует следить за тем, чтобы ссылки на элементы не удерживались в глобальных массивах или замыканиях:

const elements = [];
for (let i = 0; i < 100; i++) {
  let el = document.createElement('div');
  document.body.appendChild(el);
  elements.push(el);

  anime({
    targets: el,
    opacity: [0, 1],
    duration: 500
  });
}

// Очистка ссылок
elements.forEach(el => anime.remove(el));
elements.length = 0;

Управление колбэками анимаций

Anime.js позволяет использовать колбэки begin, update, complete. Необходимо избегать удержания больших структур данных внутри колбэков, так как они сохраняют ссылки до завершения анимации:

anime({
  targets: '.box',
  translateX: 300,
  duration: 1000,
  complete: function(anim) {
    // Ссылка на anim может быть удалена после завершения
    anim = null;
  }
});

Использование finished Promise

Свойство finished возвращает промис, который разрешается после завершения анимации. После завершения промис можно использовать для очистки ресурсов:

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

anim.finished.then(() => {
  anime.remove('.box');
  anim = null;
});

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

  • Хранить анимации в переменных только при необходимости управления ими.
  • Всегда вызывать remove() для динамических элементов перед удалением из DOM.
  • Очищать циклические анимации (loop: true) при смене сцены или компонента.
  • Минимизировать хранение больших объектов внутри колбэков.
  • Использовать промисы finished для безопасной очистки памяти после завершения анимаций.

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

Оглавление