Animation: play()-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 play()-Methode der Animation Schnittstelle des Web Animations API startet oder setzt die Wiedergabe einer Animation fort. Wenn die Animation beendet ist, startet ein Aufruf von play() die Animation neu, indem sie von Anfang an abgespielt wird.

Syntax

js
play()

Parameter

Keine.

Rückgabewert

Keiner (undefined).

Beispiele

Im Beispiel Growing/Shrinking Alice Game führt ein Klick oder Tippen auf den Kuchen dazu, dass die Wachstumsanimation von Alice (aliceChange) vorwärts abgespielt wird, wodurch sie größer wird, sowie die Animation des Kuchens ausgelöst wird. Zwei Animation.play(), ein EventListener:

js
// The cake has its own animation:
const nommingCake = document
  .getElementById("eat-me_sprite")
  .animate(
    [{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }],
    {
      fill: "forwards",
      easing: "steps(4, end)",
      duration: aliceChange.effect.timing.duration / 2,
    },
  );

// Pause the cake's animation so it doesn't play immediately.
nommingCake.pause();

// This function will play when ever a user clicks or taps
const growAlice = () => {
  // Play Alice's animation.
  aliceChange.play();

  // Play the cake's animation.
  nommingCake.play();
};

// When a user holds their mouse down or taps, call growAlice to make all the animations play.
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);

Spezifikationen

Specification
Web Animations
# dom-animation-play

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch