上一篇我們在Main menu的地方新增的 3個 Main menu 的Image。 接下來將利用Button (Script)這個Component製作出3種不同的Animation icon button。
1. Button設定為None (無)
首先在Hierarchy裡的按右鍵新增一個Panel，更名為Heart Pop。這個Panel主要是要來設定Button的控制。
之後在Heart Pop下新增一個Panel，名為Heart。 這邊我們帶入 Image。接著在Heart下面新增一個Panel，名為Filled。
我們回到Heart Pop裡面，在Inspector的Add Component 裡面新增 Animator。在Controller裡去呼叫一名為Heart Pop的Animation。這個物件是用來控制Image Button。
繼續新增一個 Animated Icon Handler (Script) 的Component。 Play Type的地方選 Click。意思是點選時會產生動態效果。
新增的 Button (Script) 裡做設定。這邊在Transition(變換模式)這邊選None , Navigation選 Automatic。
最後新增UI Manager Animation Icon (Script)的Component 裡。在Settings裡的UI Manager Asset點選 已做好的UI Manager這個套件。並做以下的設定。
*Resource (資源)
*Image
Size數量:1
Element元件: Heart
*Image With Alpha (帶有Alpha的圖像)
Size數量2
Element元件 0: Filled
Element元件 1: Pop
2. Button設定為 Color Tint (著色)
接下來我們可以直接Duplicate Herat Pop這個 Folder，更名為Messages。然後到下面的folder裡更換Image。
回到Messages的Inspector裡，修改Button (Script)的設定。
Transition(變換模式)改為 Color Tint(著色)。更改Highlighted Color跟Pressed Color。
這樣就完成了Message著色。
3. Button設定為 Sprite Swap (圖片切換)
步驟跟上一個Message Button的做法一樣。先Duplicate， 更換Folder的名稱跟Image。
接著回到Camera的Inspector裡去修改裡面的設定。Transition更為 Sprite Swap。 選項跟Color Tint中的相似，區別在於設定的是圖片。
效果呈現如下；