ひとことで
時間の進み方 を曲げてから補間に渡すことで、同じ始点・終点・所要時間の動きに溜め・勢い・弾みといった「手触り」を与える関数群です。Robert Penner が整理したイージング関数（Quad、Cubic、Back、Bounce、Elastic など）が、UI やゲームのアニメーションの共通語彙になっています。
ゲームでの使いどころ
- UI の出現・消失：ポップアップを Out Back で少し行き過ぎさせると、軽快な印象になります。
- アイテム・報酬の演出：落ちてきたコインを Out Bounce で跳ねさせる、獲得したアイコンを Out Elastic で揺らす。
- カメラ・画面遷移：InOut 系（Sine、Cubic）で滑らかに移動・ズームする。
- 攻撃の予備動作：In Back で一瞬逆方向に引いてから踏み込むと、動きに重さが出ます。
しくみ
イージング関数は、 の時間を受け取って進み具合を返す関数 です。、 であれば、途中は自由です。
名前の付け方には規則があります。
- In：始めがゆっくりで、終わりに向けて加速する。
- Out：始めが速く、終わりに向けて減速する（In を 180° 回転させた形 ）。
- InOut：前半を In、後半を Out にしたもの。
| 種類 | 形 | 印象 |
|---|---|---|
| Cubic | など多項式 | 素直な加減速 |
| Back | 3 次式で一度範囲外に出る | 行き過ぎて戻る、予備動作 |
| Bounce | 放物線を複数つないだ区分関数 | 着地して跳ねる |
| Elastic | 減衰する正弦波 | ばねのように震えて収まる |
Back や Elastic は途中で 1 を超え（または 0 を下回り）ます。スケールに使う場合、負の値になると裏返るので注意します。
実装のポイント
- 関数は既存の定義に合わせる：easings.net の定義が事実上の標準です。デザイナーとの会話が「OutBack で」で通じるようになります。
- CSS の cubic-bezier：
cubic-bezier(0.34, 1.56, 0.64, 1)は Out Back に近い形です。横軸が時間のベジェ曲線として任意のカーブを作れます。 - 割り込みへの対応：アニメーション中に目標が変わる UI では、固定のイージングよりばねで追従させたほうが自然なことがあります。
つまずきやすい点
- 使いすぎ：すべての UI が弾むと、うるさく安っぽく見えます。重要な要素だけに強いイージングを使い、ほかは控えめな Out Cubic などにそろえます。
- 所要時間とのバランス：Bounce や Elastic は短すぎると震えているだけに、長すぎるとのろく見えます。0.4〜0.8 秒程度が目安です。
- 途中で逆再生する：閉じるアニメーションに同じ Out 系を逆向きに使うと、In 系の動きになり印象が変わります。閉じるときは閉じる用のイージングを選びます。
デモで試すこと
- 「イージング」を切り替え、滑るブロック・拡大するパネル・回転する宝石が同じ関数でどう変わるかを比べてください。
- 半透明の影は線形の動きです。Out Back では本体が影を追い越してから戻り、In Back では影より遅れて逆方向に引いてから出発します。
- 「所要時間」を短くしたり長くしたりして、Bounce と Elastic がいちばん気持ちよく見える長さを探してみてください。