時間補間とは

→キーフレームとは

たとえば、オブジェクトを5秒間で画面左から右へ移動させる場合、開始位置と終了位置が同じでも、途中の動き方は変えることができます。一定の速度で移動することもできますし、ゆっくり動き始めて途中で加速し、最後に減速して停止させることもできます。

このような、時間に対する値の変化させながら行う「補間」が時間補間です。

時間補間で補われるもの

時間補間は、位置だけでなく、時間によって変化する多くの要素が調整可能です。

たとえば、

• 位置

• 拡大・縮小

• 回転

• 不透明度

• エフェクトの数値

などです。

不透明度を0％から100％へ変化させる場合でも、一定の割合で明るくすることも、最初はゆっくり変化し、後半で急速に100％へ近づけることもできます。

リニア補間

時間補間をリニアにすると、キーフレーム間の値は一定の割合で変化します。

たとえば、0秒で0、5秒で100という値を設定した場合、リニア補間では1秒ごとにほぼ一定の割合で値が増えていきます。

位置のアニメーションであれば、一定速度の移動になります。

ベジェ補間

時間補間をベジェにすると、値の変化を曲線で調整できます。

これにより、動き始めをゆっくりさせたり、途中で加速させたり、停止する前に減速させたりできます。

この速度変化を調整するために使われるのが、ベジェハンドルです。

イージングとの関係

イージングは、時間補間を使って加速や減速をつける考え方です。

動き始めをゆっくりさせる「イーズイン」、終わりに向かって減速させる「イーズアウト」などがあります。

イージングは時間的な変化に関する処理なので、空間上の移動経路そのものを変えるものではありません。

空間補間との違い

時間補間が扱うのは「時間に対する値の変化」です。

一方、空間補間が扱うのは、位置のキーフレーム間をオブジェクトがどの経路で移動するかです。

たとえば、画面左から右へ移動する場合、

• 直線で移動するか

• 弧を描いて移動するか

を決めるのが空間補間です。

その経路を、

• 一定速度で進むか

• 加速しながら進むか

• 減速して停止するか

を決めるのが時間補間です。