DoTween全解析（入門篇）

DoTween全解析（入門篇）

概述：

DoTween，Itween，這些名字作爲一個Unity開發人員聽起來並不陌生，它們在動畫方面表現出了令人折服的能力，今天我帶着大家來一起認識一下這款插件。

           

首先我先給大家提前說明的一個概念就是，千萬不要覺得動畫插件好像是不是隻能用在ui上面，其實不是的啊，就DoTween來說，它的用途很廣泛，不僅僅只是用在了UI上面，在3D遊戲中控制怪物，或者其他物體的移動也可以使用，並且DoTween與其他動畫插件相比，它的效率是最高的！

一 先來學習一個入門級的DoTween小例子：

使用DoTween控制Cube位移和簡單UI元素位移（Cube可以看做是遊戲項目中的人物/NPC/Monster，UI就是可以想象成你的項目中那些需要做動畫的UI元素！）：

第一步  還是先搭建好場景，場景中有一個Cube和一個UI控件（使用的UGUI）

好了接下來我們寫DoTween代碼實現，①cube從中間移動到邊緣，②UI空間從上邊移動下來，在此之前，我們看一個DoTween小語法，結合Lambda表達式的移動代碼

        DOTween.To(() => mPosVector3, x => mPosVector3 = x, new Vector3(5f,0.5f, 0f), 2);//固定寫法 也稱匿名函數

上面代碼實現了一個Vector3變量從（0，0，0）變化到（10,10,10）的過程。接着我們實現遊戲物體Cube和UI控件的位移動畫。

Cube:

    private Vector3 mPosVector3;

    void Start()
    {
        UseDoTween();
    }


    void Update()
    {
        this.transform.localPosition= mPosVector3;
    }

    void UseDoTween()
    {
        DOTween.To(() => mPosVector3, x => mPosVector3 = x, new Vector3(5f,0.5f, 0f), 2);//固定寫法 也稱匿名函數
    }

UI:

    private Vector3 mPosVector3;

    void Start()
    {
        UseDoTween();
    }


    void Update()
    {
        this.transform.localPosition = mPosVector3;//移動本地座標  
    }

    void UseDoTween()
    {
        DOTween.To(() => mPosVector3, x => mPosVector3 = x, new Vector3(-6f, -88f, 0f), 1);//固定寫法 也稱匿名函數
    }

（這裏有個Unity座標的問題，所有層次面板中顯示的且沒有父級物體的他們的座標爲世界座標=絕對座標，所有層次面板中父級底下游戲物體的座標爲相對座標=局部座標）

移動效果：

最後實現了移動，但是發現移動過程有抖動現象，但是速度加快就沒有，不知道大家測試有沒有這種現象。好，那我們上面用的是Lambda表達式做的動畫移動，這樣用起來 還是不是很好，反正我用着不是很舒服，那麼接下來我們看看其他的幾種動畫移動方式。

創建一個用來控制動畫播放的按鈕，如圖：

那現在我們要實現一個功能需求就是：比如點擊按鈕播放動畫，再點擊按鈕動畫撤回。這個需求怎麼實現，那我們就需要分析一下DoTween插件給我們封裝好的函數了。

需求分析：①點擊按鈕播放動畫：判斷動畫類型，②再點擊動畫，動畫倒放，考慮DoTween中是否有類似PlayReverse的函數，③同樣一個button竟然能夠實現兩種不同的效果，考慮是否需要標誌位/枚舉標籤。

需求分析完畢，這樣我們的思路不就有了嗎？這樣寫代碼就比較好寫了！

using UnityEngine;
using System.Collections;
using DG.Tweening;//注意命名空間引入
using DG.Tweening.Plugins.Options;//注意命名空間引入

public class PlayDoTweenAnimation : MonoBehaviour
{

    public RectTransform mRectTransform;
    private bool isFrist = false;//動畫是否第一次播放
    private bool isSecond = false;//動畫是否第二次播放

    private Tweener mTweener;//我的動畫片段
    void Start()
    {
    }

    /// <summary>
    /// 點擊播放按鈕播放動畫
    /// </summary>
    public void OnClick()
    {
        if (isFrist == false)//表示動畫是第一次播放
        {
            PlayImage();
            isFrist = true;
        }
        else
        {
            mTweener.PlayBackwards();//不是第一次播放了就倒放
            isFrist = false;
        }
    }

    void PlayImage()
    {
        //這種方式錯誤的，因爲DOMove沒有適用於Vector3類型的方法
        //mRectTransform.localPosition.DOMove(new Vector3(-6, -88, 0), 0.4f);
       mTweener= mRectTransform.DOLocalMove(new Vector3(-6, -88, 0), 0.3f);
        mTweener.SetAutoKill(false);//不要讓他播放完事就自動自殺
    }
}

這樣的代碼運行之後，看測試效果，我們確實實現了功能需求，但是，但我們把目光聚焦在這個東西上面的時候，就發現制約性能瓶頸的東西來了=每次點擊爲我們重複創建了不少Tweener！

這個問題的處理方式，首先我們要思考問題的來源？很顯然問題出現在這幾行代碼中：

    void PlayImage()
    {
        //這種方式錯誤的，因爲DOMove沒有適用於Vector3類型的方法
        //mRectTransform.localPosition.DOMove(new Vector3(-6, -88, 0), 0.4f);
       mTweener= mRectTransform.DOLocalMove(new Vector3(-6, -88, 0), 0.3f);
        mTweener.SetAutoKill(false);//不要讓他播放完事就自動自殺
    }

