前言:
最近專案要製作uGUI轉場特效,除了用Animator製作出轉場的動畫以外,最好的方法莫過於使用Tween了。因為使用Animator來控制動畫撥放,會造成每一楨都要更新,對於系統來說,是非常貴的方法,當然也有解決之道,例如用Destory在動畫撥放完畢後銷毀,但總是要搭配Prefab的instantiate等處理。因此用Tween可以起到最小的系統資源消耗,也能最快速有效的處理好轉場與動畫的補間效果。
以往很習慣使用iTween,一個非常佛心的Tween套件,但目前在Assetstore上,有一個更佛心的套件,就叫做LeanTween。
今天就帶大家來了解LeanTween、以及如何把LeanTween用在uGUI上。
先介紹一下什麼是Tween,早在遠古Flash時代,有用過的人就知道關鍵影格與關鍵影格之間的補間動畫,就叫做Tween。也就是從A的狀態變成B的狀態,其中的過程就叫做Tween。
LeanTween內建大小的Tween、透明度的Tween、數值的Tween…。
文件與特色:
LeanTween跟iTween一樣,都能夠使用簡單的一行code完成一個漂亮的Tween動畫。iTween好用的地方在於,所有的設定細節只要一個hashtable就能搞定。
而LeanTween最棒的地方在於它可以串接,就像積木一樣。
//alpha tween一個行搞定,只要加上setEase可以套用Ease type
LeanTween.alpha(ltRect, 1f, 1f).setEase(LeanTweenType.easeInCirc);
//若想要延遲,還能再串接setDelay(time float)
LeanTween.alpha(ltRect, 1f, 1f).setEase(LeanTweenType.easeInCirc).setDelay(5.0f);
//或是要設定循環Loop樣式也可以加上setLoopPingPong()
LeanTween.alphaCanvas(gameObject.GetComponent<RectTransform>(), 0f, 1f) .setLoopPingPong();
//最棒的是補間動畫常常用完就該銷毀了,也能夠直接串在最後面,呼叫銷毀function
LeanTween.alpha(ltRect, 1f, 1f).setEase(LeanTweenType.easeInCirc).setOnComplele(Destoryme);
簡單的來說,想要的功能,可以一直透過.setXXXXX一路串下去,甚至最後還能呼
.setOnComplele(Destoryme)
動畫用完就丟掉銷毀,實在完美。這也是為什麼我覺得LeanTween比iTween還要佛的原因,不用編寫Hashtable,也不用怕hashtable參數有誤造成錯誤。非常推薦!!!
接下來我們來看看LeanTween文件裡面介紹的功能吧!
Methods
LeanTween.addListener
LeanTween.alpha
LeanTween.alpha
LeanTween.alpha (RectTransform)
LeanTween.alpha (RectTransform)
LeanTween.alphaCanvas
LeanTween.alphaText
LeanTween.alphaVertex
LeanTween.cancel
LeanTween.cancel
LeanTween.cancelAll
LeanTween.color
LeanTween.colorText
LeanTween.delayedCall
LeanTween.descr
LeanTween.descriptions
LeanTween.dispatchEvent
LeanTween.dispatchEvent
LeanTween.followBounceOut
LeanTween.followDamp
LeanTween.followLinear
LeanTween.followSpring
LeanTween.init
LeanTween.isPaused
LeanTween.isPaused
LeanTween.isTweening
LeanTween.isTweening
LeanTween.move
LeanTween.move
LeanTween.move
LeanTween.move (GUI)
LeanTween.move (RectTransform)
LeanTween.moveLocal
LeanTween.moveLocal
LeanTween.moveSpline
LeanTween.moveSpline
LeanTween.moveSplineLocal
LeanTween.moveX
LeanTween.moveX (RectTransform)
LeanTween.moveY
LeanTween.moveY (RectTransform)
LeanTween.moveZ
LeanTween.moveZ (RectTransform)
LeanTween.pause
LeanTween.pause
LeanTween.pauseAll
LeanTween.play
LeanTween.removeListener
LeanTween.resume
LeanTween.resume
LeanTween.resumeAll
LeanTween.rotate
LeanTween.rotate
LeanTween.rotate (RectTransform)
LeanTween.rotateAround
LeanTween.rotateAround (RectTransform)
LeanTween.rotateAroundLocal
LeanTween.rotateAroundLocal (RectTransform)
LeanTween.rotateLocal
LeanTween.rotateX
LeanTween.rotateY
LeanTween.rotateZ
LeanTween.scale
LeanTween.scale (GUI)
LeanTween.scale (RectTransform)
LeanTween.scaleX
LeanTween.scaleY
LeanTween.scaleZ
LeanTween.sequence
LeanTween.size (RectTransform)
LeanTween.tweensRunning
LeanTween.value (Color)
LeanTween.value (Color)
LeanTween.value (float)
LeanTween.value (float)
LeanTween.value (float)
LeanTween.value (float,object)
LeanTween.value (Vector2)
LeanTween.value (Vector2)
LeanTween.value (Vector3)
LeanTween.value (Vector3)
功能相當齊全,且開發者的說明文件都有範例語法,直接可以參考使用。
uGUI使用LeanTween重點:
這邊特別介紹一下uGUI會常用到的Fade特效,應用在單一uGUI元件 (例如Image、Button…等。)
uGUI 元件的Fade 也只要一行Code就完成了,主要與遊戲物件Fade特效的差異在於uGUI身上有RectTransform特效。
LeanTween.alpha(gameObject.GetComponent<RectTransform>(), 0f, 0.1f).setDelay(0.01f);
而若是整群的uGUI要做整群組一起Fade in/out的特效,可以先添加CanvaGroup到群組的父物件上,並且透過GetComponent<T>.()語法取抓到CanvaGroup的Aplha值,如此一來就能夠透過LeanTween.value快速的將整組uGUI做出淡入淡出的特效。
下面是我撰寫的Code,這邊要注意,value 的tween若要setDelay或其他的效果,要接在中間,才不會報錯。
LeanTween.value(gameObject, 0.6f, 1f, 0.3f).setDelay(0.3f).setOnUpdate((float val) => {
gameObject.GetComponent<CanvasGroup>().alpha = val;
});
結論:
希望有看到這篇文章的人與有下載LeanTween都一樣有賺到的感覺,有了這樣的Tween工具,可以用的比iTween更加泛用,且透過直接串接功能,讓撰寫Script會更加簡單順暢。
最後,希望有使用uGUI的人都可以玩一下LeanTween,一旦你熟悉這樣的語法,其實比買過場套件來的快速好用。一個按鈕或一個Function就能觸發整個場景元件的Tween動畫控制。務必下載!!
另外它還有出一個Editor版本,可以透過圖形拉出path,再做曲線動畫。類似iTween裡面的Path,但可以將拉好的曲線自動匯出成代碼。以後有用到可以再跟大家介紹。
就先到這邊了。
網路上有人做多套Tween的比較,也可以參考看看。