天天看點

【Unity3D插件】DoTween插件的簡單介紹及示例代碼

unity裡面做插值動畫的插件有許多,比較常見的有itween、hotween、dotween。根據大家的回報和實際體驗來說,dotween插件在靈活性、穩定性、易用性上都十分突出。這裡簡單介紹下它的用法,并在後文做了一些效果示例,還是不錯的。

所謂”插值動畫“,顧名思義就是在兩個值中插入其他的值來實作動畫。原理非常簡單,比如想讓某個物體從A地到達B地,我們隻知道A和B的坐标,插值動畫就可以根據”緩動函數“确定A、B間的其他值,來實作物體從A到B的”運動過程“。”緩動函數“是确定”插值“的函數,這裡有全部的緩動函數效果圖,圖形表示,非常友善。文章最後會介紹幾個常用的緩動函數,并根據代碼效果來直覺感受它們的不同。

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秒内變為52
DOTween.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。

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

示例一:

【Unity3D插件】DoTween插件的簡單介紹及示例代碼

源代碼

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()函數确定了使用那個緩動函數,可以看出不同的緩動函數可以實作不同的動畫過度效果。

5個小球同時達到終點,但是運動過程卻不一樣,有些先快後慢,有些先慢後快,有些會超過終點再折回。

示例二:

【Unity3D插件】DoTween插件的簡單介紹及示例代碼

源代碼

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

示例三:

【Unity3D插件】DoTween插件的簡單介紹及示例代碼
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);
    }
}