Unity：DOTween 动画插件快速上手

ゝ一世哀愁。 2024-04-20 12:20 4阅读 0赞

#### 1、简介 ####

DOTween是最常用的动画插件之一，比使用Unity自带脚本写动画，方便很多，可以快速的通过DOTween提供的接口实现所要的动画。  
DOTween商城地址：http://dotween.demigiant.com  
可以直接放在package里面或者工程的plugins里面，如果是pkg包直接导入就行。

#### 2、引用 ####

使用前需要添加引用

using DG.Tweening;

基本写法看上去是这样的：  
DOTween.XX(各种参数).循环(参数).等待(参数).变化(参数).事件响应(响应函数)…;  
unity属性.DO动作(各种参数).循环(参数).等待(参数).变化(参数).事件响应(响应函数)

#### 3、 DOTween.To ####

DOTween通用的方法DOTween.To，可以控制移动、旋转、颜色变化，大多数动画使用该方法解决。  
常见方法：

public static Tweener To(DOGetter<long> getter, DOSetter<long> setter, long endValue, float duration);

getter：代理，初始值，  
setter：代理，变化的值  
endValue：结束的目标值  
duration：变化的时长  
举例，我们可以控制X，Y距离变化的动画：

DOTween.To(() => shadow.effectDistance.x, _ => shadow.effectDistance = new
                    Vector2(_, shadow.effectDistance.y), info.shade.x, 15f);
    DOTween.To(() => shadow.effectDistance.y, _ => shadow.effectDistance = new
                    Vector2(shadow.effectDistance.y, _), info.shade.y, 15f);

实现延迟触发效果：

/// <summary>
    /// 延迟时间触发
    /// </summary>
    /// <param name="delayedTimer"></param>
    /// <param name="callback"></param>
    public void DOTweenToDelay(float delayedTimer, Action callback)
    {
        float timer = 0;
        //DOTwwen.To()中参数：前两个参数是固定写法，第三个是到达的最终值，第四个是渐变过程所用的时间
        Tween t = DOTween.To(() => timer, x => timer = x, 1, delayedTimer)
                      .OnStepComplete(() =>
                      {
                          callback?.Invoke();
                      });
    }

![在这里插入图片描述][90da364391384fa6bd3ac4e1af739257.png]

#### 4、Transform.DoXXX ####

DOTween结合Unity对象应用，可以实现DoMove、DORotate等效果的动画。

##### 4.1 常见的运用 #####

target:当前预制体  
targetV:移动或者旋转目标的位置  
scale：缩放的大小目标值  
clip.duration：移动的时长  
实现移动效果：

target.DOLocalMove(targetV, clip.duration).From(true)

实现缩放效果：

target.DOScale(scale, clip.duration).From(true)

实现旋转效果：

target.DORotate(targetV, clip.duration).From(true)

![在这里插入图片描述][11327ed5eefb4df3b73d0b0385d162d1.png]transform.DOPath可以设置一个路径，让游戏对象在路径上移动。如果免费的路径编辑器没有，可以用LineRenderer的编辑来代替。  
text.DOText可以让文本框里面的文字逐字显示，NPC对话内容常用到。但是，不支持Text Mesh Pro。所以推荐使用DOTween.To来代替

##### 4.2 后缀方法 #####

transform.DoXXX方法都包含很多简易后缀方法，我们可以通过这些方法设置循环、反转、等待功能。

target.DOLocalMove(targetV, clip.duration).SetLoops(2)

![在这里插入图片描述][602daf855b3a402285dc26acbf6ef7d9.png]

##### 4.3 事件响应 #####

transform.DoXXX动画结束后，还支持结束、开始、暂停等动画事件响应。

target.DOLocalMove(targetV, clip.duration).OnComplete(()=>{})

![在这里插入图片描述][aef6c9cd8580474e80f9b78029d33bbe.png]

#### 5、序列 ####

Sequence序列是让一系列的动画顺序执行，参数的话是可以把具体的设置，例如循环，等待，变化啥的变成一个统一的参数，在不同的动画中统一调用。  
创建序列：

Sequence seq = DOTween.Sequence();

可以通过每个动作统一加到一个序列通过间隔的时长进行控制播放。

//clip.startTime停顿的间隔时间
    seq.AppendInterval(clip.startTime);
    seq.AppendCallback(() =>
    {
        Debug.Log($"AppendCallback startTime = {clip.startTime}");
        if (clip.position != Vector3.zero)
        {
            seq.Append(target.DOLocalMove(targetV, clip.duration).From(true));
        }
        if (clip.rotate != Vector3.zero)
        {
           seq.Append(target.DORotate(targetV, clip.duration).From(true));
        }
        if (clip.scale != 0)
        {
            seq.Append(target.DOScale(scale, clip.duration).From(true));
        }
    });

![在这里插入图片描述][172a507d0fdf4b47ba8625eb08ea18a2.png]

#### 6、控制、协程和异步 ####

DOTween还提供动画控制、携程和异步等功能

DOTween.PauseAll();
    DOTween.PlayAll();

![在这里插入图片描述][e2b6d4c4b170448f91c47654abe44240.png]  
参考文档：[https://www.bilibili.com/read/cv16757383/][https_www.bilibili.com_read_cv16757383]

[90da364391384fa6bd3ac4e1af739257.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/db4608f97f2743feb26286a7ab2a572b.png
[11327ed5eefb4df3b73d0b0385d162d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/51ea9ab277f944bbaf93a4e5f70b1aab.png
[602daf855b3a402285dc26acbf6ef7d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/4b638f5398314e4a9ed3c2f4c623f2e2.png
[aef6c9cd8580474e80f9b78029d33bbe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/dbc737743a694fdda865be7573f4bcda.png
[172a507d0fdf4b47ba8625eb08ea18a2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/195f09e0aed54230bfc602ca6511cc0a.png
[e2b6d4c4b170448f91c47654abe44240.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/1b7739c637fb4d8885271ce70e946cae.png
[https_www.bilibili.com_read_cv16757383]: https://www.bilibili.com/read/cv16757383/