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


}