本文只涉及一些案例,具体查看 DoTween 官方文档。
一、 Basics
1 public class Basics : MonoBehaviour
2 {
3 public Transform redCube, greenCube, blueCube, purpleCube;
4
5 IEnumerator Start()
6 {
7 // Start after one second delay (to ignore Unity hiccups when activating Play mode in Editor)
8 yield return new WaitForSeconds(1);
9
10 // 2秒时间移动到 0,4,0
11 redCube.DOMove(new Vector3(0,4,0), 2);
12
13 // 2秒时间从 0,4,0 移动到原始位置
14 greenCube.DOMove(new Vector3(0,4,0), 2).From();
15
16 // 2秒时间移动 0,4,0 相对位置
17 blueCube.DOMove(new Vector3(0,4,0), 2).SetRelative();
18
19 // 2秒时间移动 6,0,0 相对位置
20 purpleCube.DOMove(new Vector3(6,0,0), 2).SetRelative();
21 // 2秒内将颜色变为黄色,并且循环往复一直执行
22 purpleCube.GetComponent<Renderer>().material.DOColor(Color.yellow, 2).SetLoops(-1, LoopType.Yoyo);
23 }
24 }
该场景主要涉及对一些 Unity 组件(transform, material)属性的变换,当然我们也可以对其他一些组件(Audio, Camera, Light, Rigidbody, ...)进行操作。
二、Follow
1 public class Follow : MonoBehaviour
2 {
3 public Transform target; // Target to follow
4 Vector3 targetLastPos;
5 Tweener tween;
6
7 void Start()
8 {
9 // 启动后先移动到目标位置,保存 Tweener 并且设置不自动销毁
10 tween = transform.DOMove(target.position, 2).SetAutoKill(false);
11 // 存储上一目标位置
12 targetLastPos = target.position;
13 }
14
15 void Update()
16 {
17 // 目标没有移动
18 if (targetLastPos == target.position) return;
19 // 修改目标位置,重新开始动画
20 tween.ChangeEndValue(target.position, true).Restart();
21 // 保存目标位置,用于下次比较
22 targetLastPos = target.position;
23 }
24 }
该场景实现目标跟随,当目标物移动的时候,跟随物体会相应移动。其中涉及到 Tweener 的设置与控制。
三、Materials
1 public class Materials : MonoBehaviour
2 {
3 public GameObject target;
4 public Color toColor;
5
6 Tween colorTween, emissionTween, offsetTween;
7
8 void Start()
9 {
10 // 获取材质组件
11 Material mat = target.GetComponent<Renderer>().material;
12
13 // 改变材质颜色,动画默认状态为暂停
14 colorTween = mat.DOColor(toColor, 1).SetLoops(-1, LoopType.Yoyo).Pause();
15
16 // 修改材质光线发散颜色,注意属性 _EmissionColor
17 emissionTween = mat.DOColor(new Color(0, 0, 0, 0), "_EmissionColor", 1).SetLoops(-1, LoopType.Yoyo).Pause();
18
19 // 修改材质偏移,动画变化为线性,持续增加
20 offsetTween = mat.DOOffset(new Vector2(1, 1), 1).SetEase(Ease.Linear).SetLoops(-1, LoopType.Incremental).Pause();
21 }
22
23 // Toggle methods (called by UI events)
24
25 public void ToggleColor()
26 {
27 // 切换动画状态,播放或者暂停
28 colorTween.TogglePause();
29 }
30
31 public void ToggleEmission()
32 {
33 emissionTween.TogglePause();
34 }
35
36 public void ToggleOffset()
37 {
38 offsetTween.TogglePause();
39 }
40 }
该场景主要实现 material 的动画效果。其中 SetEase 方法设置动画的属性变化方式(线性,抛物线等,就是变化速度)。
四、Paths
1 public class Paths : MonoBehaviour
2 {
3 public Transform target;
4 public PathType pathType = PathType.CatmullRom;
5 // 路径
6 public Vector3[] waypoints = new[] {
7 new Vector3(4, 2, 6),
8 new Vector3(8, 6, 14),
9 new Vector3(4, 6, 14),
10 new Vector3(0, 6, 6),
11 new Vector3(-3, 0, 0)
12 };
13
14 void Start()
15 {
16 // 按路径运动
17 // 使用 SetOptions 函数使路径封闭
18 // 使用 SetLookAt 函数使物体朝向路径本身
19 Tween t = target.DOPath(waypoints, 4, pathType)
20 .SetOptions(true)
21 .SetLookAt(0.001f);
22 // 线性变化且无限循环
23 t.SetEase(Ease.Linear).SetLoops(-1);
24 }
25 }
该场景实现了物体按路径运动动画。
五、Sequences
1 public class Sequences : MonoBehaviour
2 {
3 public Transform cube;
4 public float duration = 4;
5
6 IEnumerator Start()
7 {
8 yield return new WaitForSeconds(1);
9
10 // 新建一个 Sequence
11 Sequence s = DOTween.Sequence();
12 // 添加一个动画,持续一个周期
13 s.Append(cube.DOMoveX(6, duration).SetRelative().SetEase(Ease.InOutQuad));
14 // 添加一个动画,持续半个周期
15 s.Insert(0, cube.DORotate(new Vector3(0, 45, 0), duration / 2).SetEase(Ease.InQuad).SetLoops(2, LoopType.Yoyo));
16 // 添加一个动画,半个周期时开始,切持续半个周期
17 s.Insert(duration / 2, cube.GetComponent<Renderer>().material.DOColor(Color.yellow, duration / 2));
18 s.SetLoops(-1, LoopType.Yoyo);
19 }
20 }
该场景实现了一个简单的 Sequences。其中 Append 方法是将动画加在末尾,而 Insert 方法是可以加到任意位置。
六、UGUI
1 public class UGUI : MonoBehaviour
2 {
3 public Image dotweenLogo, circleOutline;
4 public Text text, relativeText, scrambledText;
5 public Slider slider;
6
7 void Start()
8 {
9 // Logo 图片渐渐消失动画
10 dotweenLogo.DOFade(0, 1.5f).SetAutoKill(false).Pause();
11
12 // 图片颜色动画
13 circleOutline.DOColor(RandomColor(), 1.5f).SetEase(Ease.Linear).Pause();
14 // 图片部分显示动画,结束后按相反方向
15 circleOutline.DOFillAmount(0, 1.5f).SetEase(Ease.Linear).SetLoops(-1, LoopType.Yoyo)
16 .OnStepComplete(()=> {
17 circleOutline.fillClockwise = !circleOutline.fillClockwise;
18 circleOutline.DOColor(RandomColor(), 1.5f).SetEase(Ease.Linear);
19 })
20 .Pause();
21
22 // 文字动画
23 text.DOText("This text will replace the existing one", 2).SetEase(Ease.Linear).SetAutoKill(false).Pause();
24 relativeText.DOText(" - This text will be added to the existing one", 2).SetRelative().SetEase(Ease.Linear).SetAutoKill(false).Pause();
25 scrambledText.DOText("This text will appear from scrambled chars", 2, true, ScrambleMode.All).SetEase(Ease.Linear).SetAutoKill(false).Pause();
26
27 // 滑动条动画
28 slider.DOValue(1, 1.5f).SetEase(Ease.InOutQuad).SetLoops(-1, LoopType.Yoyo).Pause();
29 }
30
31 // Called by PLAY button OnClick event. Starts all tweens
32 public void StartTweens()
33 {
34 DOTween.PlayAll();
35 }
36
37 // Called by RESTART button OnClick event. Restarts all tweens
38 public void RestartTweens()
39 {
40 DOTween.RestartAll();
41 }
42
43 // Returns a random color
44 Color RandomColor()
45 {
46 return new Color(Random.Range(0f, 1f), Random.Range(0f, 1f), Random.Range(0f, 1f), 1);
47 }
48 }
该场景主要实现了 UGUI 组件的动画。