當我們每次調用這個函數的時候，由於我們SetAutoKill==false了，所以我們每次調用都在創建一個Tweener，解決方案就是隻創建一次Tweener，後面使用這個創建出來的Tweener就好，如何實現？看代碼：

using UnityEngine;
using System.Collections;
using DG.Tweening;//注意命名空間引入
using DG.Tweening.Plugins.Options;//注意命名空間引入

public class PlayDoTweenAnimation : MonoBehaviour
{

    public RectTransform mRectTransform;
    private bool isFrist = false;//動畫是否第一次播放
    private bool isSecond = false;//動畫是否第二次播放

    private Tweener mTweener;//我的動畫片段
    void Start()
    {
        //①將Tweener的創建放在Start函數中
        PlayImage();
    }

    /// <summary>
    /// 點擊播放按鈕播放動畫
    /// </summary>
    public void OnClick()
    {
        if (isFrist == false)//表示動畫是第一次播放
        {
            mTweener.PlayForward();
            isFrist = true;
        }
        else
        {
            mTweener.PlayBackwards();//不是第一次播放了就倒放
            isFrist = false;
        }
    }

    void PlayImage()
    {
        //這種方式錯誤的，因爲DOMove沒有適用於Vector3類型的方法
        //mRectTransform.localPosition.DOMove(new Vector3(-6, -88, 0), 0.4f);
       mTweener= mRectTransform.DOLocalMove(new Vector3(-6, -88, 0), 0.3f);
        mTweener.Pause();//②.由於我們將Tweener的創建放在了Start中所有爲了避免遊戲一運行自動播放，所以暫停
        mTweener.SetAutoKill(false);//不要讓他播放完事就自動自殺
    }
}

好了這樣我們就實現了一個不消耗性能的暫停/播放動畫的方式了。

二 FromTweens 

關鍵字：From:來自，從哪

FromTweens到底是幹嘛用的呢？從名字上面我們可以猜到從哪來的動畫，來自哪的動畫？通過下面的例子學習，我們將對FromTweens這個新的知識點有更加深刻地理解！

在Cube上面掛載這個腳本，腳本中代碼：

	void Start ()
	{
	    this.transform.DOMoveX(5, 0.3f,false);//從cube當前位置移動到X=5的座標位置
	}

修改後：

	void Start ()
	{
	    this.transform.DOMoveX(5, 0.3f).From();//加上from表示從X=5的座標位置移動到cube最初始位置
	}
	

From()的參數

	void Start ()
	{
	    this.transform.DOMoveX(5, 2f).From(true);//加上True之後，表示移動過來的X=current.pos+5;
	}

三 動畫參數講解動畫練習

學習目標：瞭解動畫參數，動畫的學習和使用

通過小例子來學習如何修改動畫曲線（easy enum）以及掌握如何在動畫結束之後通知某些需要處理的事件，我們還是拿之前的UI控件來學習。

新建一個EasyTypeTest腳本，掛載在UI控件身上

public class EasyTypeTest : MonoBehaviour {

	void Start ()
	{
	   Tweener myTweener= this.transform.DOLocalMoveY(-88, 3f);//返回一個Tweener對象，所有的修改圍繞這個返回值
	    myTweener.SetEase(Ease.InBack);//修改動畫曲線類型
	    myTweener.OnComplete(OnCompleteHandler);
	}


    void OnCompleteHandler()
    {
        Debug.Log("動畫播放完畢了");
    }
}

當動畫播放完畢之後纔會去調用OnComplete.

動畫的生命週期和生命函數，在官放document中有很多介紹。接下來我們繼續使用DoTween來做其他效果，比如對於UI文字。

public class TextTest : MonoBehaviour
{

    private Text mText;
	void Start ()
	{
	    mText = this.GetComponent<Text>();
        DoTweenTextAnim();
	}

    void DoTweenTextAnim()
    {
        mText.DOText("you are a good man,see you tomorrow,I love you.", 2f);
    }
}

運行效果示意：

如果原本Text中有文字信息話，它會自動替換，關於DoText後面還可以調用哪些DoTween接口，可以自己下去多試試。

接下來我們使用DoTween做一個遊戲的震屏效果

public class ShakeCamera : MonoBehaviour {

	// Use this for initialization
	void Start ()
	{
        //注意參數自己琢磨一下
	    this.transform.DOShakePosition(0.3f,new Vector3(3,3,3));//0.3=time //振幅=位置 
    }
	
}

遊戲和透明度動畫製作：

        mText.DOColor(Color.blue, 2);//文字顏色
        mText.DOFade(1, 3);//1 顯示出來 3秒

四 學習DoTween面板的可視化操作&動畫路線編輯器

小例子：

可視化的面板操作還是比價方便的。當然我們如果還是希望通過代碼ちょっと控制一下動畫面板的操作的話，同樣可以想獲取普通組件的方式一樣獲取動畫面板！接着就是DoTween學習最後一個小節了，動畫狀態路線學習！

新建一個場景，創建一個cube，給這個cube添加DoTweenPath組件，如下圖：

添加路徑一定要在場景視圖中添加，添加完畢之後就可以運行看到效果了：

這一塊重要的就是屬性的設置了

上圖沒什麼好說的，都是比較基礎的設置。

剩下的幾個屬性可以自己多多去摸索一下就懂了！

本案例工程及插件源碼下載地址：

鏈接：http://pan.baidu.com/s/1boO7UoR 密碼：lmua

提供一個查看DoTween動畫曲線的網站

http://robertpenner.com/easing/easing_demo.html