UGUI之Selectable功能詳解(UI動畫製作與實現)

Selectable這個東西是什麼呢?先來看看他的屬性:
 

之後看看他在哪裏會出現?既然看到了有是否允許交互的屬性大致可斷定他是在有交互的UI部件上的吧。。。沒錯,例如我們的Button還有Toggle都有他的身影 ;如下圖:
 

但是其的部件就沒有了,例如image和panel,text等等;但是我們可以給他添加組件
 


添加之後就會有這個組件了
 

下面詳細的講一下每個功能;Interactable默認是勾選也就是允許交互,Transition有四種模式(這和NGUI是一樣的);這裏說明一點color multiplier的屬性指的是顏色的強度,Fade duration是變化響應反應時間。具體功能可以實踐測試。
 

在Transition裏動畫功能就是Animation,這個動畫比NGUI裏的Tween更加厲害,各種動畫效果什麼的都可以隨便搭配。。。下面側重講;當點擊這個的時候會自動創建一個Animator controller,這個控制器還記得吧。沒錯就是狀態機那個東東。。。(忘了的可以去面壁了)
 


然後我們打開狀態機會看到對應的四種狀態
 

然後我們開始給他做動畫。做動畫的步驟我們之前也是講過的,在這裏簡單介紹一下:

首先選擇我們的物體(這裏是image),然後裏面會出現image現在的所有狀態。


然後就是點擊Add property按鈕,裏面有三個選項,這三個選項就是指在Highlighted狀態下可以改變的東西。(Rect Transform是改變位置什麼的,Image是指對物體的圖片進行改變)


實際例子講:(例如改變顏色,默認會有兩組關鍵幀,後面的(淺藍色的框)我們不用,所以刪除就OK)如下圖:


然後我們點擊color的地方進行選擇一個粉的顏色。這樣在game模式下當鼠標移動到這個image上,image就會變成粉色


爲了更加清楚的解釋這個功能,我們再來舉個例子,例如這次要改變Hightlighted狀態下的Rotation,看下圖進行編輯要選擇的座標軸。在這裏我們選擇了X軸旋轉180度,然後把後面用不到的幀刪除。


這樣來看一下運行結果:當鼠標放到image上面,image就會變顏色而且圍繞X軸轉動。從狀態機就可以看出來了。


這樣就完成了一個動畫的製作。。。。。。。。結束了!!!

當然還不止如此。這個狀態機的製作一樣可以用在別的UI物體上,只要給這個UI物體添加一個animator組件,然後Transition換成animation就可以。例如下圖中的的button。這樣非常的方便。


這樣一切都OK了!本寶寶就寫到這裏了!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章