Unity3D

Unity 使用DoTween制作动画(Sequence、Ease、Loop)

页面
字体
小树 · 12月3日 · 2019年 ·

引言

DoTween是Unity上的一款动画插件,它使用简单,功能强大,利用它可以很方便地制作一些简单动画。而即使是一些较为复杂的队列动画,对它来说也不在话下。

开始使用

首先,访问AssetStore,搜索DoTween,下载该插件的免费版即可。 下载完成后,在Unity菜单栏中点击Tools->Demigiant->DOTween Utility Panel ,在他弹出的窗口点击Setup DOTween,此时DOTween会根据你的Unity版本自动引入所需要的库与文件。

Pro版本在这免费提供给大家:

单个Tween动画

DoTween扩展了一些组件的方法,例如Rigidbody,Transform等,其中最常用的是Transform扩展。 在这里可以先尝试一下DoTween的扩展方法,下面这行代码的目的是使方块在1秒内于本地坐标轴x轴上移动两个单位,效果如下图所示。

CubeTransform.DoLocalMoveX(2.0f,1.0f);
DoTween插件

DoTween提供了非常多的动画方法,例如各种线性或非线性的移动、旋转,甚至颜色改变、淡入淡出、显示隐藏等等,在此不做演示。

队列动画(多个Tween动画)

在实际的需求中,一个动画一般都包含对多个物体的操作,那么如何使用DoTween制作这种动画呢?对于一些简单的动画,直接顺序执行多个DoTween语句即可;对于一些复杂的动画,诸如包含延时、动画事件回调、播放音效等的动画,可以利用DoTween的动画队列完成这些操作。如果你有Cosos等2d引擎的使用经验,那么Sequence你一定不会陌生。

Append

队列加入动画,使用Append方法。Append加入的Tween是顺序播放的,即动画1播放完成后,再播放动画2。

//首先定义一个队列
var s = DOTween,Sequence();
//追加Tween动画,使用动画队列的Append方法。
s.Append(Cube1Trans.DoLocalMoveX(2.0f,1.0f));
//先加入的Cube1动画播放完毕后,播放Cube2动画
s.Append(Cube2Trans.DoLocalMoveY(2.0f,1.0f));
//另一种写法
/*
s.Append(
Cube1Trans.DoLocalMoveX(2.0f,1.0f)
).Append(
Cube2Trans.DoLocalMoveY(2.0f,1.0f)
)
*/
DoTween插件

上面两代码创建了一个动画队列,并为该队列添加了两个Tween动画,后添加的Cube2动画会在Cube1动画播放完毕后播放,如下图所示。

Insert

对于需要并行播放的动画,可以使用Insert方法。Insert方法第一个参数为动画延时播放的时间,第二个参数为要播放的Tween动画,代码及效果如下所示。

var s = DOTween.Sequence();
var Cube1RunTime = 1.0f;
var Cube2RunTime = 1.0f;
s.Append(this.m_Trans.DOLocalMoveX(2.0f, Cube1RunTime));
s.Append(this.m_Trans.DOLocalMoveX(-3.42f, Cube1RunTime));
//在队列动画开始后的Cube1RunTime秒后播放
s.Insert(Cube1RunTime, this.m_Other.DOLocalMoveY(2.5f, Cube2RunTime));
DoTween插件
DoTween插件

请注意,无论队列之前Append了多少Tween动画,InsertTween动画开始播放的时刻都是队列的开始时刻 延时时间,它与你Append插入的动画无关。

InsertCallback

对于动画事件回调的需求,使用InsertCallback实现,其第一个参数代表回调的延时时间,第二个参数可以是一个lambda表达式,我在这里处理一些事件,例如播放效果音频等。

var s = DOTween.Sequence();
var Cube1RunTime = 1.0f;
var Cube2RunTime = 1.0f;
s.Append(this.m_Trans.DOLocalMoveX(2.0f, Cube1RunTime));
s.Append(this.m_Trans.DOLocalMoveX(-3.42f, Cube1RunTime));
s.Insert(Cube1RunTime, this.m_Other.DOLocalMoveY(2.5f, Cube2RunTime));
//回调
s.InsertCallback(Cube1RunTime, () =>
{
      Debug.Log("Cu假装播放Cube2的移动音频");
});
s.Append(this.m_Trans.DOLocalMoveY(2.5f, Cube1RunTime));
var s = DOTween.Sequence();
DoTween插件

效果如下图所示。 好了,合理利用上面介绍的队列方法,完成一个稍微复杂的动画效果应该不是难事。而DoTween还有许多特别棒的效果,在此处就不多做介绍了。

关于Loop循环

如果动画不是单独存在而是加入到一个序列Sequence中,对动画的循环设置就可能会失效,必须对序列进行统一设置

Sequence mySequence = DOTween.Sequence();//创建空序列
mySequence.Append(moveTw);//把动画加入到序列中
mySequence.SetLoops(-1);//对序列进行设置

循环模式:

Tweener moveTw = transform.DOLocalMoveY(-14, dur);
moveTw.SetLoops(int, loopType);//第一个参数是循环的次数,第二个参数是循环模式

Dotween动画的循环模式,只需要用SetLoops方法
Restart, 默认模式 每次循环从最初重新开始,不写第二个参数的话默认是这种模式
Yoyo , 悠悠球模式,像悠悠球一样的渐变模式
Incremental , 是叠加模式,会把最终相对于开始值的差值加到最终值上

关于缓动函数Ease

转载必须注明来源: 小树技术博客 » Unity 使用DoTween制作动画(Sequence、Ease、Loop)

0 条回应