unity Dotween外掛程式的簡單介紹及範例程式碼

標籤：zh-cn   items   line   ase   esc   sdn   通用   animation   實際應用   

unity裡面做插值動畫的外掛程式有許多，比較常見的有itween、hotween、dotween。根據大家的反饋和實際體驗來說，dotween外掛程式在靈活性、穩定性、易用性上都十分突出。這裡簡單介紹下它的用法，並在後文做了一些效果樣本，還是不錯的。

所謂”插值動畫“，顧名思義就是在兩個值中插入其他的值來實現動畫。原理非常簡單，比如想讓某個物體從A地到達B地，我們只知道A和B的座標，插值動畫就可以根據”easing 函式“確定A、B間的其他值，來實現物體從A到B的”運動過程“。”easing 函式“是確定”插值“的函數，這裡有全部的easing 函式，圖形表示，非常方便。文章最後會介紹幾個常用的easing 函式，並根據代碼效果來直觀感受它們的不同。

DOTween的官方文檔只有這一個頁面，裡面講的已經非常詳細了，這裡在稍微敘述一下。
實現一個dotween動畫， 有”通用模式“（ The generic way）和”簡單模式“（The shortcuts way），兩種方式。
通用模式的代碼格式如下：

//讓myVector向量在1秒內變為 Vector3(3,4,8)向量DOTween.To(()=> myVector, x=> myVector = x, new Vector3(3,4,8), 1);//讓myFloat變數在1秒內變為52DOTween.To(()=> myFloat, x=> myFloat = x, 52, 1);

 

這個模式我從來就沒用過…還是來看簡單的寫法吧。

transform.DOMove(new Vector3(2,3,4), 1);rigidbody.DOMove(new Vector3(2,3,4), 1);material.DOColor(Color.green, 1);

 

上面的就不用解釋了，都那麼直觀的寫法。
值得注意的是，dotween都有From()函數，表示物體從前面寫的 位置/顏色/大小 變化到當前的狀態，這個函數還是非常好用的。
在dotween官方文檔中，詳細的列出的dotween可以支援的動態項目。比較常用的Transform下DOMove，DOScale，DORotate，UI下DOFade，DOColor。

下面來看一些實際應用吧。

樣本一：

原始碼

sphere1.DOMoveX(20,1).SetEase(Ease.OutBack).SetRelative();sphere2.DOMoveX(20,1).SetEase(Ease.InQuad).SetRelative();sphere3.DOMoveX(20,1).SetEase(Ease.InOutQuad).SetRelative();sphere4.DOMoveX(20,1).SetEase(Ease.Linear).SetRelative();sphere5.DOMoveX(20,1).SetEase(Ease.InOutCubic).SetRelative();

 

上面的代碼使sphere在1秒內向x軸相對（SetRelative()）的移動了+20的位置。中間的SetEase()函數確定了使用那個easing 函式，可以看出不同的easing 函式可以實現不同的動畫過度效果。
5個小球同時達到終點，但是運動過程卻不一樣，有些先快後慢，有些先慢後快，有些會超過終點再折回。

樣本二：

原始碼

void Show(){    //boxes引用了圖片中的那些方塊Transform    foreach(var j in boxes)        j.DOScale(new Vector3(1,1,1),0.5f);}void Hide(){    foreach(var j in boxes)        j.transform.DOScale(new Vector3(0,0,0),0.4f);}

這裡是我最近在寫的一個小app，動畫效果還可以，但是實際代碼就上面幾行。具體我就不解釋了，實在太簡單了。

樣本三：

原始碼

void ShowAnimation(){     StartCoroutine(Show());}IEnumerator Show(){    //items數組引用了圖片中的那幾個長條Transform    foreach(var item in items)    {        item.DOLocalMoveX(-1000,1f,false).From().SetEase(Ease.OutBack);        yield return new WaitForSeconds(0.02f);    }}

這裡為了實現動畫效果逐漸開始的特效，使用了協程Coroutine，不得不說unity協程真心好用啊。

說了這麼多，其實dotween的使用一點都不難，代碼簡單，易於理解，真正的痛點還是在對於easing 函式的充分瞭解上。
多加練習就好啦。

unity Dotween外掛程式的簡單介紹及範例程式碼