Animationオブジェクトは次の特徴を持つタイマー(便宜的にアニメーションタイマーと呼びます)としても利用できます。
- セットした時間の経過を教えてくれる、通常のタイマー
- セットした時間を繰り返し、その回数を教えてくれるタイマー
- セットした時間を100%として、今がその何%に当たる瞬間かを教えてくれるタイマー
１は、Animationオブジェクトのfinishイベントを利用します。２はAnimation.effect.getComputedTiming()が返すcurrentIterationを、３もgetComputedTiming()が返すprogressプロパティを利用します。
アニメーションタイマーとは？
アニメーションタイマーに必要なものはタイミングパラメータだけなので、ターゲットとキーフレームパラメータをnullで作成します。そして時間の経過を教えるタイマーでは、durationプロパティだけを指定して作成します。
// キーフレームとターゲットはnull
const keyframes = null;
const target = null;
// タイミングは時間の長さだけ
const timings = {duration:2000};
// 2秒を数えるタイマー
const effect = new KeyframeEffect( target, keyframes, timings);
const animationTimer = new Animation(effect, document.timeline);