Animation: pause() メソッド
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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);
仕様書
| Specification |
|---|
| Web Animations # dom-animation-pause |
ブラウザーの互換性
Loading…
関連情報
- ウェブアニメーション API
Animation: ウェブページのアニメーションを制御することができるその他のメソッドやプロパティAnimation.pause(): アニメーションを停止します。Animation.reverse(): アニメーションを逆方向に再生します。Animation.finish(): アニメーションを終了します。Animation.cancel(): アニメーションをキャンセルします。