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
animation.pause();
Parameter
Keine.
Rückgabewert
Keiner.
Ausnahmen
InvalidStateError
DOMException
-
Wird ausgelöst, wenn die
currentTime
der Animationunresolved
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:
// 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:
// 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
- Web Animations API
Animation
für andere Methoden und Eigenschaften, die Sie zur Steuerung der Webseiten-Animation verwenden können.Animation.reverse()
um eine Animation rückwärts laufen zu lassen.Animation.finish()
um eine Animation zu beenden.Animation.cancel()
um eine Animation abzubrechen.