このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
Animation: playState プロパティ
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年3月以降、すべてのブラウザーで利用可能です。
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;
});
仕様書
| 仕様書 |
|---|
| Web Animations # dom-animation-playstate |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。
関連情報
- ウェブアニメーション API
Animation: ウェブページのアニメーションを制御するためのその他のメソッドやプロパティ