Animation: playState 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 schreibgeschützte Animation.playState Eigenschaft der Web Animations API gibt einen enumerierten Wert zurück, der den Wiedergabestatus einer Animation beschreibt.

Wert

idle

Die aktuelle Zeit der Animation ist nicht aufgelöst, und es gibt keine ausstehenden Aufgaben.

running

Die Animation läuft.

paused

Die Animation wurde angehalten, und die Animation.currentTime Eigenschaft wird nicht aktualisiert.

finished

Die Animation hat eine ihrer Grenzen erreicht, und die Animation.currentTime Eigenschaft wird nicht aktualisiert.

Früher definierte Web Animations einen pending Wert, um anzuzeigen, dass ein asynchroner Vorgang wie das Initiieren der Wiedergabe noch nicht abgeschlossen war. Dies wird nun durch die separate Animation.pending Eigenschaft angezeigt.

Beispiele

Im Growing/Shrinking Alice Game Beispiel können die Spieler ein Ende erleben, in dem Alice in einen Tränenpool weint. Im Spiel sollten aus Leistungsgründen die Tränen nur animiert werden, wenn sie sichtbar sind. Daher müssen sie sofort pausiert werden, sobald sie animiert sind, wie folgt:

js
// Setting up the tear animations

tears.forEach((el) => {
  el.animate(tearsFalling, {
    delay: getRandomMsRange(-1000, 1000), // randomized for each tear
    duration: getRandomMsRange(2000, 6000), // randomized for each tear
    iterations: Infinity,
    easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)",
  });
  el.pause();
});

// Play the tears falling when the ending needs to be shown.

tears.forEach((el) => {
  el.play();
});

// Reset the crying tears animations and pause them.

tears.forEach((el) => {
  el.pause();
  el.currentTime = 0;
});

Spezifikationen

Specification
Web Animations
# dom-animation-playstate

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
playState

Legend

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

Full support
Full support
See implementation notes.

Siehe auch

  • Web Animations API
  • Animation für andere Methoden und Eigenschaften, die Sie zur Steuerung von Web-Seiten-Animationen verwenden können.