Animation: playbackRate-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

Die Animation.playbackRate-Eigenschaft der Web Animations API gibt die Abspielgeschwindigkeit der Animation zurück oder setzt sie.

Animationen haben eine Abspielrate, die einen Skalierungsfaktor vom Änderungsrat der Zeitwerte der timeline der Animation zur aktuellen Zeit der Animation bietet. Die Abspielrate ist anfänglich 1.

Wert

Nimmt eine Zahl an, die 0, negativ oder positiv sein kann. Negative Werte kehren die Animation um. Der Wert ist ein Skalierungsfaktor, sodass ein Wert von 2 beispielsweise die Abspielgeschwindigkeit verdoppeln würde.

Hinweis: Das Setzen der playbackRate einer Animation auf 0 pausiert die Animation effektiv (allerdings wird ihr playState nicht unbedingt zu paused).

Beispiele

Im Growing/Shrinking Alice Game-Beispiel führt ein Klick oder Tipp auf die Flasche dazu, dass die Wachstumsanimation von Alice (aliceChange) umgekehrt wird, sodass sie schrumpft:

js
const shrinkAlice = () => {
  aliceChange.playbackRate = -1;
  aliceChange.play();
};

// On tap or click, Alice will shrink.
bottle.addEventListener("mousedown", shrinkAlice, false);
bottle.addEventListener("touchstart", shrinkAlice, false);

Im Gegensatz dazu führt ein Klick auf den Kuchen dazu, dass sie "wächst", indem aliceChange wieder vorwärts abgespielt wird:

js
const growAlice = () => {
  aliceChange.playbackRate = 1;
  aliceChange.play();
};

// On tap or click, Alice will grow.
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);

In einem anderen Beispiel, dem Red Queen's Race Game, verlangsamen sich Alice und die Rote Königin ständig:

js
setInterval(() => {
  // Make sure the playback rate never falls below .4

  if (redQueen_alice.playbackRate > 0.4) {
    redQueen_alice.playbackRate *= 0.9;
  }
}, 3000);

Aber durch Klicken oder Tippen auf sie beschleunigen sie sich, indem ihre playbackRate multipliziert wird:

js
const goFaster = () => {
  redQueen_alice.playbackRate *= 1.1;
};

document.addEventListener("click", goFaster);
document.addEventListener("touchstart", goFaster);

Spezifikationen

Specification
Web Animations
# dom-animation-playbackrate

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch