Animation: updatePlaybackRate() Methode

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 updatePlaybackRate() Methode der Web Animations API's Animation Schnittstelle legt die Geschwindigkeit einer Animation fest, nachdem zunächst ihre Wiedergabeposition synchronisiert wurde.

In einigen Fällen kann eine Animation in einem separaten Thread oder Prozess ausgeführt werden und wird weiterhin aktualisiert, selbst wenn lang laufendes JavaScript den Haupt-Thread verzögert. In einem solchen Fall kann das direkte Festlegen der playbackRate auf der Animation dazu führen, dass die Wiedergabeposition der Animation springt, da ihre Wiedergabeposition auf dem Haupt-Thread von der Wiedergabeposition, an der sie derzeit ausgeführt wird, abweichen kann.

updatePlaybackRate() ist eine asynchrone Methode, die die Geschwindigkeit einer Animation einstellt, nachdem sie mit ihrer aktuellen Wiedergabeposition synchronisiert wurde. Dadurch wird sichergestellt, dass die resultierende Änderung der Geschwindigkeit keinen abrupten Sprung verursacht. Nach dem Aufruf von updatePlaybackRate() wird die playbackRate der Animation nicht sofort aktualisiert. Sie wird aktualisiert, sobald das ready Versprechen der Animation erfüllt ist.

Syntax

js
updatePlaybackRate(playbackRate)

Parameter

playbackRate

Die neue Geschwindigkeit, die eingestellt werden soll. Dies kann eine positive Zahl sein (um die Animation zu beschleunigen oder zu verlangsamen), eine negative Zahl (um sie rückwärts abzuspielen) oder null (um die Animation effektiv anzuhalten).

Rückgabewert

Keiner (undefined).

Beispiele

Eine Geschwindigkeitsauswahlkomponente würde von einer reibungslosen Aktualisierung von updatePlaybackRate() profitieren, wie unten demonstriert:

js
speedSelector.addEventListener("input", (evt) => {
  cartoon.updatePlaybackRate(parseFloat(evt.target.value));
  cartoon.ready.then(() => {
    console.log(`Playback rate set to ${cartoon.playbackRate}`);
  });
});

Spezifikationen

Specification
Web Animations
# dom-animation-updateplaybackrate

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

  • Web Animations API
  • Animation.playbackRate — liest die aktuelle Wiedergaberate aus oder stellt sie auf synchrone Weise ein.
  • Animation.reverse() — kehrt die Wiedergaberate um und startet die Wiedergabe bei Bedarf neu.
  • Animation — enthält weitere Methoden und Eigenschaften, die zur Steuerung der Webseiten-Animation verwendet werden können.