このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
Animation: pause() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年3月以降、すべてのブラウザーで利用可能です。
pause() はウェブアニメーション API のAnimation インターフェイスのメソッドで、アニメーションの再生を一時停止します。
構文
js
animation.pause();
引数
なし。
返値
なし。
例外
InvalidStateErrorDOMException-
アニメーションの
currentTimeがunresolvedであり(おそらくまだ再生を始めていない)、アニメーションの終了時刻が正の値である場合に発生します。
例
Animation.pause() はウェブアニメーション API の国のアリスのGrowing/Shrinking Alice Gameで何度も使用しています。 Element.animate() メソッドで作成したアニメーションはすぐに再生を始めるので、それを避けたい場合は手動で一時停止しなければならないのが主な理由です。
js
// animation of the cupcake slowly getting eaten up
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,
},
);
// doesn't actually need to be eaten until a click event, so pause it initially:
nommingCake.pause();
Additionally, when resetting:
js
// An all-purpose function to pause the animations on Alice, the cupcake, and the bottle that reads "drink me."
const stopPlayingAlice = () => {
aliceChange.pause();
nommingCake.pause();
drinking.pause();
};
// When the user releases the cupcake or the bottle, pause the animations.
cake.addEventListener("mouseup", stopPlayingAlice, false);
bottle.addEventListener("mouseup", stopPlayingAlice, false);
仕様書
| 仕様書 |
|---|
| Web Animations # dom-animation-pause |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。
関連情報
- ウェブアニメーション API
Animation: ウェブページのアニメーションを制御することができるその他のメソッドやプロパティAnimation.pause(): アニメーションを停止します。Animation.reverse(): アニメーションを逆方向に再生します。Animation.finish(): アニメーションを終了します。Animation.cancel(): アニメーションをキャンセルします。