Контекст и параметры callback-функций

В библиотеке anime.js ключевую роль играют callback-функции, которые позволяют отслеживать прогресс анимации и управлять поведением элементов в динамике. Для эффективного использования важно понимать, какой контекст (this) доступен внутри callback и какие параметры передаются автоматически.

Основные callback-функции

Anime.js предоставляет следующие стандартные callback-функции:

  • begin — вызывается один раз в начале анимации.
  • update — вызывается каждый кадр анимации, позволяет отслеживать текущие значения.
  • complete — вызывается после завершения анимации.
  • loopBegin / loopComplete — вызываются при начале и завершении цикла анимации, если она зациклена.
  • changeBegin / changeComplete — срабатывают при старте и завершении изменения отдельного свойства.

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

anime({
  targets: '.box',
  translateX: 250,
  duration: 2000,
  begin: function(anim) {
    console.log('Анимация началась', anim);
  },
  update: function(anim) {
    console.log('Текущий прогресс', anim.progress);
  },
  complete: function(anim) {
    console.log('Анимация завершена');
  }
});

Контекст this в callback

Внутри callback-функций контекст (this) всегда указывает на объект конфигурации анимации. Это позволяет получить доступ к целям анимации и другим свойствам анимации:

anime({
  targets: '.box',
  rotate: 360,
  duration: 1000,
  update: function() {
    console.log(this.targets); // Массив элементов, к которым применяется анимация
  }
});

Важно учитывать, что при использовании стрелочных функций контекст this будет унаследован от внешней области видимости, а не от anime.js:

anime({
  targets: '.box',
  translateY: 100,
  duration: 800,
  update: (anim) => {
    console.log(this); // Не объект анимации, а внешний контекст
  }
});

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

Параметры callback-функций

Каждый callback получает один или несколько аргументов. Наиболее часто используется объект анимации anim, который содержит ключевые свойства:

  • anim.progress — текущий прогресс в процентах (0–100).
  • anim.currentTime — текущее время анимации в миллисекундах.
  • anim.remaining — оставшееся время до завершения анимации.
  • anim.reversed — флаг, показывающий, воспроизводится ли анимация в обратном направлении.
  • anim.completed — количество завершённых циклов анимации.
  • anim.direction — направление анимации (normal или reverse).
  • anim.animatables — массив объектов, представляющих каждый анимируемый элемент и его свойства.

Пример использования этих параметров:

anime({
  targets: '.circle',
  scale: [1, 2],
  duration: 1500,
  easing: 'easeInOutQuad',
  update: function(anim) {
    anim.animatables.forEach((item, index) => {
      console.log(`Элемент ${index}: текущий масштаб ${item.target.style.transform}`);
    });
  }
});

Callback на уровне отдельных свойств

Anime.js позволяет привязывать callback не только к всей анимации, но и к отдельным свойствам через changeBegin и changeComplete:

anime({
  targets: '.square',
  translateX: 200,
  rotate: 90,
  duration: 1200,
  changeBegin: function(anim) {
    console.log('Начало изменения свойства', anim.animatables.map(a => a.target));
  },
  changeComplete: function(anim) {
    console.log('Свойство изменилось полностью');
  }
});

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

Особенности использования callback в цепочках анимаций

При работе с timeline (anime.timeline) callback можно назначать как на всю временную шкалу, так и на отдельные анимации в цепочке:

let tl = anime.timeline({
  loop: false,
  complete: function() {
    console.log('Все анимации в timeline завершены');
  }
});

tl.add({
  targets: '.box1',
  translateX: 100,
  duration: 500,
  complete: function(anim) {
    console.log('Первая анимация завершена');
  }
})
.add({
  targets: '.box2',
  translateY: 150,
  duration: 700
});

Callback на уровне отдельной анимации срабатывает раньше, чем callback timeline, что позволяет строить сложные последовательности с контролем каждой стадии.

Рекомендации по оптимизации callback

  1. Для тяжелых анимаций избегать вычислений внутри update, чтобы не снижать производительность.
  2. Использовать anim.animatables для точного управления свойствами конкретных элементов.
  3. Применять обычные функции вместо стрелочных для доступа к this.targets.
  4. Для сложных последовательностей комбинировать callback timeline и анимаций отдельных элементов.

Контекст и параметры callback-функций являются фундаментом для детализированного управления анимацией. Их грамотное использование позволяет создавать динамичные, отзывчивые и оптимизированные анимационные эффекты с полным контролем над каждым кадром и свойством элементов.

Оглавление