DoTween全解析（入门篇）

概述：

DoTween，Itween，这些名字作为一个Unity开发人员听起来并不陌生，它们在动画方面表现出了令人折服的能力，今天我带着大家来一起认识一下这款插件。

首先我先给大家提前说明的一个概念就是，千万不要觉得动画插件好像是不是只能用在ui上面，其实不是的啊，就DoTween来说，它的用途很广泛，不仅仅只是用在了UI上面，在3D游戏中控制怪物，或者其他物体的移动也可以使用，并且DoTween与其他动画插件相比，它的效率是最高的！

一先来学习一个入门级的DoTween小例子：

使用DoTween控制Cube位移和简单UI元素位移（Cube可以看做是游戏项目中的人物/NPC/Monster，UI就是可以想象成你的项目中那些需要做动画的UI元素！）：

第一步还是先搭建好场景，场景中有一个Cube和一个UI控件（使用的UGUI）

好了接下来我们写DoTween代码实现，①cube从中间移动到边缘，②UI空间从上边移动下来，在此之前，我们看一个DoTween小语法，结合Lambda表达式的移动代码

        DOTween.To(() => mPosVector3, x => mPosVector3 = x, new Vector3(5f,0.5f, 0f), 2);//固定写法 也称匿名函数

上面代码实现了一个Vector3变量从（0，0，0）变化到（10,10,10）的过程。接着我们实现游戏物体Cube和UI控件的位移动画。

