Свойство progress

Свойство progress в anime.js является ключевым инструментом для контроля анимации на уровне времени. Оно позволяет отслеживать и управлять текущим состоянием анимации в процентах, где 0% соответствует началу, а 100% — окончанию анимации. В отличие от стандартных колбэков update, progress предоставляет уже нормализованное значение прогресса, что упрощает синхронизацию сложных эффектов.

Использование свойства progress

progress передаётся в функции обратного вызова (callback) внутри объекта анимации:

anime({
  targets: '.box',
  translateX: 300,
  duration: 2000,
  easing: 'linear',
  update: function(anim) {
    console.log(anim.progress + '%');
  }
});

Здесь anim.progress возвращает текущее значение прогресса анимации в диапазоне от 0 до 100. Это позволяет использовать его для:

  • Динамического управления стилями, не охватываемыми целевыми свойствами.
  • Синхронизации нескольких анимаций.
  • Создания прогресс-баров и визуальных индикаторов.

Принципы работы

  1. Нормализация времени: Прогресс выражается в процентах относительно всей длительности анимации, независимо от того, сколько конкретно миллисекунд прошло.

  2. Значения:

    • 0 — начало анимации.
    • 50 — середина анимации.
    • 100 — конец анимации.

  3. Реальное время vs. easing: progress учитывает функцию easing, но отображается линейно по отношению к текущему времени. Если использовать linear, значение прогресса будет совпадать с реальным временем. При других easing-функциях визуальное движение объекта изменяется, но прогресс всё равно отслеживается относительно времени анимации.

Применение progress для сложных эффектов

Пример 1: Связка прогресса и визуальных индикаторов

const progressBar = document.querySelector('.progress');

anime({
  targets: '.box',
  translateX: 400,
  duration: 3000,
  easing: 'easeInOutQuad',
  update: function(anim) {
    progressBar.style.width = anim.progress + '%';
  }
});

В этом примере прогресс анимации .box напрямую влияет на ширину прогресс-бара, создавая синхронизированный визуальный эффект.

Пример 2: Сложные последовательные анимации

anime({
  targets: '.circle',
  scale: [0, 1],
  duration: 2000,
  easing: 'easeOutElastic',
  update: function(anim) {
    if (anim.progress > 50) {
      document.querySelector('.text').style.opacity = (anim.progress - 50) * 2 / 100;
    }
  }
});

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

Отличие progress от currentTime

  • currentTime возвращает фактическое прошедшее время в миллисекундах с начала анимации.
  • progress всегда нормализован и выражен в процентах, что делает его более удобным для визуальных и логических проверок.
update: function(anim) {
  console.log(`Время: ${anim.currentTime}ms, Прогресс: ${anim.progress}%`);
}

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

  • Использовать progress, когда необходимо синхронизировать несколько анимаций или визуальные индикаторы.
  • Не полагаться на progress для точного позиционирования объекта — оно отражает время, а не абсолютное значение свойств, если используется сложный easing.
  • Для комбинирования с другими событиями (например, begin, complete) прогресс предоставляет пошаговую проверку состояния анимации в любой момент её выполнения.

Интеграция с timeline

При работе с anime.timeline() свойство progress остаётся доступным для каждой отдельной анимации в таймлайне:

const tl = anime.timeline({
  duration: 2000,
  easing: 'easeInOutSine',
  update: function(anim) {
    console.log(anim.progress + '%');
  }
});

tl.add({ targets: '.box1', translateX: 300 })
  .add({ targets: '.box2', translateY: 200 });

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

Итоговые ключевые моменты

  • progress — нормализованное значение от 0 до 100.
  • Используется в колбэках update для контроля состояния анимации.
  • Независимо от easing, отражает процент времени анимации.
  • Идеален для прогресс-баров, последовательных анимаций и синхронизации нескольких объектов.

Свойство progress в anime.js открывает возможность тонкой работы с временной шкалой анимации и расширяет контроль над визуальными эффектами без прямого вмешательства в отдельные CSS-свойства или атрибуты объектов.

Оглавление