動畫插件DOTween.To的使用詳解

一、DOTween.To是什麼

DOTween.To是一款針對Unity引擎的動畫插件，可以極大地簡化動畫製作的流程，增強了動畫的表現力。它的主要功能是用於在Unity場景中控制和創建Tween動畫。DOTween.To擁有靈活的API，支持多種動畫效果，非常適合用於UI交互元素和對象的動畫製作。

下面我們來看一個使用DOTween.To創建Tween動畫的示例：

DOTween.To(() => transform.position, x => transform.position = x, new Vector3(0f, 0f, 0f), 1f)
    .SetEase(Ease.OutQuint);

這段代碼的作用是讓某個物體在1秒內沿着x、y、z坐標軸的位置向(0,0,0)移動，並且動畫效果為緩出。其中SetEase()函數用於設置動畫效果類型。

二、DOTween.To的常用API

1. DOTween.To()

DOTween.To()函數是DOTween.To的核心API，用於創建簡單的動畫，參數如下：

• getter：取值方法，在動畫中會被不斷調用以獲取屬性的當前值。
• setter：設置方法，在動畫中會被不斷調用以設置屬性的值。
• endValue：屬性的目標值。
• duration：動畫的持續時間。

下面是一個使用DOTween.To()創建動畫的示例：

public Vector3 moveTarget;

private void OnMouseDown()
{
    DOTween.To(() => transform.position, x => transform.position = x, moveTarget, 1f);
}

這段代碼的作用是讓某個物體在鼠標點擊事件發生時移動到指定位置moveTarget。一旦物體被點擊，Tween動畫就會開始，並在1秒鐘內將物體移動到目標位置。

2. SetEase()

SetEase()函數用於設置Tween動畫的緩動效果。DOTween.To()中預定義了常用的緩動效果類型，例如Ease.Linear, Ease.OutSine, Ease.InOutQuint等。這些效果類型可以通過SetEase()函數直接應用到動畫上，例如：

DOTween.To(() => transform.position, x => transform.position = x, moveTarget, 1f)
    .SetEase(Ease.OutQuint);

這段代碼的作用是讓Tween動畫在結束時應用Ease.OutQuint緩動效果。

3. OnComplete()

OnComplete()函數用於設置Tween動畫結束時的回調函數。回調函數可以是任何C#委託類型的方法，例如Action、Func等，可以執行特定的邏輯操作或調用其他方法。例如：

DOTween.To(() => transform.position, x => transform.position = x, moveTarget, 1f)
    .SetEase(Ease.OutQuint)
    .OnComplete(() => Debug.Log("Tween animation complete!"));

這段代碼的作用是在Tween動畫結束時輸出一段調試信息。

三、DOTween.To的高級用法

1. 多個Tween動畫的組合

當需要在同一對象上實現多個Tween動畫時，可以使用序列和並行動畫。

1.1 DOTween.Sequence()

DOTween.Sequence()函數用於創建一個Tween動畫序列，使多個Tween動畫按照指定的順序逐個播放。例如：

Sequence mySequence = DOTween.Sequence();
mySequence.Append(DOTween.To(() => transform.position, x => transform.position = x, new Vector3(0f, 0f, 0f), 1f));
mySequence.Append(DOTween.To(() => transform.localScale, x => transform.localScale = x, new Vector3(2f, 2f, 2f), 1f));
mySequence.Play();

這段代碼的作用是創建一個序列動畫，首先將物體移動到(0,0,0)的位置，接着將物體縮放為原來的2倍，整個動畫的持續時間為2秒鐘。

1.2 DOTween.Parallel()

DOTween.Parallel()函數用於創建一個Tween動畫集合，使多個Tween動畫同時播放。例如：

Sequence myParallel = DOTween.Parallel();
myParallel.Append(DOTween.To(() => transform.position, x => transform.position = x, new Vector3(0f, 0f, 0f), 1f));
myParallel.Append(DOTween.To(() => transform.localScale, x => transform.localScale = x, new Vector3(2f, 2f, 2f), 1f));
myParallel.Play();

