ChangeBegin и changeComplete

В библиотеке anime.js анимации строятся вокруг объектов анимации (anime()), которые управляют свойствами элементов через ключевые кадры, временные функции и события. Два ключевых события, позволяющих отслеживать динамику анимации на ранних и конечных стадиях, — это changeBegin и changeComplete. Они предоставляют контроль над поведением анимации на микроуровне.

Событие changeBegin

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

Пример структуры:

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  easing: 'easeInOutQuad',
  changeBegin: (anim) => {
    console.log('Начало изменения:', anim);
  }
});

Ключевые моменты работы changeBegin:

  • Вызывается каждый кадр, когда начинается изменение свойства.
  • Аргумент anim содержит объект анимации с доступом к текущим значениям всех анимируемых свойств (anim.animatables) и прогрессу (anim.progress).
  • Позволяет синхронизировать другие действия с моментом старта изменения свойства, например, запуск звукового эффекта или обновление сопутствующих стилей.

Пример с несколькими свойствами:

anime({
  targets: '.circle',
  translateX: 300,
  rotate: '1turn',
  duration: 2000,
  easing: 'linear',
  changeBegin: (anim) => {
    anim.animatables.forEach(item => {
      console.log(`Элемент ${item.target.className} начал изменять ${Object.keys(item.target)}`);
    });
  }
});

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

Событие changeComplete

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

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

anime({
  targets: '.box',
  translateY: 200,
  duration: 1000,
  easing: 'easeInOutSine',
  changeComplete: (anim) => {
    console.log('Завершение изменения:', anim);
  }
});

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

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

Отличие changeBegin и changeComplete от begin и complete

Событие Момент срабатывания Область применения
begin В момент старта всей анимации Инициализация глобальных эффектов или подготовки данных
changeBegin Начало изменения каждого свойства на кадре Синхронизация микродействий, эффектов или других свойств
changeComplete Конец изменения каждого свойства на кадре Точный контроль окончания изменений отдельных свойств
complete Конец всей анимации Выполнение действий после завершения всей анимационной последовательности

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

  1. Сложные цепочки анимаций Использование changeBegin и changeComplete позволяет создавать динамические цепочки, где последующие шаги зависят от фактического изменения отдельных свойств.

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

  3. Реактивные интерфейсы В интерфейсах с drag-and-drop или анимацией пользовательских компонентов события помогают отслеживать прогресс изменения и корректировать состояние интерфейса в реальном времени.

Пример комплексной анимации с обоими событиями

anime({
  targets: '.square',
  translateX: 400,
  rotate: 180,
  scale: 1.5,
  duration: 3000,
  easing: 'easeInOutQuart',
  changeBegin: (anim) => {
    console.log('Начало изменения кадра', anim.progress);
  },
  changeComplete: (anim) => {
    console.log('Завершение изменения кадра', anim.progress);
  },
  complete: () => {
    console.log('Вся анимация завершена');
  }
});

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

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

  • Использовать changeBegin для запуска эффектов параллельно с анимацией, чтобы они синхронизировались с каждым изменением кадра.
  • Использовать changeComplete для действий, которые должны выполняться после обновления значения, но до завершения всей анимации.
  • Для множественных свойств проверять anim.animatables, чтобы корректно идентифицировать, какое свойство и элемент изменяется.
  • Не заменять complete на changeComplete, если задача — отследить окончание всей анимации, а не отдельного изменения.

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

Оглавление