Animation: play() メソッド

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年3月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

play() はウェブアニメーション APIの Animation インターフェイスのメソッドで、アニメーションの再生を開始または再開します。アニメーションが完了した場合、play() を呼び出すとアニメーションを再開し、最初から再生します。

構文

play()

引数

なし。

返値

なし (undefined)。

例

アリスの成長/縮小ゲームの例では、ケーキをクリックまたはタップすると、アリスの成長アニメーション (aliceChange) が再生され、ケーキのアニメーションが発生すると同時に、アリスが大きくなります。 2 つの Animation.play()、 1 つの EventListener です。

// 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);