【Unity】AnimationCurve をコードで初期化する

2017/09/02 Sat [edit]

　ただのメモ。簡単にイージングなどの効果の得られる「AnimationCurve」をインスペクタで設定できるようにしたとき、あらかじめ初期値を入れておきたいことってあるよね。カーブは一度エディタで登録しておけば使い回しできるけど、デフォルトに無い曲線などのときはコードで設定おくと便利。ググれば複雑なカーブのライブラリもあるけど、手軽に作ってしまいたいときの簡易リファレンス的な。

■直線的なカーブ（Linear）
■イージング的なカーブ（EaseInOut）
■トップスピード→だんだんゆっくりになっていくイージング（カスタム：Keyframe を2つ使う）
■ジャンプのようなイージング（カスタム：Keyframe を3つ使う）
■線形補間に利用する（～.Lerp に利用する）

(※) Unity 2017.2.0b9 / Windows10(x64) で確認

■直線的なカーブ（Static Function）

using UnityEngine;

public class AnimationCurveTest : MonoBehaviour {

    public AnimationCurve curve = AnimationCurve.Linear(0, 0, 1, 1); //timeStart, valueStart, timeEnd, valueEnd

}

●カーブエディタでは

●移動に使ってみると

　AnimationCurve.Linear() は static なメソッドである。引数は開始と終了の時間と値のペアを列挙したものになる。

■イージング的なカーブ（ゆっくりと始まり、ゆっくりと終わる）（Static Function）

using UnityEngine;

public class AnimationCurveTest : MonoBehaviour {

    public AnimationCurve curve = AnimationCurve.EaseInOut(0, 0, 1, 1); //timeStart, valueStart, timeEnd, valueEnd

}

●カーブエディタでは

●移動に使ってみると

　AnimationCurve.EaseInOut() も static なメソッドである。引数は開始と終了の時間と値のペアを列挙したものになる。ゆっくりと始まり、ゆっくりと終わる移動などが簡単に作れる。

■トップスピード→だんだんゆっくりになっていくイージング[※プリセットと同じ]（カスタム：Keyframe を2つ使う）

using UnityEngine;

public class AnimationCurveTest : MonoBehaviour {

    public AnimationCurve curve = new AnimationCurve(
        new Keyframe(0f, 0f, 0f, 2f), //time, value, inTangent, outTangent
        new Keyframe(1f, 1f, 0f, 0f)  //time, value, inTangent, outTangent
    );
}

●カーブエディタでは

●移動に使ってみると

　このカーブはエディタのプリセットにも入っているが、上記のようにコードで設定することもできる。独自にカーブのポイントを打っていくには「Keyframe」を「AnimationCurve」のコンストラクタに列挙していく。

　「inTangent, outTangent」とはエディタのグラフから見れば、それぞれのポイントの左側・右側の傾きで、タンジェント(Tangent)というのは数学的に y/x で表せる傾きのことだから、0.5f(=1/2) なら「上に1, 右に2」の傾き、2f(=2/1) なら「上に2, 右に1」の傾きと考えれば良いのではないだろうか。時間軸に対する値なので、時間や値の逆数（分子と分母を入れ替える）を設定すれば簡単に反転したカーブも作れる。

■ジャンプのようなイージング（カスタム：Keyframe を3つ使う）

using UnityEngine;

public class AnimationCurveTest : MonoBehaviour {

    public AnimationCurve curve = new AnimationCurve(
        new Keyframe(0f, 0f, 0f, 4f),   //time, value, inTangent, outTangent
        new Keyframe(0.5f, 1f, 0f, 0f), //time, value, inTangent, outTangent
        new Keyframe(1f, 0f, -4f, 0f)   //time, value, inTangent, outTangent
    );
}

●カーブエディタでは

●移動に使ってみると（Y軸方向）

　「トップスピード→だんだんゆっくり→頂点まで来たら反転→だんだん速く」といったジャンプのような動きになる。独自にカーブのポイントを打っていくには「Keyframe」を「AnimationCurve」のコンストラクタに列挙していく。

　「inTangent, outTangent」とはエディタのグラフから見れば、それぞれのポイントの左側・右側の傾きで、タンジェント(Tangent)というのは数学的に y/x で表せる傾きのことだから、0.5f(=1/2) なら「上に1, 右に2」の傾き、2f(=2/1) なら「上に2, 右に1」の傾きと考えれば良いのではないだろうか。時間軸に対する値なので、時間や値の逆数（分子と分母を入れ替える）を設定すれば簡単に反転したカーブも作れる。

■線形補間に利用する

　一応使い方を書いておくと、「AnimationCurve.Evaluate()」を使って、時間軸に対する値を取り出せばカーブのような変化になる。特に線形補間系のメソッド「～.Lerp()」と組み合わせると使い勝手が良い。以下のサンプルはオブジェクトの位置をスイっと動かす、かなりの手抜きのコードだが、応用すればアルファでフェードイン・アウトしたり、スケールを変化してアクションを表現したり、スワイプでスイっと動かすなんてこともできる（もちろんエディタ上ではアニメーションクリップを使う手もある）。

using UnityEngine;

public class AnimationCurveTest : MonoBehaviour {

    public AnimationCurve curve = new AnimationCurve(
        new Keyframe(0f, 0f, 0f, 2f), //time, value, inTangent, outTangent
        new Keyframe(1f, 1f, 0f, 0f)  //time, value, inTangent, outTangent
    );

    public Vector3 destination;
    public float duration = 1f;

    Vector3 origin;
    float passed = 0;

    // Use this for initialization
    void Start () {
        origin = transform.position;
    }

    // Update is called once per frame
    void Update () {
        passed += Time.deltaTime;
        float t = curve.Evaluate(Mathf.Clamp01(passed / duration));
        transform.position = Vector3.Lerp(origin, destination, t);
    }
}

　もっと複雑なカーブが欲しい・イージングタイプを知りたい場合は、以下の参考URLを使うのも良いだろう。

（参考）
・AnimationCurveのプリセットにペナーイージングを加える
・AnimationCurveをInspectorで設定し、スクリプトから使う
・Easing Function早見表

※トゥイーンとして使うなら DOTween みたいなものでも良いかも。
・DOTween (Asset Store)
・DOTween (公式：英語)
・DOTweenをふわっとまとめてみた
・【Unity】Tween アニメーション（DOTween）の話

■DOTween 参考書籍

●床や柱のイルミネーションにイージングを入れて、いい感じにフェードイン・アウトさせている

プロ生ちゃんライブWebGL版https://t.co/2RcI82yh8p
v5.1のときはカクカクしてサイズも巨大で使い物にならなかったけど、v5.4では動きもよくサイズも小さくなってる。問題もあるがやっと見れるものになった… pic.twitter.com/Hw2YVPjON5
— ヽ｜∵｜ゝ(Fantom) (@fantom_1x) 2016年9月5日