Animation: play() メソッド

Baseline 広く利用可能

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

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

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

構文

play()

引数

なし。

返値

なし (undefined)。

例

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

// ケーキには独自のアニメーションがある
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,
    },
  );

// ケーキのアニメーションを一時停止し、直ちに実行されないようにする
nommingCake.pause();

// この関数は、ユーザーがクリックまたはタップするたびに実行され鵜
const growAlice = () => {
  // アリスのアニメーションを実行
  aliceChange.play();

  // ケーキのアニメーションを実行
  nommingCake.play();
};

// ユーザーがマウスを押し続けたままにしたり、長押ししたりしたときは、growAlice を呼び出して、すべてのアニメーションを再生する
cake.addEventListener("mousedown", growAlice);
cake.addEventListener("touchstart", growAlice);