Animation: play() Methode
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2020 browserübergreifend verfügbar.
Die play()-Methode der Animation-Schnittstelle der Web Animations API startet oder setzt das Abspielen einer Animation fort. Wenn die Animation abgeschlossen ist, wird durch Aufrufen von play() die Animation neu gestartet und von Beginn an abgespielt.
Syntax
js
play()
Parameter
Keine.
Rückgabewert
Keiner (undefined).
Beispiele
Im Growing/Shrinking Alice Spiel-Beispiel bewirkt das Klicken oder Tippen auf den Kuchen, dass die Wachstumsanimation von Alice (aliceChange) vorwärts abgespielt wird, wodurch sie größer wird, und auch 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 whenever 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
| Spezifikation |
|---|
| Web Animations # dom-animation-play |
Browser-Kompatibilität
Siehe auch
- Web Animations API
Animationfür andere Methoden und Eigenschaften, die Sie zur Steuerung von Webseitenanimationen verwenden können.Animation.pause()um eine Animation anzuhalten.Animation.reverse()um eine Animation rückwärts abzuspielen.Animation.finish()um eine Animation zu beenden.Animation.cancel()um eine Animation abzubrechen.