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
は 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";
};
仕様書
Specification |
---|
Web Animations # dom-animation-onfinish |
Web Animations # finish-event |
ブラウザーの互換性
BCD tables only load in the browser