您的位置:首页 > 移动开发 > Unity3D

【Unity】DoTween插件的使用

2018-01-31 11:16 591 查看
http://blog.csdn.net/sinat_20559947/article/details/69356785


DoTween从何而来

在NGUI中提供了UITween 

来支持UI的动画编写,极度降低了代码的复杂度

然而,我们的UGUI中并没有类似UITween的功能进行支撑 

所以我们用到了第三方插件 DoTween

在我们Unity官方的UGUI的Demo中UI的动画是使用Animator来制作的,试想一下,如果我们的UI如果需要动画效果,那么就需要使用 

AnimationController,除此之外,还需要去编辑动画,如果数量不多 

的UI可以这样,如果UI过多的需要动画,那么工作量就有些庞大了

所以现在市面上绝大多数使用UGUI开发的公司都使用了DoTween来 

辅助完成UI动画的设计,当然,DoTween也可以应用到3D物体上


记得大概2014年的时候就有了这款插件,这款插件最开始的时候就是应用到3D游戏物体上的动画,后来才被扩展到
UGUI

好的,废话说完了….


DoTween简介

DoTween分 免费版 和 Pro版 两个版本 

DoTween官网:http://dotween.demigiant.com/index.php 

免费版下载:http://dotween.demigiant.com/download.php 

Pro版下载:http://dotween.demigiant.com/pro.php 

DoTween官方文档:http://dotween.demigiant.com/documentation.php

Pro版本DOTween Animation和DOTween Path这两个组件,支持可视化编辑

献上一份破解版的DoTween插件仅供学习使用:https://pan.baidu.com/s/1coypie


DoTween的使用

1.首先在官网上下载DoTween的最新版 

注意:从官网下载的是zip的压缩包,解压之后需要将文件夹手动拖拽到工程中去

2.成功导入之后Unity的工程中在Unity编辑器中会出现Tools一项 

出现之后点击Tools->DOTween Utility Panel

3.之后会弹出DoTween的面板,点击SetUp DoTween完成自动设置

如果你不写代码的话,前面的3个步骤就完成了DoTween的配置

但是,如果你要在代码中使用DoTween,那么 

在代码中,使用DoTween的时候我们需要引入using DG.Tweening;


DoTween代码示例

值的渐变: 

DoTween.To()提供了一个通用的方法,可以改变一个值,int,float 

或者vector3等等…

using UnityEngine;
using System.Collections;
// 引入DoTween命名空间
using DG.Tweening;

public class FirstDoTween : MonoBehaviour
{
private float myValue = 0;
// Use this for initialization
void Start ()
{
// 参数1:需要改变的值
// 参数2:x是myValue变成"endValue"的过程不断返回的值
// 参数3:endValue 目标值
// 参数4:myValue变成endValue需要的时间
// 将myValue变成"endValue"所对应的值
// DOTween.To (() => myValue, x => myValue = x, 5, 5);

//-【简化后】------------------------------------

DOTween.To (() => myValue, x => transform.position = new Vector3 (x, 0, 0), 5, 5);
}

// Update is called once per frame
void Update ()
{
//      transform.position = new Vector3 (myValue, 0, 0);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30



物体Transform属性值的改变



using UnityEngine;
using System.Collections;
using DG.Tweening;

public class MyDoMove : MonoBehaviour
{
// Update is called once per frame
void Update ()
{
// 让当前物体从x=-10,移动到x=10,整个过程必须是9秒钟完成
//      transform.DOMoveX (10, 9);
transform.DOLocalMoveX (10, 9);
//      transform.DOMoveY (5, 2);
//      transform.position = Vector3.Lerp (transform.position, new Vector3 (10, 0, 0), Time.deltaTime);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

播放往返动画 

重点:DoTween的每一句代码都会产生一个动画,这个动画是Tweener类型的,可以接收并用代码进行一系列设置

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using DG.Tweening;

public class MoveImage : MonoBehaviour
{
private Transform _imageTrans;

// Tweener是DoTween动画的返回值类型
private Tweener _tweener;

// 图片是否在场景中
private bool OnScene = false;

void Start ()
{
_imageTrans = GameObject.Find ("Image").transform;

// 给按钮添加点击事件
GetComponent <Button> ().onClick.AddListener (OnButtonClick);

//-----------------------------------------
// 将image图片x的坐标移动到0点
_tweener = _imageTrans.DOLocalMoveX (0, 0.5f);

// 暂停动画播放
_tweener.Pause ();

// 动画播放完成之后,不自动销毁
_tweener.SetAutoKill (false);

}

public void OnButtonClick ()
{
//      // 播放动画(动画播放完成之后会自动删除DoTween动画)
//      _tweener.Play ();

//-----------------------------------------
// 如果Image不在场景中,就移动到Canvas中
if (OnScene == false) {
// 向前播放动画
_tweener.PlayForward ();
OnScene = true;

} else if (OnScene == true) {
_tweener.PlayBackwards ();
OnScene = false;
}

}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

设置动画的运动方式,如:匀速运动 

设置循环次数

using UnityEngine;
using System.Collections;
using DG.Tweening;

public class MyMove4 : MonoBehaviour
{

// Use this for initialization
void Start ()
{
// 从5的位置,移动到当前物体所在的位置
//      transform.DOMoveX (5, 3).From ();

//-----------------------------------------
// 让物体的x坐标从当前位置移动到5的位置,在3秒钟内
Tweener tween = transform.DOMoveX (10, 3);
// 设置匀速移动
tween.SetEase (Ease.Linear);

// 设置循环次数,-1表示无限循环
//      tween.SetLoops (-1);

// 动画播放完成之后的回调函数
tween.OnComplete (TweenComplete);

}

public void TweenComplete ()
{
Debug.Log ("动画播放完成啦!");
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

控制UGUI的文本组件,文字以打印机的特效显示

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using DG.Tweening;

public class DoText : MonoBehaviour
{
private Text _text;
// Use this for initialization
void Start ()
{
string str = "主播Miss在微博上晒出一张健身照 网友评论都炸了!";

_text = GetComponent <Text> ();
_text.DOText (str, 5);

//      _text.DOColor (Color.yellow, 5);
_text.DOBlendableColor (Color.yellow, 5);
}

// Update is called once per frame
void Update ()
{

}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

屏幕震动效果 

其实就是让摄像机的位置动了几下

using UnityEngine;
using System.Collections;
using DG.Tweening;

public class DoShake : MonoBehaviour
{

// Use this for initialization
void Start ()
{
transform.DOShakePosition (2f, new Vector3 (2, 2, 3));

transform.DOShakeScale (2, new Vector3 (3, 3, 3));
}

// Update is called once per frame
void Update ()
{

}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

还有很多很多功能… 

就不一一赘述了,在官网的文档里面介绍了DoTween的所有方法 

几乎对所有的组件都进行了一个类似于上面的扩展,大家自行学习吧 

明天见 (^__^)

官方文档地址:http://dotween.demigiant.com/documentation.php
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: