Update callback

В библиотеке anime.js объект анимации поддерживает большое количество опций, среди которых особое место занимает update callback. Этот колбэк вызывается каждый раз при обновлении значений анимации, что делает его крайне полезным для динамического взаимодействия с DOM или вычислений в реальном времени.

Синтаксис

anime({
  targets: '.box',
  translateX: 250,
  duration: 2000,
  update: function(anim) {
    console.log(anim.progress);
  }
});
  • anim — объект анимации, передаваемый в callback.
  • anim.progress — процент выполнения анимации (от 0 до 100).
  • anim.currentTime — текущее время анимации в миллисекундах.
  • anim.completed — логическое значение, показывающее, завершена ли анимация.

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

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

  1. Отслеживание прогресса анимации
anime({
  targets: '.circle',
  scale: [0, 1],
  duration: 3000,
  update: function(anim) {
    const progress = anim.progress.toFixed(1);
    document.querySelector('.progress-text').textContent = `${progress}%`;
  }
});

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

  1. Создание сложных визуальных эффектов

update позволяет комбинировать несколько CSS-свойств или динамически изменять параметры на лету.

anime({
  targets: '.square',
  translateX: 400,
  rotate: 360,
  duration: 4000,
  update: function(anim) {
    const rotation = anim.animations[1].currentValue;
    document.querySelector('.square').style.backgroundColor = `rgb(${rotation % 255}, 100, 150)`;
  }
});

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

  1. Интеграция с другими анимациями или событиями

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

anime({
  targets: '.bar',
  width: '80%',
  duration: 2000,
  update: function(anim) {
    if (anim.progress > 50 && !window.triggered) {
      console.log('Анимация достигла середины!');
      window.triggered = true;
    }
  }
});

Важные свойства объекта анимации внутри update

  • anim.animations — массив всех анимационных свойств, где каждый элемент содержит:

    • currentValue — текущее значение свойства
    • from — начальное значение
    • to — конечное значение
    • type — тип анимации (CSS, transform, attribute и т.д.)

  • anim.paused — состояние паузы

  • anim.reversed — направление анимации

  • anim.remaining — оставшееся время до завершения

Эти свойства позволяют создавать условные эффекты и контролировать поведение анимации прямо в процессе её выполнения.

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

  • begin вызывается один раз при старте анимации.
  • update вызывается многократно на каждом кадре.
  • complete вызывается один раз при завершении анимации.

update — это единственный колбэк, который обеспечивает пошаговый контроль анимации, позволяя реагировать на её изменения в реальном времени.

Оптимизация и производительность

Частое выполнение сложных операций внутри update может негативно влиять на плавность анимации. Рекомендуется:

  • Минимизировать DOM-операции внутри update.
  • Использовать requestAnimationFrame для сторонних вычислений, если необходимо.
  • Ограничивать сложные вычисления до нескольких ключевых кадров через условия (например, if (anim.progress % 10 === 0)).

Примеры использования в интерактивных интерфейсах

  1. Прогресс-бары с динамическим заполнением
  2. Игровые эффекты на canvas с синхронизацией движения объектов
  3. Анимации текста и SVG, зависящие от текущего состояния

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

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

Оглавление