Cube:

    private Vector3 mPosVector3;void Start(){UseDoTween();}void Update(){this.transform.localPosition= mPosVector3;}void UseDoTween(){DOTween.To(() => mPosVector3, x => mPosVector3 = x, new Vector3(5f,0.5f, 0f), 2);//固定写法 也称匿名函数}

UI:

    private Vector3 mPosVector3;void Start(){UseDoTween();}void Update(){this.transform.localPosition = mPosVector3;//移动本地坐标  }void UseDoTween(){DOTween.To(() => mPosVector3, x => mPosVector3 = x, new Vector3(-6f, -88f, 0f), 1);//固定写法 也称匿名函数}

（这里有个Unity坐标的问题，所有层次面板中显示的且没有父级物体的他们的坐标为世界坐标=绝对坐标，所有层次面板中父级底下游戏物体的坐标为相对坐标=局部坐标）

移动效果：

最后实现了移动，但是发现移动过程有抖动现象，但是速度加快就没有，不知道大家测试有没有这种现象。好，那我们上面用的是Lambda表达式做的动画移动，这样用起来还是不是很好，反正我用着不是很舒服，那么接下来我们看看其他的几种动画移动方式。

创建一个用来控制动画播放的按钮，如图：

那现在我们要实现一个功能需求就是：比如点击按钮播放动画，再点击按钮动画撤回。这个需求怎么实现，那我们就需要分析一下DoTween插件给我们封装好的函数了。

需求分析：①点击按钮播放动画：判断动画类型，②再点击动画，动画倒放，考虑DoTween中是否有类似PlayReverse的函数，③同样一个button竟然能够实现两种不同的效果，考虑是否需要标志位/枚举标签。

需求分析完毕，这样我们的思路不就有了吗？这样写代码就比较好写了！

using UnityEngine;
using System.Collections;
using DG.Tweening;//注意命名空间引入
using DG.Tweening.Plugins.Options;//注意命名空间引入public class PlayDoTweenAnimation : MonoBehaviour
{public RectTransform mRectTransform;private bool isFrist = false;//动画是否第一次播放private bool isSecond = false;//动画是否第二次播放private Tweener mTweener;//我的动画片段void Start(){}/// <summary>/// 点击播放按钮播放动画/// </summary>public void OnClick(){if (isFrist == false)//表示动画是第一次播放{PlayImage();isFrist = true;}else{mTweener.PlayBackwards();//不是第一次播放了就倒放isFrist = false;}}void PlayImage(){//这种方式错误的，因为DOMove没有适用于Vector3类型的方法//mRectTransform.localPosition.DOMove(new Vector3(-6, -88, 0), 0.4f);mTweener= mRectTransform.DOLocalMove(new Vector3(-6, -88, 0), 0.3f);mTweener.SetAutoKill(false);//不要让他播放完事就自动自杀}
}

这样的代码运行之后，看测试效果，我们确实实现了功能需求，但是，但我们把目光聚焦在这个东西上面的时候，就发现制约性能瓶颈的东西来了=每次点击为我们重复创建了不少Tweener！

这个问题的处理方式，首先我们要思考问题的来源？很显然问题出现在这几行代码中：

    void PlayImage(){//这种方式错误的，因为DOMove没有适用于Vector3类型的方法//mRectTransform.localPosition.DOMove(new Vector3(-6, -88, 0), 0.4f);mTweener= mRectTransform.DOLocalMove(new Vector3(-6, -88, 0), 0.3f);mTweener.SetAutoKill(false);//不要让他播放完事就自动自杀}

当我们每次调用这个函数的时候，由于我们SetAutoKill==false了，所以我们每次调用都在创建一个Tweener，解决方案就是只创建一次Tweener，后面使用这个创建出来的Tweener就好，如何实现？看代码：

using UnityEngine;
using System.Collections;
using DG.Tweening;//注意命名空间引入
using DG.Tweening.Plugins.Options;//注意命名空间引入public class PlayDoTweenAnimation : MonoBehaviour
{public RectTransform mRectTransform;private bool isFrist = false;//动画是否第一次播放private bool isSecond = false;//动画是否第二次播放private Tweener mTweener;//我的动画片段void Start(){//①将Tweener的创建放在Start函数中PlayImage();}/// <summary>/// 点击播放按钮播放动画/// </summary>public void OnClick(){if (isFrist == false)//表示动画是第一次播放{mTweener.PlayForward();isFrist = true;}else{mTweener.PlayBackwards();//不是第一次播放了就倒放isFrist = false;}}void PlayImage(){//这种方式错误的，因为DOMove没有适用于Vector3类型的方法//mRectTransform.localPosition.DOMove(new Vector3(-6, -88, 0), 0.4f);mTweener= mRectTransform.DOLocalMove(new Vector3(-6, -88, 0), 0.3f);mTweener.Pause();//②.由于我们将Tweener的创建放在了Start中所有为了避免游戏一运行自动播放，所以暂停mTweener.SetAutoKill(false);//不要让他播放完事就自动自杀}
}

好了这样我们就实现了一个不消耗性能的暂停/播放动画的方式了。

二 FromTweens

关键字：From:来自，从哪

FromTweens到底是干嘛用的呢？从名字上面我们可以猜到从哪来的动画，来自哪的动画？通过下面的例子学习，我们将对FromTweens这个新的知识点有更加深刻地理解！

在Cube上面挂载这个脚本，脚本中代码：

 void Start (){this.transform.DOMoveX(5, 0.3f,false);//从cube当前位置移动到X=5的坐标位置}

修改后：

 void Start (){this.transform.DOMoveX(5, 0.3f).From();//加上from表示从X=5的坐标位置移动到cube最初始位置}

From()的参数

 void Start (){this.transform.DOMoveX(5, 2f).From(true);//加上True之后，表示移动过来的X=current.pos+5;}

三动画参数讲解动画练习

学习目标：了解动画参数，动画的学习和使用

通过小例子来学习如何修改动画曲线（easy enum）以及掌握如何在动画结束之后通知某些需要处理的事件，我们还是拿之前的UI控件来学习。

新建一个EasyTypeTest脚本，挂载在UI控件身上

public class EasyTypeTest : MonoBehaviour {void Start (){Tweener myTweener= this.transform.DOLocalMoveY(-88, 3f);//返回一个Tweener对象，所有的修改围绕这个返回值myTweener.SetEase(Ease.InBack);//修改动画曲线类型myTweener.OnComplete(OnCompleteHandler);}void OnCompleteHandler(){Debug.Log("动画播放完毕了");}
}

当动画播放完毕之后才会去调用OnComplete.

动画的生命周期和生命函数，在官放document中有很多介绍。接下来我们继续使用DoTween来做其他效果，比如对于UI文字。

public class TextTest : MonoBehaviour
{private Text mText;void Start (){mText = this.GetComponent<Text>();DoTweenTextAnim();}void DoTweenTextAnim(){mText.DOText("you are a good man,see you tomorrow,I love you.", 2f);}
}

运行效果示意：

如果原本Text中有文字信息话，它会自动替换，关于DoText后面还可以调用哪些DoTween接口，可以自己下去多试试。

接下来我们使用DoTween做一个游戏的震屏效果

public class ShakeCamera : MonoBehaviour {// Use this for initializationvoid Start (){//注意参数自己琢磨一下this.transform.DOShakePosition(0.3f,new Vector3(3,3,3));//0.3=time //振幅=位置 }}

游戏和透明度动画制作：

        mText.DOColor(Color.blue, 2);//文字颜色mText.DOFade(1, 3);//1 显示出来 3秒

四学习DoTween面板的可视化操作&动画路线编辑器

小例子：

可视化的面板操作还是比价方便的。当然我们如果还是希望通过代码ちょっと控制一下动画面板的操作的话，同样可以想获取普通组件的方式一样获取动画面板！接着就是DoTween学习最后一个小节了，动画状态路线学习！

新建一个场景，创建一个cube，给这个cube添加DoTweenPath组件，如下图：

添加路径一定要在场景视图中添加，添加完毕之后就可以运行看到效果了：

这一块重要的就是属性的设置了

上图没什么好说的，都是比较基础的设置。

剩下的几个属性可以自己多多去摸索一下就懂了！

本案例工程及插件源码下载地址：

链接：http://pan.baidu.com/s/1boO7UoR 密码：lmua

提供一个查看DoTween动画曲线的网站

http://robertpenner.com/easing/easing_demo.html

DoTween全解析（入门篇）相关推荐

让你久等了《开源安全运维平台OSSIM疑难解析--入门篇》正式出版
2019年暑期,众所期待的新书<开源安全运维平台OSSIM疑难解析--入门篇>由人民邮电出版社正式出版发行.此书从立意到付梓,历时超过两年,经过数十次大修,历经曲折与艰辛,希望为大家代奉献 ...
让你久等了！《开源安全运维平台OSSIM疑难解析--入门篇》9月上市
2019年暑期,众所期待的新书<开源安全运维平台OSSIM疑难解析--入门篇>开始印刷,9月份即可预售.此书从立意到付梓,历时超过两年,经过数十次大修,历经曲折与艰辛,希望为大家代奉献一本 ...
SQL注入漏洞全接触--入门篇
随着B/S模式应用开发的发展,使用这种模式编写应用程序的程序员也越来越多.但是由于这个行业的入门门槛不高,程序员的水平及经验也参差不齐,相当大一部分程序员在编写代码的时候,没有对用户输入数据的合法性进 ...
r语言mfrow全程_R语言弦图绘制全解析——基础篇
弦图(Chord diagram),是使用圆形坐标系体现多组数据间关系强弱的可视化形式.本文将介绍使用R语言的circlize包绘制弦图的方法,代码来源于circlize官方文档,http://zug ...
python爬虫用途-Python爬虫入门知识：解析数据篇
首先,让我们回顾一下入门Python爬虫的四个步骤吧: 而解析数据,其用途就是在爬虫过程中将服务器返回的HTML源代码转换为我们能读懂的格式.那么,接下来就正式进入到解析数据篇的内容啦. Part 1 ...
.NET Core实战项目之CMS 第三章入门篇-源码解析配置文件及依赖注入
写在前面上篇文章我给大家讲解了ASP.NET Core的概念及为什么使用它,接着带着你一步一步的配置了.NET Core的开发环境并创建了一个ASP.NET Core的mvc项目,同时又通过一个实战 ...
AOSP6.0.1 launcher3入门篇-解析DeviceProject.java及相关文件
上一篇文章(AOSP6.0.1 launcher3入门篇-解析launcher.java文件)描述了launcher3的加载过程,本篇文章记录hotseat停靠方向和位置.隐藏页指示器.Folder大 ...
python爬虫解析数据_Python爬虫入门知识：解析数据篇
首先,让我们回顾一下入门Python爬虫的四个步骤吧: 而解析数据,其用途就是在爬虫过程中将服务器返回的HTML源代码转换为我们能读懂的格式.那么,接下来就正式进入到解析数据篇的内容啦. Part 1 ...
2022最全最细软件测试工程师的职业规划和职业发展【入门篇】
由于种种原因,很多人选择了测试这个职业,在职场和测试领域当中几经风雨,有的人顺时应势走出了一片天地,有的人选择离开从事其他职业-- 笔者作为一个在测试行业略有想法的测试人员,对测试人员的职业规划和职业 ...

DoTween全解析（入门篇）

DoTween全解析（入门篇）相关推荐

最新文章

热门文章