[unity] UI に自然なアニメーションをさせる、EaseValue

DOTween 使えばいいじゃん！　と思わなくもないですが、勉強がてら、イージング計算式を通した経過値を取得するクラスを作成しました。

なお、以下の動画のような処理を簡単に行いたい場合、次の記事をご覧ください。

2021.02.04

[unity] UI に自然なアニメーションをさせる、SimpleUITransition

https://www.create-forever.games/easyvalue2

派手なトランジションは目を引き、楽しいものですが大多数のトランジションはフェードイン・アウト、移動、その複合といった場合が多いのではないでしょうか。ここではそのトランジション処理をインスペクタで簡単に設定するためのクラス、SimpleUITransition を紹介します。今回のクラスは以前紹介した EaseValue を内部で使っています。ダウンロードSimpleUITransition20210203_3ダウンロードAssets/Scenes/SampleScene2.unity がサンプルになります。EaseValue.cs、SimpleUITransition.cs を使います。使い方RectTransform を持つ U...

あくまで今回は Ease の経過値を得るだけの最低限のクラスです。即使い物にはなりませんが「気がつくと非同期処理で簡易的なイン・アウト処理を作ってる」方には役立つかもしれません。

ダウンロード

EaseValue20210131a ダウンロード

使い方

EaseValue.Get(time, endtime, start, end)
EaseValue.GetVector2(time, endtime, start, end)

例）Imageを横移動させる。開始座標はX：-1000、終了座標はX：500、0.5秒で減速アニメーションさせる

    [SerializeField]
    Image            image = null;  // インスペクタで登録

    // 適当に置いたボタンの OnClick コール
    public void OnClick()
    {
        // 移動アニメーションを呼び出す
        StartCoroutine(moveAnimation());
    }

    IEnumerator moveAnimation()
    {
        const float ANIMATION_ENDTIME = 0.5f;

        float time = Time.time;

        while (true)
        {
            float t = Time.time - time;

            Vector3 trans = image.gameObject.transform.localPosition;
            trans.x = EaseValue.Get(t, ANIMATION_ENDTIME, -1000, 500, EaseValue.eEase.CubicOut);
            image.gameObject.transform.localPosition = trans;

            if (t >= ANIMATION_ENDTIME)
            {
                break;
            }
            yield return null;
        }
    }

eEase は大量にありますが、サンプルシーンを実行すると変化の仕方を確認することができます。
一番左が0（開始座標）、一番右が1（終了座標）と考えてください。
薄い●が、一定時間ごとの変化量を示しています。