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


}