Animation: finish() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

finish() くち ウェブアニメーション API の Animation インターフェイスのメソッドで、現在の再生時刻を現在の再生方向に対応するアニメーションの末尾に設定します。

つまり、アニメーションが順方向に再生されている場合は、再生時刻をアニメーションシーケンスの長さに設定し、アニメーションが逆方向に再生されている（reverse() メソッドが呼び出されている）場合は、再生時刻を 0 に設定します。

構文

js
finish()

引数

なし。

返値

なし (undefined)。

例外

InvalidState

プレーヤーの再生レートが 0 であるか、アニメーションの再生レートが 0 より大きく、アニメーションの終了時刻が無限大である場合。

例

次の例では、 finish() メソッドを使用して InvalidState エラーを捕捉する方法を示します。

js
interfaceElement.addEventListener("mousedown", () => {
  try {
    player.finish();
  } catch (e) {
    if (e instanceof InvalidState) {
      console.log("finish() called on paused or finished animation.");
    } else {
      logMyErrors(e); //pass exception object to error handler
    }
  }
});

次の例では、再生方向に関係なく、単一の要素のアニメーションをすべて完了させています。

js
elem.getAnimations().forEach((animation) => animation.finish());

仕様書

Specification
Web Animations
# dom-animation-finish

ブラウザーの互換性

BCD tables only load in the browser

関連情報