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

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

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

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

ダウンロード

使い方

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(終了座標)と考えてください。
薄い●が、一定時間ごとの変化量を示しています。

0や1をはみ出しているものは間違いではなく、そういう特色を持ったタイプです。

スライムがボヨンボヨン跳ねるような効果

使うと効果的な場面

UI のイン・アウトに動きを持たせる、といった使い方が効果的です。こんな感じ。

アニメーションはフェードイン・アウトくらいで、他を意識した事がなければ、とりあえず、

  • UIのイン(移動)には CubicOut
  • UIのアウト(移動)には CubicIn
  • 画面内の移動であれば CubicInout
  • UIのフェードイン・アウトは Linear

これを守るだけでもそれらしい感じにはなると思います。慣れてきたら

  • Cubic より平坦にしたければ QuadraticSinusodai など
  • Cubic より強めの動きにしたければ Quarantic Quintic など
  • ポップな可愛らしい感じを出したければ、Back Elastic

こんな感じで使い分けてみるといいと思います。

Easeについて

大量にあるため非常に迷いますが、自分の得意な Ease タイプを決めておき、なんとなく物足りなくなったら、違うのを試してみるといいのではないでしょうか。

計算式については、色々なサイトを参考にさせていただきました。
有益な情報を有難うございました。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA