DOTween路径动画详解与使用
转载请注明出处
DOTween插件一般与UGUI结合使用
DoTween的运动方式
1、DOTween.To()方法
对变量做一个动画,通过插值的方式修改一个值的变化
1
using UnityEngine;
2
using System.Collections;
3
using DG.Tweening;//引入DoTween命名空间
4
public class GameStart : MonoBehaviour
5
{
6
7
public Vector3 myValue = new Vector3(0, 0, 0);
8
void Start()
9
{
10
//对变量做一个动画,通过插值的方式去修改一个值的变化
11
DOTween.To(() => myValue, x => myValue = x, new Vector3(10, 0, 0), 2);//用两秒的时间从0,0,0变化到10,10,10
12
//()=> myValue,表示返回值为myValue,x=>myValue=x,表示将系统计算好的x值(当前值到目标值的插值)赋给myValue,new Vector3(10,0,0),表示达到的目标值,2表示所需时间
13
}
2、控制Cube和UI面板的动画
1)、将脚本挂在Cube上,并且在Update方法中把myValue的值赋给当前位置,这样便实现了Cube从当前位置移动到了目标位置
1
using UnityEngine;
2
using System.Collections;
3
using DG.Tweening;//引入DoTween命名空间
4
public class GameStart : MonoBehaviour
5
{
6
7
public Vector3 myValue = new Vector3(0, 0, 0);
8
void Start()
9
{
10
//对变量做一个动画,通过插值的方式去修改一个值的变化
11
DOTween.To(() => myValue, x => myValue = x, new Vector3(10, 0, 0), 2);//用两秒的时间从0,0,0变化到10,10,10
12
//()=> myValue,表示返回值为myValue,x=>myValue=x,表示将系统计算好的x值(当前值到目标值的插值)赋给myValue,new Vector3(10,0,0),表示达到的目标值,2表示所需时间
13
}
14
void Update()
15
{
16
transform.position = myValue;//赋值给当前位置
17
}
2)、UI面板的移动
新建任务面板,将脚本挂到UI面板上
1
using UnityEngine;
2
using System.Collections;
3
using DG.Tweening;//引入DoTween命名空间
4
public class GameStart : MonoBehaviour
5
{
6
7
private Vector3 myValue = new Vector3(1500, 0, 0);
8
// public RectTransform TaskPanelTransform;//UGUI是通过RectTransform组件来控制移动属性的
9
void Start()
10
{
11
//对变量做一个动画,通过插值的方式去修改一个值的变化
12
DOTween.To(() => myValue, x => myValue = x, new Vector3(0, 0, 0), 2);//用两秒的时间从0,0,0变化到10,10,10
13
//()=> myValue,表示返回值为myValue,x=>myValue=x,表示将系统计算好的x值(当前值到目标值的插值)赋给myValue,new Vector3(10,0,0),表示达到的目标值,2表示所需时间
14
}
15
void Update()
16
{
17
transform.localPosition = myValue;//UGUI中坐标为局部坐标
18
}
19
}
3)、对float类型的值进行修改
1
public float myValue2=0;
2
void Start()
3
{
4
DOTween.To(() => myValue2, x => myValue2 = x, 10, 2);//表示将一个类型的值从0变为10,所需时间是2秒
5
}
3、小案例:用按钮控制UI面板的显示和隐藏
将脚本挂在Canvas上
1
using UnityEngine;
2
using System.Collections;
3
using UnityEngine.UI;
4
using DG.Tweening;
5
public class MyButton : MonoBehaviour
6
{
7
private Button myButton;
8
private RectTransform taskPanelTransform;//UGUI是通过RectTransform组件来控制移动属性的
9
private bool isShow = false;
10
void Start()
11
{
12
myButton = transform.Find("Button").GetComponent<Button>();
13
taskPanelTransform = transform.Find("Panel").GetComponent<RectTransform>();
14
myButton.onClick.AddListener(OnClickBtn);//UGUI中监听按钮的方法
15
Tweener tweener = taskPanelTransform.DOLocalMove(new Vector3(0, 0, 0), 1);//修改的是局部坐标,默认动画完后会被销毁
16
//Tweener对象保存这个动画的信息,每次调用do类型的方法都会调用一个tweener对象,这个对象使用DoTween来管理
17
tweener.SetAutoKill(false);//把SetAutoKill自动销毁设置为false
18
tweener.Pause();//让动画在开始时暂停
19
}
20
public void OnClickBtn()
21
{
22
// taskPanelTransform.DOMove(new Vector3(0, 0, 0),1);//DOMove()方法是Dotween扩展的方法,表示经过1秒运动到0,0,0的位置(修改的是世界坐标)
23
if (isShow == false)
24
{
25
// taskPanelTransform.DOPlay();//让动画只播放一次
26
taskPanelTransform.DOPlayForward();//让动画向前播放
27
isShow = true;
28
}
29
else
30
{
31
taskPanelTransform.DOPlayBackwards();//倒放动画的方法
32
isShow = false;
33
}
34
}
35
}
FromTween:表示让物体从目标位置移动到当前位置,即等同于播放反向的移动动画
DOMoveX()、DOMoveY()、DOMoveZ()
如果只是让物体的单个坐标移动,可直接用DOMoveX()、DOMoveY()、DOMoveZ()方法控制移动动画,参数为(目标位置,所需时间)
1
transform.DOMoveX(5, 1);
From()
DoTween中任何调用动画的方法后面都可以添加From(),表示从目标位置移动到当前位置
1
transform.DOMoveX(5, 1).From();//表示让物体从目标位置移动到当前位置
From(true)
表示目标坐标等于当前坐标加上当前目标坐标,如果物体当前坐标为2,那么这行代码表示从目标位置(5+2),经过1秒,移动到当前位置(2)
1
transform.DOMoveX(5, 1).From(true);
DOLocalMoveX()、DOLocalMoveY()、DOLocalMoveZ()
表示局部坐标的位移动画方法。
DoTween中所有对动画的设置都是通过对象Tweener来完成的
1
Tweener tweener=transform.DOLocalMoveX(0, 2f);
SetEase()
我们可以通过次方法来设置动画的曲线,曲线动画效果很多,在此仅做三个案例,其他的可以在系统给的枚举类型中找
Ease.InBack
表示物体先向后一点,再向前播放
1
tweener.SetEase(Ease.InBack);
Ease.InBounce
相当于一个蓄力进入的效果
1
tweener.SetEase(Ease.InBounce);
Ease.OutBounce
相当于一个落地之后的弹跳效果
1
tweener.SetEase(Ease.OutBounce);
SetLoops()
我们可以通过此方法设置动画循环的次数
1
tweener.SetLoops(2);//表示动画的循环次数
OnComplete()
表示事件函数,当前动画播放完后调用另一个方法,参数为需要调用的方法
1
void Update()
2
{
3
if (Input.GetMouseButtonDown(0))
4
{
5
Tweener tweener = transform.DOLocalMoveX(0, 2f);//DoTween中所有对动画的设置都是通过对象Tweener来完成的
6
tweener.SetEase(Ease.OutBounce);//相当于一个落地之后弹跳的效果
7
tweener.SetLoops(2);//表示动画的循环次数
8
tweener.OnComplete(OnClick);//表示当前动画播放完之后调用的事件,相当于一个注册方法,参数为需要注册的方法
9
}
10
}
11
void OnClick()
12
{
13
print("sss");
14
}
DOText()
对话框文字动画,该方法显示打字机效果
1
private Text text;
2
void Start ()
3
{
4
text = GetComponent<Text>();
5
}
6
void Update () {
7
if (Input.GetMouseButtonDown(0))
8
{
9
text.DOText("轰隆隆……\n大地在颤抖,\n这是哪里?\n为什么我的头会这么痛……\n……谁来救救我……",10);//表示再两秒内显示参数内文本(打字机效果)
10
}
11
}
DOShakePosition()
屏幕震动效果,原理是让摄像机进行随机方向的位移,产生震动的假象
1
if (Input.GetMouseButtonDown(0))
2
{
3
transform.DOShakePosition(0.8f);//表示震动时间是0.8秒,震动方向随机
4
transform.DOShakePosition(0.8f,new Vector3(1,1,0));//表示震动时间是0.8秒,震动方向为x和y方向,震动强度为1
5
}
DOColor()、DOFade()
颜色渐变和透明度渐变动画
1
if (Input.GetMouseButtonDown(0))
2
{
3
text.DOText("轰隆隆……\n大地在颤抖,\n这是哪里?\n为什么我的头会这么痛……\n……谁来救救我……", 10);//表示再两秒内显示参数内文本(打字机效果)
4
text.DOColor(Color.blue, 1f);//渐变颜色动画
5
text.DOFade(1, 5);//渐变透明度动画参数为(透明度,渐变时间),其中0为不透明,1为完全透明
6
}
DoTween插件的可视化操作
在物体上添加DoTweenAnimation脚本
![](https://i-blog.csdnimg.cn/blog_migrate/22a605a879d70296297332aec1b445ca.png)
如何在脚本中控制DoTweenAnimation动画脚本的播放
前提,脚本挂在面板上,并且取消DoTweenAnimation面板的自动播放和自动销毁
1
using UnityEngine;
2
using System.Collections;
3
using DG.Tweening;
4
using UnityEngine.UI;
5
6
public class Panel : MonoBehaviour
7
{
8
9
private DOTweenAnimation tweenAnimation;
10
private Button _btnButton;
11
private bool isShow = false;
12
void Start ()
13
{
14
tweenAnimation = GetComponent<DOTweenAnimation>();
15
_btnButton =transform.parent.Find("Button").GetComponent<Button>();
16
_btnButton.onClick.AddListener(OnClickBtn);
17
18
}
19
void OnClickBtn()
20
{
21
if (isShow==false)
22
{
23
tweenAnimation.DOPlayForward();
24
isShow = true;
25
}
26
else
27
{
28
tweenAnimation.DOPlayBackwards();
29
isShow = false;
30
}
31
}
32
}
DoTweenPath路径编辑器
在场景中添加一个Cube,在Cube身上添加组件DOTweenPath
参数:
Shift+Ctrl:添加路径点
Shift+Alt:移除路径点
AutoPlay:自动播放动画
AutoKill:自动删除动画
Duration:动画时长
Delay:延迟时长
Ease:动画曲线,Linear:匀速
Loop:循环次数,-1表示死循环
LoopType:循环模式,Restart:重新启动,表示走完路径后从开始重新走;Yoyo:悠悠球:从开始走到结尾,再从结尾走到开始
Incremental:增量模式
PathType:路径模式
CatmullRom:曲线;Linear:直线
ClosePath:封闭路径,表示使路径首尾相连
LocalMovement:是否是本地坐标
Orientation:运动朝向
ToPath:朝向路径方向
Look At Transform:朝向一个目标物体
Look At Position:朝向一个目标位置
Relative:相对的,表示路径跟随物体移动
Show Indexs是否显示索引
触发事件和路径点的坐标的设置
添加按钮控制动画的播放
在场景中添加Button,并且将Cube拖进Button的OnClick事件方法中选择DOTweenPath的DOTogglePause方法,实现当点击按钮后开始播放动画,再次点击时会停止播放(前提:将DOTweenPath组件的AutoPaly和AutoKill选项取消选择)