Complete callback

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

Синтаксис complete

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  complete: function(anim) {
    console.log('Анимация завершена!', anim);
  }
});
  • targets — элементы DOM или объекты, к которым применяется анимация.
  • translateX — свойство, которое анимируется.
  • duration — длительность анимации в миллисекундах.
  • complete — функция, вызываемая после полного завершения анимации. В неё передаётся объект анимации anim, содержащий информацию о текущем состоянии и прогрессе.

Аргумент функции complete

Аргумент anim предоставляет доступ к следующим ключевым свойствам:

  • anim.animatables — массив всех объектов, на которые распространяется анимация.
  • anim.completed — логическое значение, указывающее, завершилась ли анимация.
  • anim.progress — прогресс анимации в процентах (0–100).
  • anim.duration — длительность анимации в миллисекундах.
  • anim.reversed — true, если анимация воспроизводится в обратном порядке.

Использование этих свойств позволяет динамически управлять поведением элементов после окончания анимации.

Примеры практического применения

Запуск новой анимации после завершения первой

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  complete: function() {
    anime({
      targets: '.box',
      translateY: 100,
      duration: 500
    });
  }
});

Здесь complete служит точкой синхронизации для цепочки анимаций. После завершения первой анимации запускается вторая.

Изменение стилей после окончания анимации

anime({
  targets: '.circle',
  scale: 2,
  duration: 800,
  complete: function(anim) {
    anim.animatables.forEach(item => {
      item.target.style.backgroundColor = 'red';
    });
  }
});

Можно изменять любые CSS-свойства элементов после завершения анимации, используя массив animatables.

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

complete можно применять и к анимационным таймлайнам, чтобы отслеживать момент завершения всей последовательности:

let tl = anime.timeline({
  duration: 500,
  easing: 'easeInOutQuad',
  complete: function() {
    console.log('Все анимации в таймлайне завершены');
  }
});

tl.add({
  targets: '.box1',
  translateX: 200
}).add({
  targets: '.box2',
  translateY: 150
});
  • Функция complete для таймлайна срабатывает после выполнения всех анимаций, даже если они идут последовательно.
  • Для отдельных элементов в таймлайне также можно указывать собственные complete callback.

Отличие complete от update и begin

  • begin — вызывается один раз в начале анимации.
  • update — вызывается на каждом кадре анимации, подходит для динамического изменения состояния.
  • complete — вызывается один раз после полного завершения анимации. Она не зависит от промежуточных кадров, что делает её идеальной для логики завершения или запуска следующих шагов.

Советы по использованию

  1. Цепочки анимаций: complete удобно использовать для последовательного выполнения нескольких анимаций без таймеров.
  2. Изменение стилей: после завершения анимации можно задавать финальные значения CSS для элементов.
  3. Контроль состояния: проверка anim.completed позволяет убедиться, что анимация действительно дошла до конца.
  4. Оптимизация: избегать сложной логики внутри complete, если требуется точная синхронизация, лучше использовать таймлайн.

Обработка нескольких элементов

anime({
  targets: '.box',
  translateX: 300,
  duration: 1200,
  complete: function(anim) {
    anim.animatables.forEach(el => {
      el.target.style.border = '2px solid blue';
    });
  }
});

Даже если анимация применяется к группе элементов, complete срабатывает один раз, после окончания всех анимаций для всех объектов. Массив anim.animatables позволяет работать с каждым элементом индивидуально.

Итоговые свойства и рекомендации

  • complete — точка синхронизации после анимации.
  • Работает с одиночными анимациями и таймлайнами.
  • Позволяет запускать новые анимации, менять стили и управлять состоянием элементов.
  • Использование anim даёт доступ к информации о прогрессе и целевых объектах.
  • Не путать с update, который вызывается на каждом кадре.

Эффективное применение complete делает анимации гибкими, управляемыми и предсказуемыми.

Оглавление