Unity教程-使用DoTween实现飘字效果教程

Unity教程-使用DoTween实现飘字效果教程
DoTween是一款比较强大的补间动画插件，本篇文章我们来学习下，利用DoTween来实现下飘字的效果，首先我们看下DoTween中几个方法：
Sequence.Append构建缓动序列，同时Join方法支持并行缓动。利用这个特性，可以实现ugui—Text的飘字缓动效果。
Append是在序列的末端插入一个Tweener，如果前面的Tweener都执行完了，就执行这个Tweener。
Join也是在序列末端插入一个Tweener，不同的是，这个Tweener将与前一个非Join加进来的Tweener并行执行。
看下效果图
飘字效果代码：
public static void FlyTo(Graphic graphic)
{
RectTransform rt = graphic.rectTransform;
Color c = graphic.color;
c.a = 0;
graphic.color = c;
Sequence mySequence = DOTween.Sequence();
Tweener move1 = rt.DOMoveY(rt.position.y + 50, 0.5f);
Tweener move2 = rt.DOMoveY(rt.position.y + 100, 0.5f);
Tweener alpha1 = graphic.DOColor(new Color(c.r, c.g, c.b, 1), 0.5f);
Tweener alpha2 = graphic.DOColor(new Color(c.r, c.g, c.b, 0), 0.5f);
mySequence.Append(move1);
mySequence.Join(alpha1);
mySequence.AppendInterval(1);
mySequence.Append(move2);
mySequence.Join(alpha2);
}
调用
?1
2Text text = gameObject.GetComponent();
FlyTo(text);
1.首先设置文字的alpha值为0
2.然后文字沿y轴向上缓动，同时alpha从0缓动到1，两个Tweener同时进行
3.停留1秒钟，让玩家看清楚字写的是什么
4.文字继续往上飘，同时alpha从1缓动到0，逐渐消失
注意：有同学想问，这个字体颜色渐变效果怎么弄，稍微修改设置color的部分，alpha值不能设进去，否则我们这里的渐变效果就出不来了。代码我就贴出来吧。另外，再加个Outline的效果就很好看了。
using Unity Engine;
using System.Collections.Generic;
using UnityEngine.UI;
namespace MyScripts
{
[AddComponentMenu("UI/Effects/Gradient")]
public class Gradient : BaseVertexEffect
{
[SerializeField]
private Color32 topColor = Color.white;
[SerializeField]
private Color32 bottomColor = new Color32(255, 153, 0, 255);
[SerializeField]
private bool useGraphicAlpha = true;
public override void ModifyVertices(List vertexList)
{
if (!IsActive())
{
return;
}
int count = vertexList.Count;
if (count > 0)
{
float bottomY = vertexList[0].position.y;
float topY = vertexList[0].position.y;
for (int i = 1; i < count; i++)
{
float y = vertexList.position.y;
if (y > topY)
{
topY = y;
}
else if (y < bottomY)
{
bottomY = y;
}
}
float uiElementHeight = topY - bottomY;
for (int i = 0; i < vertexList.Count; )
{
ChangeColor(ref vertexList, i, topColor);
ChangeColor(ref vertexList, i + 1, topColor);
ChangeColor(ref vertexList, i + 2, bottomColor);
ChangeColor(ref vertexList, i + 3, bottomColor);
i += 4;
}
}
}
private void ChangeColor(ref List verList, int i, Color32 color)
{
UIVertex uiVertex = verList;
if (useGraphicAlpha)
{
uiVertex.color = new Color32(color.r, color.g, color.b, uiVertex.color.a);
}
else
{
uiVertex.color = color;
}
verList = uiVertex;
}
}
}
好了，本篇unity3d教程关于使用DoTween实现飘字的效果到此结束，希望对您有帮助!

想要成大触，天天上元素！

想要成大触，天天上元素！

资源甚好，发帖艰辛，且阅且珍惜！

天下武功出少林，世界资源入元素！

为了元素币，拼了！

为了元素币，拼了！

学习了。

并没接触过DoTween,一直用ITween。顺带赚个币

回复马克一下

感谢分享

666

感谢分享= =！

666666666666

呵呵。谢谢了啊

666

资源甚好，发帖艰辛，且阅且珍惜！

天天来元素学习，好地方。

路过看看 感谢分享