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
関連情報
- ウェブアニメーション API
Animation
: ウェブページのアニメーションを制御するためのその他のメソッドやプロパティ