Animation: pause() 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 pause() Methode des Web Animations API s Animation Schnittstelle setzt die Wiedergabe der Animation aus.

Syntax

js
animation.pause();

Parameter

Keine.

Rückgabewert

Keiner.

Ausnahmen

InvalidStateError DOMException

Wird ausgelöst, wenn die currentTime der Animation unresolved ist (vielleicht hat sie noch nicht begonnen zu spielen), und die Endzeit der Animation positive Unendlichkeit ist.

Beispiel

Animation.pause() wird häufig im Alice im Web Animations API Land Wachsender/Schrumpfender Alice-Spiel verwendet, hauptsächlich weil Animationen, die mit der Element.animate() Methode erstellt werden, sofort zu spielen beginnen und manuell pausiert werden müssen, wenn Sie das vermeiden möchten:

js
// animation of the cupcake slowly getting eaten up
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,
    },
  );

// doesn't actually need to be eaten until a click event, so pause it initially:
nommingCake.pause();

Zusätzlich bei der Rücksetzung:

js
// An all-purpose function to pause the animations on Alice, the cupcake, and the bottle that reads "drink me."
const stopPlayingAlice = () => {
  aliceChange.pause();
  nommingCake.pause();
  drinking.pause();
};

// When the user releases the cupcake or the bottle, pause the animations.
cake.addEventListener("mouseup", stopPlayingAlice, false);
bottle.addEventListener("mouseup", stopPlayingAlice, false);

Spezifikationen

Specification
Web Animations
# dom-animation-pause

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch