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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
playState

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報