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。
下面來看一些實際應用吧。
示例一:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI0gTMx81dsQWZ4lmZf1GLlpXazVmcvwFciV2dsQXYtJ3bm9CX9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5yN1UzN3gTN2YjY0YzM2U2YxYzXyUjN1kDMxMzLcJTMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
源代碼
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);
}
示例三:
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);
}
}