Unity教程-使用DoTween實現(xiàn)飄字效果教程

DoTween是一款比較強(qiáng)大的補(bǔ)間動畫插件，本篇文章我們來學(xué)習(xí)下，利用DoTween來實現(xiàn)下飄字的效果，首先我們看下DoTween中幾個方法：

Sequence.Append構(gòu)建緩動序列，同時Join方法支持并行緩動。利用這個特性，可以實現(xiàn)ugui—Text的飄字緩動效果。

Append是在序列的末端插入一個Tweener，如果前面的Tweener都執(zhí)行完了，就執(zhí)行這個Tweener。

Join也是在序列末端插入一個Tweener，不同的是，這個Tweener將與前一個非Join加進(jìn)來的Tweener并行執(zhí)行。

看下效果圖

飄字效果代碼：

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);

}

調(diào)用

?1

2Text text = gameObject.GetComponent();

FlyTo(text);

1.首先設(shè)置文字的alpha值為0

2.然后文字沿y軸向上緩動，同時alpha從0緩動到1，兩個Tweener同時進(jìn)行

3.停留1秒鐘，讓玩家看清楚字寫的是什么

4.文字繼續(xù)往上飄，同時alpha從1緩動到0，逐漸消失

注意：有同學(xué)想問，這個字體顏色漸變效果怎么弄，稍微修改設(shè)置color的部分，alpha值不能設(shè)進(jìn)去，否則我們這里的漸變效果就出不來了。代碼我就貼出來吧。另外，再加個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[i].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[i];

if (useGraphicAlpha)

{

uiVertex.color = new Color32(color.r, color.g, color.b, uiVertex.color.a);

}

else

{

uiVertex.color = color;

}

verList[i] = uiVertex;

}

}

}

好了，本篇unity3d教程關(guān)于使用DoTween實現(xiàn)飄字的效果到此結(jié)束，希望對您有幫助!

資源地址: http://cg.silucg.com/dongman/unity3d/7991.html (分享請保留)

xiangzhao shipin