10_10 アニメーションタイマーとしての利用

Animationオブジェクトは次の特徴を持つタイマー(便宜的にアニメーションタイマーと呼びます)としても利用できます。

  1. セットした時間の経過を教えてくれる、通常のタイマー
  2. セットした時間を繰り返し、その回数を教えてくれるタイマー
  3. セットした時間を100%として、今がその何%に当たる瞬間かを教えてくれるタイマー

1は、Animationオブジェクトのfinishイベントを利用します。2はAnimation.effect.getComputedTiming()が返すcurrentIterationを、3も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);

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA