MRが楽しい

MRやVRについて学習したことを書き残す

DOTweenを使ってUnityでイージング関数を利用する

本日は Unity の小ネタ枠です。
DOTweenを使ってUnityでイージング関数を利用する方法についてです。

DOTween

DOTween はスクリプトを介して様々なイージング関数を提供します。
assetstore.unity.com

DOTweenのインポート

DOTween (HOTween v2) は無料アセットです。アセットストアのページから[Add to My Assets]を実行するとマイアセットに登録できます。

マイアセットに登録後、Package Manager ウィンドウからアセットを[Import]します。

インポートが完了すると[DOTween Unity panel]が開きます。
本ウィンドウからはマニュアルやドキュメントへのアクセスができます。

また[Setup DOTween]ボタンをクリックしてアップデートをインポートしたり、Unity バージョンに基づいて追加のライブラリを取得したりできます。

使い方

スクリプトから以下の名前空間をインポートして利用します。

using DG.Tweening;

以下の To 関数を使って変更対象(myValue)、終了値(to)、アニメーションの持続時間(duration)を設定することができます。

DOTween.To(()=> myValue, x=> myValue = x, to, duration);

dotween.demigiant.com

または様々な DO~ 関数のショートカットも利用可能です。
例えば、トランスフォームの Y 座標を移動させるには DOMoveY 関数を利用します。

// 2秒かけて Y:3.0 の高さまで移動する
transform.DOMoveY(1, 2.0f);

dotween.demigiant.com

一例として以下のサンプルスクリプトを作成して Cube オブジェクトに設定してみました。
・DOTweenTest.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;

public class DOTweenTest : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        // 1秒かけて Y:3.0 の高さまで移動する
        transform.DOMoveY(3.0f, 1.0f);
    }
}

シーンを再生すると Cube オブジェクトが1秒かけて Y:3.0 の高さまで移動します。

イージングを設定する

SetEase 関数を使ってアニメーションに様々なイージングを設定することができます。
先ほどのサンプルスクリプトに以下のように SetEase を追加します。
・DOTweenTest.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;

public class DOTweenTest : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        // 1秒かけて Y:3.0 の高さまで移動する
        // アニメーションにイージングを設定する(今回はInOutBack)
        transform.DOMoveY(3.0f, 1.0f).SetEase(Ease.InOutBack);
    }
}

再びシーンを再生するとアニメーションにイージングがかかった先ほどと異なる動きをします。

利用可能なイージングは以下のページにサンプル一覧があります。
easings.net