Animation: finish() メソッド

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.

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

関連情報