DoTween学习笔记(二) UGUI结合使用(实现一些简单效果)

UGUI官方实例中是使用Animation来控制UI的移动,放大缩小动画等等, Animation来控制UI的动画工作量实在是太多了, 所以我们一般使用itween,DoTween. 来控制动画, 这样工作量大大减少. 那今天我们来学习下UGUI + DoTween吧

 

UGUI进行简单的移动,放大,旋转

public class MyClass : MonoBehaviour {
void Start () {
Image image = transform.GetComponent<Image>();
//DoMove的坐标系是左下角为准,移动到100,100位置
image.rectTransform.DOMove (new Vector2(100,100),1f);
//以目前坐标点向移动到当前坐标x+100,当前坐标y+100
image.rectTransform.DOMove (new Vector2(image.rectTransform.position.x + 100,image.rectTransform.position.y + 100),1f);
//当前sacle(1,1,1)1秒内添加到(3,3,1)
image.rectTransform.DOBlendableScaleBy (new Vector2(2,2),1f);
//旋转到180度
image.rectTransform.DORotate (new Vector3(0,0,180),1f);
}
}

 

UGUI 锚点和anchoredPosition 关系

ancharedPosition的x,y相对于锚点产生的坐标. 盘子在写一个摇杆UI时候,摇杆只有在左下角,所以摇杆设置左下角,我根据用户点击屏幕的位置Input.mousePosition.x 和 Input.mousePosition.y赋值给摇杆的anchoredPosition 所以功能是显示正常的. 但是我有一次小心操作就把摇杆的锚点设置成屏幕中心, 不管我怎么点击摇杆都在右上的位置(大家能想象出这种效果吗)

 

Tweener介绍: 它表示一种动画,比如想前移动,然后变颜色

 

Sequence介绍:

Sequence是一个队列,你可以理解成它能帮你一步一步或同时的播放一些动画.

Sequence.Append是在序列的末端插入一个Tweener，如果前面的Tweener都执行完了，就执行这个Tweener。

Sequence.Join是在序列末端插入一个Tweener，不同的是，这个Tweener将与前一个非Join加进来的Tweener并行执行。

 

实现Text的漂浮进出效果





代码:

using UnityEngine;
using System.Collections;
using DG.Tweening;
using UnityEngine.UI;

public class TextFlotageEffect : MonoBehaviour {

public Text text;

private Color originColor;          //原始颜色
private Vector3 originPos;          //原始坐标
private Sequence sequence;          //动画队列
private bool isAction;              //是否可以重新播放

public void Update()
{
if(Input.GetKeyDown(KeyCode.A))
{
ShowBloodText();
}
}

public void ShowBloodText()
{
if (!isAction)
{
isAction = true;
RectTransform rt = text.rectTransform;
originPos = text.rectTransform.position;
originColor = text.color;

text.color = new Color(text.color.r, text.color.g, text.color.b, 0);
sequence = DOTween.Sequence();                                          //创建顺序列
Tweener move1 = rt.DOMoveY(rt.position.y + 50, 0.5f);                   //
Tweener move2 = rt.DOMoveY(rt.position.y + 100, 0.5f);

Tweener alpha1 = DOTween.To(() => text.color, x => text.color = x, new Color(text.color.r, text.color.g, text.color.b, 1), 1f);
Tweener alpha2 = DOTween.To(() => text.color, x => text.color = x, new Color(text.color.r, text.color.g, text.color.b, 0), 1f);

sequence.Append(move1);
sequence.Join(alpha1);
sequence.AppendInterval(0.2f);
sequence.Append(move2);
sequence.Join(alpha2);
sequence.AppendInterval(0.2f);
sequence.OnComplete(OnComplete1);
}

}

public void OnComplete1()
{
text.rectTransform.position = originPos;
text.color = originColor;
Debug.Log("完成移动了");
isAction = false;
}

}