Animation: play() メソッド
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.
play()
は ウェブアニメーション APIの Animation
インターフェイスのメソッドで、アニメーションの再生を開始または再開します。アニメーションが完了した場合、play()
を呼び出すとアニメーションを再開し、最初から再生します。
構文
js
play()
引数
なし。
返値
なし (undefined
)。
例
アリスの成長/縮小ゲームの例では、ケーキをクリックまたはタップすると、アリスの成長アニメーション (aliceChange
) が再生され、ケーキのアニメーションが発生すると同時に、アリスが大きくなります。 2 つの Animation.play()
、 1 つの 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, false);
cake.addEventListener("touchstart", growAlice, false);
仕様書
Specification |
---|
Web Animations # dom-animation-play |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- ウェブアニメーション API
Animation
: ウェブページのアニメーションを制御することができるその他のメソッドやプロパティAnimation.pause()
: アニメーションを停止します。Animation.reverse()
: アニメーションを逆方向に再生します。Animation.finish()
: アニメーションを終了します。Animation.cancel()
: アニメーションをキャンセルします。