イージングとは何か？
イージング（Easing）とは、アニメーションの速度変化のカーブのことで、動きに緩急をつけることができます。
同じ時間、同じ距離でもイージングをかけることで印象は全く変わります。
また、イージングをかけていない状態をリニアといい、常に一定の速度で動く状態になります。
直線的な動き（Linear）
例えば、ポジションを左から右へ移動させる動きをさせた時に、何も設定をしていない状態では速度は一定の速度で緩急もなく動きます。
イージング(Easing)
イージングをつけることで、初速、中速、終速の速度をカーブで変化させることができるようになります。
イージングによる変化
カーブの設定は上のような曲線を編集し、速度の調整を行います。
横が時間、縦が変化値になり、縦の変化値を大きくすればするほど動きが大きくなり、横の時間を長くすればするほど、動きは遅くなります。
上の画像では初速、中速、終速で動きが変化しており、動き出しはゆっくり → 中間で加速 → 終わりで減速という動きになります。
イージングでできること（デザイン・実装両面）
イージングはリニアを含めると4つのタイプで動きの表現を行います。
この4つでUIに対して様々な動き、緩急をつけることができるようになります。
ゲームのUIアニメーションではイージングを使用し、ユーザーの操作を快適に感じるようにすることや、前の動きと後の動きを繋げることで動き全体の流れを作ることができます。
ゲームのUIアニメーション使用例
イーズアウトの使用例
イーズアウトは各UIがINする時に使用することが多く、画面遷移先の画面の動きになります。
初速を早く移動させつつ、最後はゆっくり止まるため、画面遷移した時に最初に入ってくるUIはクイックに入ってきつつ、ゆっくりと止まるので、UIの動きを把握しやすくなります。
イーズインの使用例
イーズインは各UIがOUTする時に使用することが多く、画面遷移する前の画面の動きになります。
現在の画面内にUIがある状態なので、そのUIをゆっくりと動かしつつ、最後は加速して画面外にはけさせることや消すことで、UIの退出を表現します。
イーズインアウトの使用例
イーズインアウトは画面内に表示されているUIが別の場所へ移動するときや、イーズアウトとイーズインアウトを組み合わせてバウンドするような動きの表現として使用することが多く、画面外へのUIの移動に使用することよりも画面内でのUIの動きで使用することが多くなります。
ダイアログの動きの例では、最初はイーズアウトから入り、バウンドする動きでイーズインアウトで滑らかに静止しています。
イージングの要点
イージングは、動きの速度変化をカーブで制御し、UIアニメーションに自然さと理解しやすさを与えるための基本要素です。
リニアは常に一定速度で動きますが、実務では「イーズアウト（入る動き）」「イーズイン（出る動き）」「イーズインアウト（画面内移動・バウンド表現）」を使い分けて、初速・中速・終速の緩急で動きを作ります。
ゲームUIでは、画面遷移のINにイーズアウト、OUTにイーズイン、画面内の移動やバウンドにイーズインアウトを適用することで、操作感の快適さと全体の流れを統一できます。
ただし、全てのイージングがINの時はイーズアウトというわけではなく、意図に合ったイージングを選び、カーブを微調整してアニメーション品質を底上げしていくことが大切になります。
