Animation: overallProgress-Eigenschaft

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die schreibgeschützte overallProgress-Eigenschaft des Animation-Interfaces gibt eine Zahl zwischen 0 und 1 zurück, die den Gesamtfortschritt der Animation in Richtung ihres abgeschlossenen Zustands anzeigt. Dies ist der Gesamtfortschritt über alle Iterationen der Animation hinweg, nicht in jeder einzelnen Iteration.

overallProgress funktioniert konsistent über alle Animationen hinweg, unabhängig vom Typ der timeline.

Wert

Eine Zahl zwischen 0 und 1, oder null, wenn die Animation keine Timeline hat, inaktiv ist, noch nicht abgespielt wurde, oder wenn ihre currentTime auf einen Wert gesetzt ist, der keine Zeit darstellt.

Wenn die iterations-Eigenschaft der Animation auf Infinity gesetzt ist oder ihre currentTime auf einen negativen Wert eingestellt ist, wird overallProgress den Wert 0 zurückgeben.

Wenn die duration der Animation auf 0 gesetzt ist, wird overallProgress den Wert 1 zurückgeben.

Beispiele

Anzeigen eines Prozentsatz-Fortschritts

Dieses Demo verwendet overallProgress, um eine Anzeige des "Prozentsatz-Fortschritts" zu erstellen, die auf dem Bildschirm angezeigt wird, während eine Animation läuft.

HTML

Das HTML enthält ein <button>, das gedrückt werden kann, um die Animation zu starten, ein <p>-Element, in dem der Prozentsatz-Fortschritt angezeigt wird, und ein <div>, das animiert wird.

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

Das CSS des Demos bietet einige rudimentäre Formatierungen, die für das Verständnis der Arbeitsweise des JavaScripts nicht wichtig sind. Daher haben wir es zur Kürze ausgeblendet.

JavaScript

Im JavaScript beginnen wir damit, Referenzen zu den <button>, <p>, und <div>-Elementen abzurufen.

Wir erstellen dann:

  • eine animation-Variable, die auf die Animation verweisen wird, sobald wir sie erstellt haben
  • ein keyframes-Array
  • ein Options-Objekt, das Timing-Eigenschaften enthält.
js
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,
};

Als nächstes fügen wir dem <button> einen "click"-Ereignislistener via addEventListener() hinzu, sodass, wenn es gedrückt wird, es:

  1. Die Animation mit Element.animate() startet, wobei die zuvor definierten Keyframes und Optionen übergeben werden. Die zurückgegebene Animation-Instanz wird der animation-Variable zugewiesen.
  2. Eine Funktion namens updateProgress() über die Methode requestAnimationFrame() ausführt, die für die Aktualisierung der Prozentsatz-Anzeige zuständig ist.
js
btn.addEventListener("click", () => {
  // Animate the box
  animation = box.animate(keyframes, timingProps);
  // Start updating the progress percentage via rAF()
  requestAnimationFrame(updateProgress);
});

Nun definieren wir die Funktion updateProgress(). Diese prüft Animation.playState, um zu sehen, ob die Animation nicht abgeschlossen ist. Wenn sie nicht abgeschlossen ist, holen wir den aktuellen Wert von overallProgress, multiplizieren ihn mit 100 und runden das Ergebnis ab, um es in eine ganze Prozentzahl zu konvertieren. Dann aktualisieren wir den textContent-Wert des <p>-Elements damit. Wir rufen dann requestAnimationFrame(updateProgress) erneut auf, um die Prozent-Update-Schleife erneut auszuführen.

Wenn die Animation abgeschlossen ist, ersetzen wir den Prozentsatz-Fortschritt durch die Nachricht "Finished!" und rufen requestAnimationFrame(updateProgress) nicht mehr auf, sodass die Prozentsatz-Updates stoppen.

js
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!";
  }
}

Ergebnis

Die Ausgabe sieht so aus. Versuchen Sie, den Button zu drücken, um die Animation und den zugehörigen Fortschrittsindikator auszuführen.

Spezifikationen

Specification
Web Animations Level 2
# dom-animation-overallprogress

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
overallProgress
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.

Siehe auch