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 March 2020.

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

値

idle

アニメーションの現在の時刻は未解決で、待機タスクはありません。

running

アニメーションは実行中です。

paused

アニメーションが中断され、 Animation.currentTime プロパティが更新されていません。

finished

アニメーションが境界の 1 つに達し、 Animation.currentTime プロパティが更新されていません。

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

例

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

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

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

関連情報