10_8 タイミングパラメータの書き方

Element.animate()の第2引数やnew KeyframeEffect()の第3引数には、アニメーションの長さの数値(ミリ秒単位の整数)か、以下のタイミングに関するプロパティ値が、オブジェクト形式で指定できます。

CSSプロパティにあるもの

delay:animation-delayと同じ。初期値は0。

direction:animation-directionと同じ。初期値はnormal。

easing:animation-timing-functionに対応。初期値はlinear。(ただしanimation-timing-functionの初期値はease)。

fill:animation-fill-modeと同じ。初期値はnone。

iterations:animation-iteration-countと同じ。初期値はInfinity。

CSSプロパティにないもの

endDelay

アニメーションの終了後、アニメーションを完了するまでの遅延時間(ミリ秒値)。初期値は0。たとえば連続するアニメーションで、次のアニメーションを開始するまでの間(ま)に利用できる。

iterationStart

アニメーションの1周期の中での、アニメーションを開始する位置。0.5を指定すると、1周期の半分進んだ位置から再生が始まる。初期値は0.0。

次のサンプルを見てください。

WALKMAN

この例では、下記のタイミングパラメータを使用しています。

 const timings = { duration:2000, iterations:3, ease:'ease-in',delay:5000, direction:'alternate', endDelay:3000, fill:'forwards'}; 

アニメーション全体の長さを図で表すと、次のようになります。

[Play]ボタンのクリックで、アニメーションはスタートし、歩きが始まります(歩きのアニメーションはCSSで作成しています)が、まだ移動しません(図の①)。これは、キーフレームパラメータのdelay:5000が発効し、5秒の待ち時間が発生しているからです。

開始から5秒後、移動アニメーションが始まり、Walkmanは1.5往復します。これはiterations:3によるものです。そして図の③で移動は終わりますが、fill:forwardsが指定してあるので元の位置には戻らず、endDelay:3000によって3秒間、足踏みをした後、アニメーションは終了します。

タイミングパラメータの情報は、AnimationEffectReadOnly.getTiming()メソッド(Animation.effect.getTiming())で得ることができます。

コメントを残す

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

CAPTCHA