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。
下面來看一些實際應用吧。
示例一:
源代碼
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個小球同時達到終點,但是運動過程卻不一樣,有些先快後慢,有些先慢後快,有些會超過終點再折回。
示例二:
源代碼
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的使用一點都不難,代碼簡單,易於理解,真正的難點還是在對於緩動函數的充分了解上。
多加練習就好啦。