アニメーションでのイージング

イージングとは動きの緩急であり、これをアニメーションに取り入れると動きを滑らかに見せることができます。
動きを次第に早くすることをイーズイン、緩やかにしていくことをイーズアウトといいます。
イージングを活用することでアニメーションを自然体のように表現することができます。

イージングでの等加速度運動の活用

動きの緩急とは、つまり静止していたり一定の速度での動きに変化があるということです。
速度が0である静止状態や一定の速度での等速運動の速度に変化があるということともいえます。
その速度の変化は加速度で表すことができ、単位時間あたりに一定の変化量で速度が変化する動きを等加速度運動といいます。
加速度運動での経過時間と加速度と速度、位置の関係は次のようになります

v = v0 + a×t （v0は初速度、aは加速度、tは経過した時間）
この式はt時間経過した後の速度となります。

x = v0×t + a×t×t×1/2
この式はt時間経過した後の位置となります。

加速度は負の値をとることがあり、正の値では加速、負の値では減速と速度が変化します。




このスクリプトはそれぞれ等加速度運動を行うアニメーションです。
等加速度運動での時間を描写回数に置き換えています。
animation1は正の値の加速度でのアニメーションとなっています。描写の度にアニメーションが加速します。
animation2は負の値の加速度でのアニメーションです。描写の度にアニメーションが減速します。描写の制御のif文を速度vを参照するようにして速度が0以下になると描写をリセットします。
animation3はanimation2の描写の制御のif文の参照を速度vから位置xにしています。これによりアニメーションが緩急をつけてループしているように見えます。