Хуки для anime.js

Anime.js предоставляет мощный механизм хуков, позволяющий управлять анимацией на каждом этапе её выполнения. Хуки — это функции обратного вызова, которые вызываются в определённые моменты жизненного цикла анимации. Они дают возможность отслеживать прогресс, реагировать на события и создавать сложные динамические эффекты.

В anime.js основные хуки делятся на четыре категории:

  1. Начало и завершение анимации
  2. Обновление анимации в процессе выполнения
  3. Обратные вызовы для каждого отдельного элемента
  4. Встроенные функции для циклических анимаций и временных событий

begin и complete

begin вызывается один раз в момент старта анимации. Это идеальное место для инициализации состояния, логирования или запуска сопутствующих эффектов.

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  begin: function(anim) {
    console.log('Анимация началась', anim);
  }
});

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

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  complete: function(anim) {
    console.log('Анимация завершена', anim);
  }
});

Ключевое преимущество этих хуков — управление логикой на старте и конце анимации без необходимости постоянной проверки состояния.

update — отслеживание прогресса

Хук update вызывается на каждом кадре анимации. Функция получает объект анимации, из которого можно извлекать прогресс и текущие значения свойств.

anime({
  targets: '.box',
  translateX: 250,
  duration: 2000,
  update: function(anim) {
    console.log('Процент выполнения:', anim.progress);
  }
});

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

  • Позволяет синхронизировать изменения нескольких элементов.
  • Используется для динамического изменения CSS, canvas-свойств или взаимодействия с WebGL.
  • Может быть ресурсоёмким при большом количестве объектов, поэтому рекомендуется оптимизация через requestAnimationFrame.

changeBegin и changeComplete

Эти хуки срабатывают при изменении каждого свойства, а не всей анимации целиком:

  • changeBegin — перед началом изменения конкретного свойства.
  • changeComplete — после завершения изменения конкретного свойства.

Пример:

anime({
  targets: '.box',
  translateX: [0, 250],
  scale: [1, 1.5],
  duration: 1500,
  changeBegin: function(anim) {
    console.log('Начало изменения свойства', anim.animatables[0].target);
  },
  changeComplete: function(anim) {
    console.log('Свойство изменено', anim.animatables[0].target);
  }
});

Эти хуки полезны для создания каскадных или сложных последовательных эффектов, где важно контролировать каждый шаг изменения.

loopBegin и loopComplete

Анимации с циклическим повтором (loop) позволяют повторять движение несколько раз. Хуки для циклов:

  • loopBegin — вызывается в начале каждого цикла.
  • loopComplete — вызывается после завершения каждого цикла.

Пример с бесконечным циклом:

anime({
  targets: '.box',
  rotate: 360,
  duration: 1000,
  loop: true,
  loopBegin: function(anim) {
    console.log('Начало цикла', anim.currentLoop);
  },
  loopComplete: function(anim) {
    console.log('Цикл завершен', anim.currentLoop);
  }
});

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

change — наблюдение за отдельными анимируемыми элементами

Каждый объект, анимируемый в anime.js, представлен как animatable. Хук change вызывается при изменении каждого такого объекта на каждом кадре. Это расширение update, но с фокусом на отдельные элементы.

anime({
  targets: ['.box1', '.box2'],
  translateX: 300,
  duration: 2000,
  change: function(anim) {
    anim.animatables.forEach(item => {
      console.log(item.target, item.currentValue);
    });
  }
});

Используется для:

  • Сложных анимаций с разными элементами.
  • Контроля прогресса каждого объекта отдельно.
  • Создания реактивных визуальных эффектов.

Практические советы по работе с хуками

  1. Оптимизация update и change Частые вычисления внутри этих хуков могут снизить FPS. Лучше ограничивать операции тяжелыми вычислениями или применять requestAnimationFrame.

  2. Комбинирование хуков Часто одновременно используются begin, update и complete для полного контроля над анимацией.

  3. Взаимодействие с DOM Через хуки удобно управлять классами, атрибутами и inline-стилями элементов, синхронизируя с анимацией.

  4. Динамическая настройка Хуки позволяют менять параметры анимации «на лету», например, увеличивать скорость при каждом цикле или менять направление движения.

Итоговая структура хуков

Хук Событие Частота вызова
begin Начало анимации 1 раз
complete Завершение анимации 1 раз
update Каждый кадр анимации На каждом шаге
changeBegin Перед изменением свойства На каждом изменении
changeComplete После изменения свойства На каждом изменении
loopBegin Начало цикла На каждом цикле
loopComplete Завершение цикла На каждом цикле
change Изменение отдельного анимируемого элемента На каждом кадре каждого элемента

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

Оглавление