Easing / Back / Bounce / Elastic

This explanation is currently available in Japanese.

ひとことで

時間の進み方 $t$ を曲げてから補間に渡すことで、同じ始点・終点・所要時間の動きに溜め・勢い・弾みといった「手触り」を与える関数群です。Robert Penner が整理したイージング関数（Quad、Cubic、Back、Bounce、Elastic など）が、UI やゲームのアニメーションの共通語彙になっています。

ゲームでの使いどころ

• UI の出現・消失：ポップアップを Out Back で少し行き過ぎさせると、軽快な印象になります。
• アイテム・報酬の演出：落ちてきたコインを Out Bounce で跳ねさせる、獲得したアイコンを Out Elastic で揺らす。
• カメラ・画面遷移：InOut 系（Sine、Cubic）で滑らかに移動・ズームする。
• 攻撃の予備動作：In Back で一瞬逆方向に引いてから踏み込むと、動きに重さが出ます。

しくみ

イージング関数は、$[0, 1]$ の時間を受け取って進み具合を返す関数 $e(t)$ です。$e(0) = 0$、$e(1) = 1$ であれば、途中は自由です。

名前の付け方には規則があります。

• In：始めがゆっくりで、終わりに向けて加速する。
• Out：始めが速く、終わりに向けて減速する（In を 180° 回転させた形 $1 - e_{\text{in}}(1 - t)$）。
• InOut：前半を In、後半を Out にしたもの。

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 系の動きになり印象が変わります。閉じるときは閉じる用のイージングを選びます。

デモで試すこと

1. 「イージング」を切り替え、滑るブロック・拡大するパネル・回転する宝石が同じ関数でどう変わるかを比べてください。
2. 半透明の影は線形の動きです。Out Back では本体が影を追い越してから戻り、In Back では影より遅れて逆方向に引いてから出発します。
3. 「所要時間」を短くしたり長くしたりして、Bounce と Elastic がいちばん気持ちよく見える長さを探してみてください。