【Unity】DOTweenでカスタムイージングを作る方法（AnimationCurve活用）

// よく使うイージングの一部  
Ease.Linear       // 等速  
Ease.InOutSine    // なめらかな加減速  
Ease.OutBack      // 行き過ぎて戻る  
Ease.OutBounce    // バウンド  
Ease.InOutExpo    // 急加速・急減速

標準のイージングだけでも多くの表現が可能です。
しかし開発を進めていくと、38種では表現しきれない複雑な動きが必要になる場面が出てきます。
たとえば「最初にタメを作ってから一気に加速する」「目標位置で小さく振動してから止まる」といった動きは標準イージングでは再現できません。

そんなときに使うのがカスタムイージングです。

あわせて読みたい記事

【Unity】DOTweenで解決！スクリプトでアニメーション実装

Unityプログラミングでアニメーションさせるときのおすすめは「DOTween」。DOTween基本であるTransformのアニメーション方法を紹介します。

AnimationCurveでカスタムイージングを作る

DOTweenでカスタムイージングを作る方法はとてもシンプルです。
AnimationCurveをフィールドに定義して、SetEaseに渡すだけで独自のイージングが動作します。

using DG.Tweening;  
using UnityEngine;  

public class CustomEasingSample : MonoBehaviour  
{
    [SerializeField] private AnimationCurve _easingCurve;  

    void Start()  
    {
        transform.DOLocalMoveX(5f, 1f).SetEase(_easingCurve);  
    }
}

AnimationCurveをインスペクタに公開すると、GUIでカーブを直感的に編集できます。

【Unity】DOTweenでカスタムイージングを作る方法（AnimationCurve活用）_0

AnimationCurveのインスペクタ表示

クリックするとカーブ編集ウィンドウが開きます。
キーフレームを追加・削除したり、タンジェントを調整して自由にカーブを描けます。

【Unity】DOTweenでカスタムイージングを作る方法（AnimationCurve活用）_1

カーブ編集ウィンドウ

最初と最後に勢いを持たせて途中はじわじわ移動する、標準イージングでは作れない特殊な動きが実現できます。

【Unity】DOTweenでカスタムイージングを作る方法（AnimationCurve活用）_2

カスタムイージングの実行結果

カーブ編集で押さえておくべきポイント

AnimationCurveを効果的に使うために、まず横軸と縦軸の意味を理解しておきましょう。

横軸（Time）: 0から1の正規化された時間。0がアニメーション開始、1が終了
縦軸（Value）: 0から1の正規化された値。0が開始値、1が目標値

カーブ編集ウィンドウでの基本操作は以下の通りです。

カーブ上をダブルクリック: キーフレームの追加
キーフレームを右クリック: 削除やタンジェントモードの変更
タンジェントをドラッグ: カーブの傾きを調整

ポイントとして、縦軸の値を1より大きく設定すると目標値を一度超えてから戻る「オーバーシュート」の動きが作れます。
OutBackに似た動きを自分好みにカスタマイズしたい場合に便利です。
逆に0未満に設定すると、一度反対方向に動いてから目標に向かう表現になります。

この仕組みを理解しておくだけで、カスタムイージングの表現幅が大きく広がります。

よく使うカスタムイージングの例

実際のゲーム開発で使うカスタムイージングのパターンをいくつか紹介します。

2段階加速

最初はゆっくり、途中から一気に加速するカーブです。
UIのスライドイン演出で「タメ」を効かせたい場合に使います。

キーフレーム設定の目安は以下の通り。

2段階加速のキーフレーム

Time	Value	備考
0.0	0.0	開始
0.6	0.1	60%の時間で10%しか進まない（タメ）
1.0	1.0	残り40%で一気に到達

振動してから停止

目標位置に到着後、小さく振動してから止まるカーブ。
アイテム取得時のポップアップや、ダメージ表示などに効果的です。

縦軸の値を1.1→0.95→1.0のように上下させることで、自然な振動を表現できます。

ステップ（段階的移動）

なめらかなカーブではなく、段階的に値が変化するカーブ。
ドット絵ゲームのキャラクター移動や、レトロ風演出で使えます。

カーブ編集ウィンドウでキーフレームのタンジェントをConstantに設定すると、階段状のカーブが作れます。

AnimationCurveの再利用とチーム運用

作成したカスタムイージングはプロジェクトを越えて再利用したくなります。
おすすめの方法はScriptableObjectにAnimationCurveを保持することです。アセットとして保存・共有できるため、バージョン管理にも対応できます。

[CreateAssetMenu(fileName = "EasingPreset", menuName = "Animation/Easing Preset")]  
public class EasingPreset : ScriptableObject  
{
    public AnimationCurve curve;  
}

Assetsフォルダに右クリック → Create → Animation → Easing Presetで作成できます。

AnimationCurveの最大の強みはGUIから編集できることです。
エンジニアがコードでトゥイーンの仕組みを作り、デザイナーがインスペクタでカーブを調整するワークフローが構築できます。
イージングの微調整のたびにエンジニアの手を止める必要がなくなるため、チーム開発では特に効果的です。

ScriptableObjectと組み合わせれば「イージングプリセット集」をアセットとして管理できます。
プロジェクト全体で統一感のあるアニメーションが実現しやすくなるでしょう。

AnimationCurveをプロジェクト間で使い回す具体的な方法はこちらの記事も参考にしてみてください。

👉 【Unity】AnimationCurveをプロジェクトを越えて使い回す方法

EaseFunctionによるコードベースのカスタムイージング

SetEaseにはAnimationCurve以外にも、デリゲートで独自のイージング関数を渡す方法があります。
数学的にイージングを定義したい場合にはこちらが選択肢になります。

transform.DOLocalMoveX(5f, 1f).SetEase(CustomEaseFunction);  

// カスタムイージング関数  
float CustomEaseFunction(float time, float duration, float overshootOrAmplitude, float period)  
{
    // timeを0〜1に正規化  
    float t = time / duration;  
    // 独自の計算式  
    return t * t * (3f - 2f * t); // SmoothStep  
}

EaseFunctionの引数はtime（経過時間）、duration（全体時間）、overshootOrAmplitude、periodの4つです。
戻り値が0〜1の正規化された進行度になります。

ただし、視覚的にカーブを調整できるAnimationCurveのほうがゲーム開発では圧倒的に使いやすいです。
デザイナーやプランナーがパラメータを調整する運用を想定するなら、AnimationCurve一択と言ってよいでしょう。
EaseFunctionはライブラリやフレームワーク開発など、コードで完結させたい場面に限定して使うのがおすすめです。

カスタムイージングを使うときの注意点

AnimationCurveの横軸は0〜1に正規化されています。
DOLocalMoveX(5f, 2f)のようにDurationを2秒にしても、カーブ自体は0〜1の範囲で評価されます。
つまり同じカーブをDuration違いのトゥイーンに使い回せるということです。これはAnimationCurveの大きなメリットです。

もう1つ注意すべきがAnimationCurveのWrapMode（カーブの範囲外の挙動）。
SetEaseで使う場合、基本的に0〜1の範囲のみ評価されるためWrapModeの影響は受けません。
ただしSetLoopsと組み合わせた場合にWrapModeが影響するケースがあるため、ループ使用時は動作を確認しておきましょう。

また、AnimationCurveはシリアライズされるためGCアロケーションの心配はありません。
パフォーマンスの観点ではAnimationCurve.Evaluateの呼び出しコストは非常に小さく、毎フレーム呼ばれても問題ないレベルです。