Animation: playState プロパティ

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

仕様書

Specification
Web Animations # dom-animation-playstate

ブラウザーの互換性

BCD tables only load in the browser

値

例

仕様書

ブラウザーの互換性

関連情報