Unity 使用 Dotween 的 Sequence 制作UI动画并且可重复利用

前言

DOTween可以制作简易的UI动画，避免创建大量的Animator，本篇文章介绍一下我制作UI动画时的一些技巧

效果展示

一、DOTween是什么？

DOTween是UnityAssetStore中一个免费的插件，用于创建简单的补间动画，常用与UI动画，延迟调用，移动旋转，打字机等效果

二、使用步骤

1.导入DOTween

UnityAssetStore中添加到我的资源，在Windows->PackageManager ，Packages选择My Assets，搜索DOTween，点击import全部导入即可

2.配置DOTween

第一次导入DOTween需要等待一定时间编译完成，出现此面板后点击Setup DOTween（如果没有出现此面板，点击）

下一个出现的面板点击apply即可

3.使用代码编写动画

using DG.Tweening;

Sequence se;

    private void Awake()
    {
        se = DOTween.Sequence();
        se.SetAutoKill(false);
        se.Pause();

        CanvasGroup[] canvasGroups=GetComponentsInChildren<CanvasGroup>();
        se.Append(canvasGroups[0].DOFade(0, 1f).From().SetDelay(2));
        se.Append(canvasGroups[0].GetComponent<RectTransform>().DOAnchorPosX(200f, 1f).From(true).SetEase(Ease.OutExpo));
        se.Insert(0.5f, canvasGroups[1].DOFade(0, 1f).From())
           .Join(canvasGroups[1].GetComponent<RectTransform>().DOAnchorPosX(-200f, 1f).From(true).SetEase(Ease.OutExpo))
           .Join(canvasGroups[2].DOFade(0, 1f).From())
           .Join(canvasGroups[2].GetComponent<RectTransform>().DOAnchorPosY(-200f, 1f).From(true).SetEase(Ease.OutExpo));

    }
    private void Update()
    {
        if(Input.GetKeyDown(KeyCode.Escape))
        {
            se.Restart();
        }
    }

实现效果为

注：此UI界面分为顶部，中部，底部三部分，每一个CanvasGroup代表其中一部分，每一部分的UI均放在对应CanvasGroup下面，CanvasGroup可以管控其子物体所有UI的透明度，tween表示动画

1.顶部UI在1秒内从0到1显示

2.顶部UI显示完毕后，从当前右侧200单位距离1秒内移动到当前位置

3.在当前序列播放到0.5秒时，中部UI在1秒内从0到1显示

同时从当前左侧200单位距离1秒内移动到当前位置

同时底部UI在1秒内从0到1显示

同时底部UI从当前下方200单位距离1秒内移动到当前位置

4.代码API解释

1.Sequnce se = DOTween.Sequence();//创建一个新的序列，用于存放补间动画

2.se.SetAutoKill(false);//当序列播放完毕后，不自动Kill（如果被Kill，动画被回收无法再次播放）

3.se.Pause();//当前序列动画暂停（如果不暂停创建后就会播放）

4.se.Append(tween);//当前序列追加一个动画，追加的动画会按顺序依次播放，不会同时播放

5.se.Insert(time,tween);//在当前序列播放到time秒后播放tween，同时播放

6.se.Join(tween);//在当前序列中最后一个插入的tween的开始时间（受delay影响）播放tween，同时播放

7.se.Restart();//动画重新播放

8.rectransform.DOAnchorPosX(200f, 1f).From(true);//从自身当前右侧200单位距离1秒内移动到当前****位置

（From方法表示从指定位置移动到当前位置，true则表示相对位置，如果不加true，代码会像下面的）

rectransform.DOAnchorPosX(rectransform.anchoredPosition.x+200f, 1f).From()

注：当使用From方法时，无论当前tween是否有延迟，只要添加进队列或者创建动画，对象会直接被拉到起始位置

SetEase(ease)设置缓动类型，各种缓动类型效果见

DOTween缓动类型动画效果图

总结

使用此方法可以简单创建多种UI动画，并且方便管理，无需保存无用数据，可以在已经搭好的UI界面直接添加动画