Анимация: свойство overallProgress

Чтение-только свойство overallProgress интерфейса Animation возвращает число от 0 до 1, указывающее общий прогресс анимации по направлению к ее завершенному состоянию. Это общий прогресс по всем итерациям анимации, а не по каждой отдельной итерации.

overallProgress работает последовательно во всех анимациях, независимо от типа timeline.

Число от 0 до 1, или null, если анимация не имеет таймлайна, не активна или еще не была запущена, или если ее currentTime установлено на значение, не являющееся временем.

Если свойство iterations анимации установлено на Infinity, или если ее currentTime установлено на отрицательное значение, overallProgress вернет 0.

Если свойство duration анимации установлено на 0, overallProgress вернет 1.

Этот демон использует overallProgress для создания индикатора «процентного прогресса», который отображается на экране во время выполнения анимации.

HTML содержит <button> для запуска анимации, элемент <p> для отображения процентного прогресса и <div>, который будет анимирован.

<button>Run animation</button>
<p class="progress">Progress: 0%</p>
<div class="box"></div>

CSS демо предоставляет некоторые базовые стили, которые не важны для понимания работы JavaScript, поэтому мы их скрыли для краткости.

В JavaScript мы получаем ссылки на элементы <button>, <p> и <div>.

Затем мы создаем:

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

const btn = document.querySelector("button");
const progress = document.querySelector(".progress");
const box = document.querySelector(".box");

let animation;

const keyframes = [{ rotate: "0deg" }, { rotate: "360deg" }];

const timingProps = {
  duration: 3000,
  iterations: 1,
};

Далее мы добавляем обработчик события "click" к элементу <button> через addEventListener(), чтобы при нажатии:

1. Запустить анимацию с помощью Element.animate(), передав ей ключевые кадры и параметры, определенные ранее, и присвоив возвращенный экземпляр Animation переменной animation.
2. Выполнить функцию updateProgress() с помощью метода requestAnimationFrame(), которая обновляет отображение процентного прогресса.

btn.addEventListener("click", () => {
  // Animate the box
  animation = box.animate(keyframes, timingProps);
  // Start updating the progress percentage via rAF()
  requestAnimationFrame(updateProgress);
});

Теперь определим функцию updateProgress(). Она запрашивает Animation.playState, чтобы узнать, не завершена ли анимация. Если она не завершена, мы получаем текущее значение overallProgress, умножаем его на 100 и округляем результат вниз, чтобы преобразовать его в целое процентное число, затем обновляем значение textContent элемента <p>. Затем мы вызываем requestAnimationFrame(updateProgress) снова, чтобы повторно запустить обновление процентного прогресса.

Если анимация завершена, мы заменяем процентный прогресс сообщением «Завершено!», и не вызываем requestAnimationFrame(updateProgress), чтобы остановка обновления процентного прогресса.

function updateProgress() {
  // Check if the animation is finished
  if (animation.playState !== "finished") {
    // Convert overallProgress to a whole number percentage
    const progressPercentage = Math.floor(animation.overallProgress * 100);
    // Update the progress paragraph with the percentage
    progress.textContent = `Progress: ${progressPercentage}%`;
    // Only request the next frame if the animation is not finished
    requestAnimationFrame(updateProgress);
  } else {
    progress.textContent = "Finished!";
  }
}

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

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