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.
Please help us by answering a few questions.
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 |