前回「After Effectsでスマホの上で車が走るアニメーションを作成する方法（vol.1）」では、車が走るアニメーションについて説明したので、今回は出現するアニメーションについて解説します。
今回のアニメーションでキモとなるポイントは「イージング」と「バウンス」です。
モーショングラフィックスにおける「イージング」と「バウンス」は、アニメーションをより自然で魅力的にするための重要な手法です。
イージング（Easing）
イージングとは、アニメーションの速度を滑らかに変化させる手法を指します。これにより、オブジェクトの動きが突然始まったり終わったりするのではなく、自然な加速や減速を伴って動くようになります。一般的なイージングの種類には以下のようなものがあります。
- Ease In：動きの初めが遅く、途中から加速していくパターン。
- Ease Out：動きの初めが速く、途中から減速していくパターン。
- Ease In Out：動きの初めと終わりが遅く、途中が速くなるパターン。
これにより、視覚的に心地よく、自然な動きが実現します。
バウンス（Bounce）
バウンスは、オブジェクトが跳ね返るような動きを表現する手法です。例えば、ボールが地面に落ちて反動で跳ね返る動きを模倣することが多いです。バウンス効果を使うことで、動きにエネルギーや遊び心を加えることができます。
バウンスを利用する際のポイントとしては、以下の要素が挙げられます。
- 力の伝達：バウンスの動きはエネルギーの伝達を表現するため、オブジェクトがどのように反応するかを考慮します。
- 減衰：跳ね返るごとにエネルギーが減少するため、バウンスの幅や高さが徐々に小さくなることが一般的です。
イージングとバウンスの重要性
イージングとバウンスは、モーショングラフィックスにおける基本的かつ強力なツールです。これらをうまく組み合わせることで魅力的でダイナミックなアニメーションを作成します。
前回の窓の動きが窓の光の映り込みや流線などの直線的（リニア）なアニメーションであったのと違い、今回のアニメーションはイージングとバウンスといったイーズ（加速減速）な動きのアニメーションです。イーズなアニメーションが重要な理由は以下の通りです。
1. リアリズムの向上
自然界の動きは通常、徐々に加速したり減速したりします。イージングを適用することで、アニメーションの動きが現実の物理法則に近づき、視覚的にリアルな印象を与えます。
2. 視覚的快適性
イージングを使って滑らかな動きを作ることで、視覚的に心地よい体験を提供できます。急な加速や減速がないため、目に優しくストレスを感じさせません。
3. 注目と集中
動きに変化を持たせることで、視聴者の注目を特定の部分に引きつけることができます。例えば、重要な情報やメッセージが表示される際にイージングを使ってゆっくりとフェードインすることで、視聴者の注意を引きやすくなります。
4. 感情の伝達
イージングやバウンスなどの動きの調整は、感情やエネルギーを伝えるためにも役立ちます。バウンスは楽しい感じや軽快な印象を与え、スムーズなイージングはエレガントで落ち着いた雰囲気を伝えることができます。
5. 一貫性の維持
全体のアニメーションに統一感を持たせるために、イージングを統一的に使用することが重要です。これにより、アニメーション全体がまとまりのある、プロフェッショナルな仕上がりになります。
これらの要素を考慮することで、モーショングラフィックスのアニメーションがより自然で魅力的なものになります。
空中からタイヤやボディが現れる動きを例にポイントを解説します。
現実世界で物体（こ車のタイヤ）が高いところから落ちる場合は重力が働き、時間が経つにつれて加速度がつきスピードは増します。
①上から落ちる場合は時間とともに速度が速まる
②着地して跳ね返る（下から上への移動）場合は時間と共に減速します。
③時間とともに速度が遅くなることで山が小さくなります。
この動きを繰り返して最終的にアニメーションが止まります
この動きにイーズ（速度の加速原則）を加えると速度の変化が直線ではなく曲線になります。
この動きをグラフで表したものが以下の図になります。
縦軸に速度、横軸に時間をとり、時間の経過と速度の関係を表した速度グラフです。
左のグラフはイーズがないので時間とともにエネルギーが等速で減速しグラフでは直線になります。
右のグラフはイーズをつけたので物体が下から上に移動する時には徐々に減速し山の左半分の形になり、下に落ちるときには徐々に加速するので山の右半分の形になります。
そして時間の経過とともに速度が落ちることで山が小さくなっていきます。
イーズのない動き
イーズのある動き
微妙ですが、上段のイーズのない動きと下段のイーズのある動きを比較すると、イーズのある動き方が自然な動きに感じられます。
この例はそれほど差がなくわかりにくいですが、一つのアニメーションの中にいくつもイージングやバウンスなどのエフェクトをつけることで、アニメーションがより魅力的にみえるようになります。
これはモーショングラフィックスだけにとどまらずゲームアニメーションなどにもいえることです。
サイトのUIやモーショングラフィックスなどほとんどの場合イージングを意識することで良い体験を与えることができます。
そしてこれらのいい体験がすなわちいいUXになります。