Animation: pause() メソッド

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

pause() はウェブアニメーション API のAnimation インターフェイスのメソッドで、アニメーションの再生を一時停止します。

構文

js
animation.pause();

引数

なし。

返値

なし。

例外

InvalidStateError DOMException

アニメーションの 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

ブラウザーの互換性

BCD tables only load in the browser

関連情報