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 组件的动画。