Animation: pause() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年3月以降、すべてのブラウザーで利用可能です。
pause() はウェブアニメーション API のAnimation インターフェイスのメソッドで、アニメーションの再生を一時停止します。
構文
js
pause()
引数
なし。
返値
なし。
例外
InvalidStateErrorDOMException-
アニメーションの
currentTimeがunresolvedであり（おそらくまだ再生を始めていない）、アニメーションの終了時刻が正の値である場合に発生します。
例
Animation.pause() はウェブアニメーション API の国のアリスのGrowing/Shrinking Alice Gameで何度も使用しています。 Element.animate() メソッドで作成したアニメーションはすぐに再生を始めるので、それを避けたい場合は手動で一時停止しなければならないのが主な理由です。
js
// カップケーキが少しずつ食べられていく様子のアニメーション
const nommingCake = document
.getElementById("eat-me_sprite")
.animate(
[{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }],
{
fill: "forwards",
easing: "steps(4, end)",
duration: aliceChange.effect.timing.duration / 2,
},
);
// 実際にはクリックイベントが発生するまで実行する必要はないため、最初は一時停止しておく
nommingCake.pause();
更に、リセット時に次のようにします。
js
// カップケーキ、アリス、"drink me" と書かれたボトルのアニメーションを一時停止するための汎用関数
const stopPlayingAlice = () => {
aliceChange.pause();
nommingCake.pause();
drinking.pause();
};
// ユーザーがカップケーキやボトルを離したら、アニメーションを一時停止
cake.addEventListener("mouseup", stopPlayingAlice);
bottle.addEventListener("mouseup", stopPlayingAlice);
仕様書
| 仕様書 |
|---|
| Web Animations # dom-animation-pause |
ブラウザーの互換性
関連情報
- ウェブアニメーション API
Animation: ウェブページのアニメーションを制御することができるその他のメソッドやプロパティAnimation.reverse(): アニメーションを逆方向に再生します。Animation.finish(): アニメーションを終了します。Animation.cancel(): アニメーションをキャンセルします。