Animation: playState プロパティ

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月⁩.

Animation.playState はウェブアニメーション API の読み取り専用プロパティで、アニメーションの再生状態を説明する列挙値を返します。

値

idle: アニメーションの現在の時刻は未解決で、待機タスクはありません。
running: アニメーションは実行中です。
paused: アニメーションが中断され、 Animation.currentTime プロパティが更新されていません。
finished: アニメーションが境界の 1 つに達し、 Animation.currentTime プロパティが更新されていません。

以前、ウェブアニメーションでは、再生の開始などの非同期処理がまだ完了していないことを示すために、 pending の値を定義していました。これは、別個の Animation.pending プロパティで示すようになりました。

例

例えばアリスの成長/縮小ゲームの例では、プレイヤーはアリスが涙を流して泣くという結末にたどり着きます。ゲームでは、パフォーマンス上の理由から、涙は見えているときだけアニメーションします。ですから、このようにアニメーションしたら、すぐに一時停止しなければなりません。

// 涙のアニメーションをセットアップ

tears.forEach((el) => {
  el.animate(tearsFalling, {
    delay: getRandomMsRange(-1000, 1000), // それぞれの涙をランダムにする
    duration: getRandomMsRange(2000, 6000), // それぞれの涙をランダムにする
    iterations: Infinity,
    easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)",
  });
  el.pause();
});

// エンディングを表示する必要があるときに、涙が落ちるのを再生

tears.forEach((el) => {
  el.play();
});

// 涙のアニメーションをリセットし、一時停止

tears.forEach((el) => {
  el.pause();
  el.currentTime = 0;
});