Unity Dotween官方案例學習

　　本文只涉及一些案例，具體查看 DoTween 官方文檔。

 

一、 Basics

public class Basics : MonoBehaviour
{
    public Transform redCube, greenCube, blueCube, purpleCube;

    IEnumerator Start()
    {
        // Start after one second delay (to ignore Unity hiccups when activating Play mode in Editor)
        yield return new WaitForSeconds(1);

        // 2秒時間移動到 0,4,0
        redCube.DOMove(new Vector3(0,4,0), 2);

        // 2秒時間從 0,4,0 移動到原始位置
        greenCube.DOMove(new Vector3(0,4,0), 2).From();
        
        // 2秒時間移動 0,4,0 相對位置
        blueCube.DOMove(new Vector3(0,4,0), 2).SetRelative();

        // 2秒時間移動 6,0,0 相對位置
        purpleCube.DOMove(new Vector3(6,0,0), 2).SetRelative();
        // 2秒內將顏色變為黃色，並且循環往復一直執行
        purpleCube.GetComponent<Renderer>().material.DOColor(Color.yellow, 2).SetLoops(-1, LoopType.Yoyo);
    }
}

 

 

 

 　　該場景主要涉及對一些 Unity 組件（transform, material）屬性的變換，當然我們也可以對其他一些組件（Audio, Camera, Light, Rigidbody, ...）進行操作。

 

二、Follow

public class Follow : MonoBehaviour
{
    public Transform target; // Target to follow
    Vector3 targetLastPos;
    Tweener tween;

    void Start()
    {
        // 啟動后先移動到目標位置，保存 Tweener 並且設置不自動銷毀
        tween = transform.DOMove(target.position, 2).SetAutoKill(false);
        // 存儲上一目標位置
        targetLastPos = target.position;
    }

    void Update()
    {
        // 目標沒有移動
        if (targetLastPos == target.position) return;
        // 修改目標位置，重新開始動畫
        tween.ChangeEndValue(target.position, true).Restart();
        // 保存目標位置，用於下次比較
        targetLastPos = target.position;
    }
}

　　該場景實現目標跟隨，當目標物移動的時候，跟隨物體會相應移動。其中涉及到 Tweener 的設置與控制。

 

三、Materials

public class Materials : MonoBehaviour
{
    public GameObject target;
    public Color toColor;

    Tween colorTween, emissionTween, offsetTween;

    void Start()
    {
        // 獲取材質組件
        Material mat = target.GetComponent<Renderer>().material;

        // 改變材質顏色，動畫默認狀態為暫停
        colorTween = mat.DOColor(toColor, 1).SetLoops(-1, LoopType.Yoyo).Pause();

        // 修改材質光線發散顏色，注意屬性 _EmissionColor
        emissionTween = mat.DOColor(new Color(0, 0, 0, 0), "_EmissionColor", 1).SetLoops(-1, LoopType.Yoyo).Pause();

        // 修改材質偏移，動畫變化為線性，持續增加
        offsetTween = mat.DOOffset(new Vector2(1, 1), 1).SetEase(Ease.Linear).SetLoops(-1, LoopType.Incremental).Pause();
    }

    // Toggle methods (called by UI events)

    public void ToggleColor()
    {
        // 切換動畫狀態，播放或者暫停
        colorTween.TogglePause();
    }

    public void ToggleEmission()
    {
        emissionTween.TogglePause();
    }

    public void ToggleOffset()
    {
        offsetTween.TogglePause();
    }
}

　　該場景主要實現 material 的動畫效果。其中 SetEase 方法設置動畫的屬性變化方式（線性，拋物線等，就是變化速度）。

　　

 四、Paths

public class Paths : MonoBehaviour
{
    public Transform target;
    public PathType pathType = PathType.CatmullRom;
    // 路徑
    public Vector3[] waypoints = new[] {
        new Vector3(4, 2, 6),
        new Vector3(8, 6, 14),
        new Vector3(4, 6, 14),
        new Vector3(0, 6, 6),
        new Vector3(-3, 0, 0)
    };

    void Start()
    {
        // 按路徑運動
        // 使用 SetOptions 函數使路徑封閉
        // 使用 SetLookAt 函數使物體朝向路徑本身
        Tween t = target.DOPath(waypoints, 4, pathType)
            .SetOptions(true)
            .SetLookAt(0.001f);
        // 線性變化且無限循環
        t.SetEase(Ease.Linear).SetLoops(-1);
    }
}

　　該場景實現了物體按路徑運動動畫。

　　

 五、Sequences

public class Sequences : MonoBehaviour
{
    public Transform cube;
    public float duration = 4;

    IEnumerator Start()
    {
        yield return new WaitForSeconds(1);

        // 新建一個 Sequence
        Sequence s = DOTween.Sequence();
        // 添加一個動畫，持續一個周期
        s.Append(cube.DOMoveX(6, duration).SetRelative().SetEase(Ease.InOutQuad));
        // 添加一個動畫，持續半個周期
        s.Insert(0, cube.DORotate(new Vector3(0, 45, 0), duration / 2).SetEase(Ease.InQuad).SetLoops(2, LoopType.Yoyo));
        // 添加一個動畫，半個周期時開始，切持續半個周期
        s.Insert(duration / 2, cube.GetComponent<Renderer>().material.DOColor(Color.yellow, duration / 2));
        s.SetLoops(-1, LoopType.Yoyo);
    }
}

 

　　 該場景實現了一個簡單的 Sequences。其中 Append 方法是將動畫加在末尾，而 Insert 方法是可以加到任意位置。

 

 六、UGUI

public class UGUI : MonoBehaviour
{
    public Image dotweenLogo, circleOutline;
    public Text text, relativeText, scrambledText;
    public Slider slider;

    void Start()
    {
        // Logo 圖片漸漸消失動畫
        dotweenLogo.DOFade(0, 1.5f).SetAutoKill(false).Pause();

        // 圖片顏色動畫
        circleOutline.DOColor(RandomColor(), 1.5f).SetEase(Ease.Linear).Pause();
        // 圖片部分顯示動畫，結束后按相反方向
        circleOutline.DOFillAmount(0, 1.5f).SetEase(Ease.Linear).SetLoops(-1, LoopType.Yoyo)
            .OnStepComplete(()=> {
                circleOutline.fillClockwise = !circleOutline.fillClockwise;
                circleOutline.DOColor(RandomColor(), 1.5f).SetEase(Ease.Linear);
            })
            .Pause();

        // 文字動畫
        text.DOText("This text will replace the existing one", 2).SetEase(Ease.Linear).SetAutoKill(false).Pause();
        relativeText.DOText(" - This text will be added to the existing one", 2).SetRelative().SetEase(Ease.Linear).SetAutoKill(false).Pause();
        scrambledText.DOText("This text will appear from scrambled chars", 2, true, ScrambleMode.All).SetEase(Ease.Linear).SetAutoKill(false).Pause();

        // 滑動條動畫
        slider.DOValue(1, 1.5f).SetEase(Ease.InOutQuad).SetLoops(-1, LoopType.Yoyo).Pause();
    }

    // Called by PLAY button OnClick event. Starts all tweens
    public void StartTweens()
    {
        DOTween.PlayAll();
    }

    // Called by RESTART button OnClick event. Restarts all tweens
    public void RestartTweens()
    {
        DOTween.RestartAll();
    }

    // Returns a random color
    Color RandomColor()
    {
        return new Color(Random.Range(0f, 1f), Random.Range(0f, 1f), Random.Range(0f, 1f), 1);
    }
}

　　該場景主要實現了 UGUI 組件的動畫。