値をイージングする【Unity】

Unityでスクリプトから値を動かす時、物理演算のAddForceみたいに滑らかな加減速（イージング）をさせたいと思うことがあります。
今回はUnityでスクリプトから値をイージングをする方法についていくつかまとめてみました。

DOTween.Toを使う

有名なアセット「DOTween」で値をイージングする方法があります。「DOTween.To」です。
使い方は以下のような感じで、毎フレームの処理をしなくても開始の1行を記述するだけで実行できます。
末尾のSetEase()でイージングの種類を指定できるところがポイントで、DOTweenに含まれる沢山のイージングを適用させることができます。

//currentValueを1.0秒でtargetValueにする

var currentValue = 0.0f;
var targetValue = 100.0f;
var duration = 1.0f;

DOTween.To(() => currentValue, (x) => currentValue =　x, targeValue, duration).SetEase(Ease.InQuad);

ただしDOTweenのイージングはUpdateでもコルーチンでもないので、動かしたい内容によっては扱いづらい場合もあります。
シンプルな動きを簡潔な記述で実行できるので、他の方法と使い分けるのが良いのかなと思います。

なお、単純にオブジェクトをイージング付きで動かすだけであればDOTween.ToではなくTransform.DOMoveやRigidbody.DOMoveなど専用の関数があります。

イージングの関数を自分で作る

DOTweenにあるEaseInQuad・EaseOutQuadなどは自分で関数を作ることもできます。
今回初めてAIにイージングの関数を書いてもらいました。
UnityでMathf.Lerpと同じ感覚で使えるように調整したものがこちらです。
aは開始値、bは終了値、tは0.0fから1.0fの補間値です。

EaseIn

public static float EaseIn(float a, float b, float t)
{
    return (b - a) * t * t + a;
}

EaseOut

public static float EaseOut(float a, float b, float t)
{
    return (b - a) * (1 - (1 - t) * (1 - t)) + a;
}

それぞれ t * t や (1 – t) * (1 – t) となっている部分の累乗回数が2乗だとQuadで、回数を増やすことでQuad→Cubic→Quart→Quintになるようです。

なおEaseInQuadとEaseOutQuadとEaseInOutについては次のAnimation Curveにも含まれているのでそちらを使っても良いかもしれません。

AnimationCurveを使う

計算式で定義された動きではなくもっと特殊な動きを自分で作りたい！という場合があるかもしれません。
そういう場合はAnimationCurveを使って独自のイージングの動きを作ることができます。

まずスクリプトの方でインスペクターで表示できるようにAnimationCurveの変数を用意します。
するとインスペクターに枠が表示されるので、クリックするとベジエカーブの編集画面が開きます。
しかも、プリセットでLinear（線形補間：左から2つ目）/ EaseInQuad（中央） / EaseOutQuad（右から2つ目） / EaseInOut（右端）があります。

プリセットから好きなものを選ぶか、ベジエカーブを好きなように編集しておきます。自分が作ったものをプリセットに登録することもできます。

値を使うときはAnimationCurve.Evaluate（0.0f~1.0fのfloat値）でカーブの値を取得することができます。
コルーチンやFixedUpdateで0から1まで値を動かすようにしてカーブの値を取得すると、カーブに従って滑らかに値を動かすことができます。

更にこれをイージングの関数と同様に使えるようにするならこんな感じです。

public static float EaseByCurve(float a, float b, float t, AnimationCurve curve)
{
    return (b - a) * curve.Evaluate(t) + a;
}

オブジェクトに事前に作った動きを適用するにはAnimationもありますが、イージングされた値だけが必要でその後の処理をスクリプトで色々やりたいのであればAnimationCurveがとても便利なのでオススメです！

AnimationCurveの使い方メモ

ちょっとだけ使い方が分かりにくいところがあったのでメモを残します。
まずハンドルの角度の指定方法が5種類あります。

Brokenには更に折り方のオプションがあって、Free・Linear・Constant・Weightedが選べます。
メニュー下の方の「Left Tangent」「Right Tangent」「Both Tangent」から設定します。

まとめ

イージングにもいろんな方法があり、簡単に実装する方法からこだわりの動きを作る方法までいろいろ出来るのでそれぞれのやり方と特徴を覚えておくのがよさそうです。
なお、値の直接変更でオブジェクトを動かす際はTime.DeltaTimeの乗算やFixedUpdateを使うなどスピードの調整に要注意です。