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 März 2020.
Die play() Methode der Web Animations API Schnittstelle Animation startet oder setzt die Wiedergabe einer Animation fort. Wenn die Animation beendet ist, startet ein Aufruf von play() die Animation neu, beginnend von vorne.
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 Alices Wachstumsanimation (aliceChange) vorwärts abgespielt wird, wodurch sie größer wird und die Animation des Kuchens ausgelöst wird. Zwei Animation.play()s, 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);
cake.addEventListener("touchstart", growAlice);
Spezifikationen
| Specification |
|---|
| Web Animations # dom-animation-play |
Browser-Kompatibilität
Loading…
Siehe auch
- Web Animations API
Animationfür andere Methoden und Eigenschaften, die Sie zur Steuerung von Webseitenanimationen verwenden können.Animation.pause()zum Anhalten einer Animation.Animation.reverse()um eine Animation rückwärts abzuspielen.Animation.finish()um eine Animation zu beenden.Animation.cancel()um eine Animation abzubrechen.