DoTween详细使用教程

Posted 2020-10-06 袁益达

DoTween 默认配置加上链式调用API风格，配上lambda匿名函数调用，非常简单清晰好用。DoTween实现了通用的缓动算法，能够配置出各种想要的动画效果。另外，队列延迟回调函数，也能完成各种异步延迟执行功能。

 

DoTween 为各种Unity的对象做了函数绑定，方便调用。比如Transform， Color， Text， Material等都可以直接调用DoTween的动画API。我们先从通用的动画函数来了解。

 

[csharp] view plain copy

1. public static Tweener To(DOGetter<T> getter, DOSetter<T> setter, T endValue, float duration)  
2.   
3. // 创建一个 Tweener 从当前坐标0.5秒移动到坐标Vector3(100, 100, 100)位置   
4. Tween tween = DOTween.To  
5.               (  
6.                   ()  => transform.position,   
7.                   (x) => transform.position = x,   
8.                   new Vector3(100, 100, 00),   
9.                   0.5f  
10.               );  

 

参数T可以是各种数值类型，比如int，float，long ，vector等。getter, setter就是两个代理函数，可以使用匿名函数传入。getter 用来获取当前需要设置的值，setter用来设置当前数值，参数x是有DoTween计算过后的数值。endValue就是最终的数值，duration是使用的时间。和标准的Tween动画是一样的。

 

getter, setter可以是多条语句的函数，就需要用{}括起来。理解起来就是，DoTween利用传入的两个函数，来获取初始值和每帧设置值，这样就能驱使数值的变化反映到属性上。这里返回tween对象，是为了链式调用，DoTween几乎所有的函数调用都会返回tween对象，能够继续调用其他函数。

 

[csharp] view plain copy

1. DOTween.To  
2.   (  
3.       ()  => audio.volume,  
4.       (v) => audio.volume = v,  
5.       1.0f,  
6.       10  
7.   )  
8.  .OnComplete  
9.  (  
10.     () =>  
11.     {  
12.        // 回调执行  
13.     }      
14.  )  
15.  .SetEase(Ease.OutSine);  

比如，这里我们链式调用了完成时候的回调函数，和设置缓动算法。缓动对象可以枚举所有通用的缓动算法。

 

 

 

另外，还有一个专门对颜色处理的通用函数。

 

[csharp] view plain copy

1. Image stepImage = transoform.GetComponent<Image>();  
2. DOTween.ToAlpha  
3. (  
4.     ()  => stepImage.color,  
5.     (c) => stepImage.color = c,  
6.     0,   
7.     0.5f  
8. );  

这里和To的函数调用相似，只是这里仅仅会变化alpha数值来改实现变透明度的动画。

 

 

 

接下来就是一些列绑定Transform， Color， Text， Material的使用。

 

[csharp] view plain copy

1. // 0.5秒内局部坐标变化到10，10，10  
2. transform.DOLocalMove(new Vector3(10, 10, 10), 0.5f);  
3.   
4. // 0.5秒内x世界坐标变换到5  
5. transform.DOMoveX(5, 0.5f);  
6.   
7. // 0.5f秒内世界坐标相对当前，运动到5,5,5, 使用OutCubic缓动算法  
8. transform.DOBlendableMoveBy(new Vector3(5, 5, 5), 0.5f).SetEase(Ease.OutCubic)  
9.   
10. // text 2秒内渐变透明到0  
11. text.DOFade(0, 2f).SetEase(Ease.OutSine);  
12.   
13. // 0.3秒内材质属性fade变化到5，使用缓动算法  
14. material.DOFloat(5, "_fade", 0.3f).SetEase(Ease.OutSine);  
15.   
16. // 5秒内弹跳3次，弹到10,10,10位置  
17. transform.DOJump(new Vector3(10, 10, 10), 3, 5f);  

 

总结起来就是：

 

• Do开头，带Local的就是局部坐标系，不带的就是世界坐标系
• 所有函数调用都是链式调用
• 可以自己设置缓动算法类型，也可以用一些配好的，比如Jump
• 符合直觉得API，move就是移动，scale就是缩放，rotation就是旋转，color就是颜色，数值的变化就是Float
• 更多的功能用法直接在程序中自动补全就可以理解意思

 

 

最后，我们来了解一下非常好用强大的动画队列Sequence的使用。

[csharp] view plain copy

1. DOTween.Sequence();  

返回一个Sequence对象，以后Sequence对象都是返回Sequence对象，依然可以像Tween一样链式调用。重点介绍几个函数的意义。

• Append(tweener) 可以再队里追加一个tweener，会按照顺序依次执行这个tweener，一个tweener完成执行下一个。也就是说上面产生的tweener都能放进去。
• Insert(time, tweener) 可以再队列插入高一二tweener，第一个参数时间，就是在这个队列执行多少时间后，执行插入的tweener。
• AppendInterval(time) 追加一个事件间隔，在队列执行的过程中，停顿一个事件，然后继续执行。
• AppendCallback(func) 追加一个匿名函数，在队列中执行一个回调。

然后，看个列子，队列可以执行动画，执行回调函数，按照我们需要的时间和次序进行，非常方便符合直觉使用。

 

[csharp] view plain copy

1.               
2. DOTween.Sequence()  
3.        .Append  
4.        (  
5.           go.transform.DOBlendableMoveBy(new Vector3(0, move, 0), 0.5f).SetEase(Ease.OutCubic)  
6.        )  
7.        .Append  
8.        (  
9.       go.transform.DOBlendableMoveBy(new Vector3(0, move, 0), 1.5f).SetEase(Ease.OutSine)  
10.        )  
11.        .Insert  
12.        (  
13.           0.8f,  
14.           text.DOFade(0, 2f).SetEase(Ease.OutSine)  
15.        )  
16.        .AppendCallback  
17.        (  
18.           () =>  
19.           {  
20.              DestroyImmediate(go);  
21.           }  
22.         );  
23.   
24.   
25. DOTween.Sequence()  
26.        .AppendInterval(0.1f)  
27.        .AppendCallback  
28.        (  
29.          () =>  
30.          {  
31.            dialog.OnOpenComplete();  
32.          }  
33.        )  
34.        .Play();