Begin callback

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

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

В этом примере функция внутри begin вызывается сразу после старта анимации. Параметр anim передает объект анимации, содержащий текущее состояние анимации, продолжительность, целевые элементы и другие свойства.

Сигнатура и параметры

begin вызывается с одним аргументом — объектом анимации:

begin: function(anim) {
  // anim — объект анимации
}

Основные свойства объекта anim:

anim.animatables — массив объектов, представляющих каждый анимируемый элемент.
anim.duration — длительность анимации в миллисекундах.
anim.currentTime — текущее время анимации (в момент вызова begin всегда 0).
anim.progress — процент прогресса анимации (0 в начале).
anim.reverse — флаг, указывающий, выполняется ли анимация в обратном направлении.

Используя эти свойства, можно программно управлять поведением элементов сразу в момент старта анимации.

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

Подготовка элементов перед анимацией

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

anime({
  targets: '.circle',
  scale: [0, 1],
  duration: 1500,
  begin: function(anim) {
    anim.animatables.forEach(item => {
      item.target.style.opacity = 1;
      item.target.style.backgroundColor = 'red';
    });
  }
});

Здесь все целевые элементы становятся видимыми и получают красный цвет до старта анимации увеличения масштаба.

Запуск нескольких анимаций синхронно

begin позволяет запускать дополнительные анимации одновременно с основной:

let mainAnim = anime({
  targets: '.box',
  translateX: 300,
  duration: 2000,
  begin: function(anim) {
    anime({
      targets: '.shadow',
      scale: [1, 1.5],
      duration: anim.duration
    });
  }
});

В этом примере анимируется тень одновременно с основной анимацией, благодаря вызову внутри begin.

Особенности работы с асинхронными операциями

Коллбек begin выполняется синхронно при старте анимации, поэтому если внутри него использовать асинхронный код (например, setTimeout или промисы), он не задерживает начало анимации. Это важно учитывать при запуске сложных цепочек эффектов:

anime({
  targets: '.box',
  translateY: 200,
  duration: 1000,
  begin: function(anim) {
    setTimeout(() => {
      console.log('Асинхронное действие произошло после начала анимации');
    }, 500);
  }
});

Совмещение с другими коллбеками

begin часто используется вместе с update, complete и loop:

update — вызывается каждый кадр анимации, позволяет изменять свойства динамически.
complete — вызывается по завершению анимации.
loop — позволяет повторять анимацию.

anime({
  targets: '.box',
  translateX: 250,
  duration: 2000,
  begin: function(anim) {
    console.log('Старт анимации');
  },
  update: function(anim) {
    console.log(`Прогресс: ${anim.progress}%`);
  },
  complete: function() {
    console.log('Анимация завершена');
  }
});

Такой подход дает полный контроль над жизненным циклом анимации.