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