LoopBegin и loopComplete

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

Событие loopBegin

Событие loopBegin вызывается в начале каждого цикла анимации, когда она находится в режиме повторения (loop: true или loop: N). Это полезно для случаев, когда необходимо запускать дополнительную логику каждый раз перед стартом очередного цикла анимации.

Синтаксис:

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  loop: 3,
  loopBegin: function(anim) {
    console.log('Начало цикла', anim.currentLoop);
  }
});

Особенности:

  • Параметр anim содержит объект анимации, включающий свойства:

    • anim.currentLoop — номер текущего цикла (от 0 до N-1);
    • anim.remaining — сколько циклов осталось;
    • anim.duration — продолжительность одного цикла.

  • Вызывается до того, как начнётся движение элементов в цикле.

  • Может использоваться для изменения параметров анимации на лету перед каждым повтором.

Событие loopComplete

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

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

anime({
  targets: '.circle',
  scale: [1, 2],
  duration: 800,
  loop: 4,
  loopComplete: function(anim) {
    console.log('Цикл завершён:', anim.currentLoop);
  }
});

Ключевые моменты:

  • loopComplete вызывается после каждого завершенного цикла, но перед стартом следующего, если повторение ещё не закончилось.
  • Свойство anim.completed позволяет определить, завершился ли последний цикл всего повторения или анимация продолжится.
  • Может использоваться для последовательной смены эффектов, изменения цветов, состояния элементов и логирования.

Практические сценарии применения

  1. Комбинированные эффекты: Например, при анимации вращающихся объектов можно менять цвет или размер после завершения каждого цикла через loopComplete, создавая динамичное ощущение изменения без остановки анимации.

  2. Синхронизация с другими анимациями: Используя loopBegin, можно запускать связанные анимации или триггерить события внешних функций, синхронизированных с каждым новым циклом.

  3. Управление прогрессом: Легко создавать индикаторы прогресса повторяющейся анимации, увеличивая значение или счетчик после каждого завершенного цикла через loopComplete.

Взаимодействие с другими событиями

anime.js поддерживает несколько событий одновременно:

  • begin — срабатывает один раз при старте анимации;
  • complete — один раз при окончании всей анимации;
  • loopBegin — при старте каждого цикла;
  • loopComplete — после каждого завершенного цикла;
  • update — на каждом кадре анимации.

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

Передача пользовательских данных

События loopBegin и loopComplete получают объект анимации anim, который можно использовать для передачи кастомной информации или состояния. Пример:

let counter = 0;

anime({
  targets: '.star',
  translateY: 100,
  loop: 5,
  loopBegin: function(anim) {
    anim.starIndex = counter++;
  },
  loopComplete: function(anim) {
    console.log('Завершён цикл для звезды', anim.starIndex);
  }
});

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

Рекомендации по использованию

  • Использовать loopBegin для инициализации состояния цикла, подготовки визуальных эффектов или данных.
  • Использовать loopComplete для реакции на завершение цикла, например, изменения внешнего вида или логирования.
  • Не перегружать события тяжёлыми вычислениями, чтобы не снижать плавность анимации.

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

Оглавление