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 ⁨2020年3月⁩.

finish は Animation インターフェイスのイベントで、アニメーションの再生が完了したとき、または Animation.finish() メソッドが呼び出されてアニメーションが即座に終了させられたときに発生します。

メモ: "paused"の再生状態はfinished"の再生状態に優先します。アニメーションが一時停止と完了の両方の状態の場合、 "paused" の状態が報告されます。 startTimeを document.timeline.currentTime - (Animation.currentTime * Animation.playbackRate) に設定するには、アニメーションを強制的に "finished" 状態にすることができます。

構文

このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

addEventListener("finish", (event) => { })
onfinish = (event) => { }

イベント型

AnimationPlaybackEvent です。 Event から継承しています。

イベントプロパティ

以下に挙げたプロパティに加え、親インターフェイスである Event から継承したプロパティが利用できます。

AnimationPlaybackEvent.currentTime 読取専用: イベントを生成したアニメーションの現在時刻。
AnimationPlaybackEvent.timelineTime 読取専用: イベントを生成したアニメーションのタイムラインの時刻値。

例

Animation.onfinish は、ウェブアニメーション API の国のアリスのアリスの成長/縮小ゲームで何度か使用しています。ここでは、不透明アニメーションがフェードインした後、要素にポインターイベントを追加しています。

// ゲームのエンディングクレジットにアニメーションを追加
const endingUI = document.getElementById("ending-ui");
const bringUI = endingUI.animate(keysFade, timingFade);

// アニメーションクレジットの一時停止
bringUI.pause();

// この関数は、クレジットのポインターイベントを取り除く
hide(endingUI);

// 後でクレジットがフェードインされたときに、
// ポインターイベントを追加し直す
bringUI.onfinish = (event) => {
  endingUI.style.pointerEvents = "auto";
};