這段代碼的作用是創建一個集合動畫，同時播放將物體移動到(0,0,0)的位置和將物體縮放為原來的2倍的Tween動畫，整個動畫的持續時間為1秒鐘。

2. 自定義動畫插值函數

在Tween動畫中，除了預定義的顏色、攝像機等數據類型外，也可以自定義數據類型，以便使用DOTween.To()函數針對這些數據類型創建Tween動畫，這時候需要自定義插值函數Lerp()。例如：

public struct MyData
{
    public float x;
    public float y;
    public float z;

    public static MyData Lerp(MyData a, MyData b, float t)
    {
        MyData result = new MyData();
        result.x = Mathf.Lerp(a.x, b.x, t);
        result.y = Mathf.Lerp(a.y, b.y, t);
        result.z = Mathf.Lerp(a.z, b.z, t);
        return result;
    }
}

private void OnMouseDown()
{
    MyData startValue = new MyData();
    startValue.x = 0f;
    startValue.y = 0f;
    startValue.z = 0f;

    MyData endValue = new MyData();
    endValue.x = 5f;
    endValue.y = 10f;
    endValue.z = 15f;

    DOTween.To(() => startValue, x => startValue = x, endValue, 1f)
        .SetEase(Ease.OutQuint)
        .OnComplete(() => Debug.Log("Tween animation complete!"))
        .OnUpdate(() => {
            transform.position = new Vector3(startValue.x, startValue.y, startValue.z);
        })
        .SetTarget(gameObject)
        .SetAsCached();
}

這段代碼的作用是自定義了一個數據類型MyData並實現了自己的插值函數Lerp()。在鼠標點擊事件發生時，開始一個Tween動畫，並將自定義數據類型MyData作為Tween動畫的起始值和終止值。動畫完成後輸出一段調試信息，並將物體的位置設置為Tween動畫的當前值。

3. 快速尋找Tween動畫

當在場景中使用了大量的Tween動畫，需要通過Tween動畫名快速尋找Tween動畫時，可以使用DOTween里的靜態API方法。

3.1 DOTween.Sequence()

DOTween.Sequence()方法創建並直接啟動一個Tween動畫，可以在方法中添加Tween動畫序列中的所有動畫，啟動後可以使用靜態方法DOTween.Sequence()來尋找並操作這個Tween動畫序列。例如：

SimpleButton[] buttons = GetComponentsInChildren();
Sequence mySequence = DOTween.Sequence().Append(buttons[0].transform.DOMoveY(buttons[0].transform.position.y + 90f, 1f));
mySequence.Append(buttons[1].transform.DOMoveY(buttons[1].transform.position.y - 90f , 1f));
mySequence.SetEase(Ease.InOutSine);
mySequence.SetLoops(-1, LoopType.Yoyo);
mySequence.SetAutoKill(false);

// 快速通過Tween動畫名尋找Tween動畫，並啟動、停止、暫停等操作
DOTween.Sequence("myAnim").Join(mySequence).Pause();
DOTween.Pause("myAnim");
DOTween.Play("myAnim");

這段代碼的作用是創建一個動畫序列，在動畫序列中每個按鈕在垂直方向上來回移動。使用DOTween.Sequence()方法創建動畫序列實例，並將Tween動畫的引用放到mySequence序列對象中。然後通過DOTween.Sequence()靜態API方法快速尋找這個Tween動畫序列，並對其進行操作。

3.2 DOTween.TweensById()

DOTween.TweensById()方法用於通過Tween動畫名來查找Tween動畫，返回Tween動畫對象列表。例如：

Tween[] tweens = DOTween.TweensById("myAnim");
foreach (Tween tween in tweens)
{
    tween.PlayForward();
}

這段代碼的作用是查找Tween動畫名為”myAnim”的動畫，並將它們全部向前播放。

四、總結

DOTween.To是一款極為優秀的動畫插件，它提供了豐富靈活的API，為我們在遊戲開發中提供了很大的幫助。在製作Tween動畫時，特別是針對UI和對象的動畫效果，DOTween.To都能夠提供便利，使開發人員可以更快速、更高效地實現遊戲動畫效果的製作。