[Edge]。→、、
アニメーションの再生が終了したときに発生します。
mdn： アニメーションが自然に終了したとき、または Animation.finish() メソッドが呼び出されて、アニメーションがすぐに終了したとき。
注： 「paused」プレイ状態は「finished」プレイ状態に取って代わります。アニメーションが一時停止と終了の両方の場合、「paused」状態が報告される状態です。startTime を
document.timeline.currentTime - (Animation.currentTime * Animation.playbackRate)
に設定することで、アニメーションを強制的に「finished」状態にすることができます。
| バブリング | ¶なし |
|---|---|
| キャンセル可能 | ¶いいえ |
| インターフェイス | AnimationPlaybackEvent |
| イベント ハンドラー プロパティ | onfinish |
Event から継承します。
HTML：
<DIV id=IdTest style="width:1em">■</DIV> <BUTTON id=IdPlay>再生</BUTTON> <BUTTON id=IdPause>一時停止</BUTTON> <BUTTON id=IdEnd>終了</BUTTON> <BUTTON id=IdCancel>中断</BUTTON> <BR> <SPAN id=IdLog></SPAN>
JavaScript：
KF=new KeyframeEffect( //キーフレームの指定：
IdTest,
[
{transform:'translateX(0)'}, {transform:'translateX(500px)'} //X軸移動。
],
{duration:5000, fill:'forwards'} //掛ける時間、？。
);
Ani=new Animation(KF, document.timeline); //アニメーション生成。
function JobPlay(){ //「再生」ボタンが押された時の処理：
IdLog.innerHTML=""; //表示。
Ani.play(); //アニメーション再生。
}
function JobPause(){ //「一時停止」ボタンが押された時の処理：
IdLog.innerHTML=""; //表示。
Ani.pause(); //アニメーション一時停止。
}
function JobEnd(){ //「速度」ボタンが押された時の処理：
IdLog.innerHTML=""; //表示。
Ani.finish(); //アニメーション終了。
}
function JobCancel(){ //「中断」ボタンが押された時の処理：
IdLog.innerHTML=""; //表示。
Ani.cancel(); //アニメーション キャンセル。
}
IdPlay.onclick=JobPlay; //ボタンにイベント割り当て。
IdPause.onclick=JobPause; //ボタンにイベント割り当て。
IdEnd.onclick=JobEnd; //ボタンにイベント割り当て。
IdCancel.onclick=JobCancel; //ボタンにイベント割り当て。
function Job(eve){ //finish イベントの処理：
D=eve; //＝[object]：[object AnimationPlaybackEvent]。「再生」してからできるだけすぐに「終了」を押した。
詳細
//isTrusted＝[boolean]：true
//currentTime＝[number]：5000
//timelineTime＝[number]：6317.777999999999
//type＝[string]：finish
//target＝[object]：[object Animation]
//currentTarget＝[object]：[object Animation]
//eventPhase＝[number]：0
//bubbles＝[boolean]：false
//cancelable＝[boolean]：false
//defaultPrevented＝[boolean]：false
//composed＝[boolean]：false
//…
IdLog.innerHTML="終了しました"; //表示。
}
Ani.onfinish=Job;
→KeyframeEffect()、new Animation()、play()、pause()、finish()、cancel()。