Unity-Ugui-如何製作動態按鈕(二)

在Button (Script) 裡上篇介紹了None, Color Tint, Sprite Swap 這三個有關Button(滑鼠跟圖片)的動態效果，接下來我們介紹最後一個Animation 這個效果。

4. Button設定為Animation (動畫模式)

Animation：透過大量的動畫來呈現按鈕不同的效果在動畫模式中可以從window(視窗)中點選animation來叫出動畫編輯器。

首先Duplicate Camera 後更名為Map。在Inspector裡的Button (Script) 的Transition的選項改為 Animation。

選擇按下 Auto Generate Animation，產生一個動畫的Controller。會產生上面 Normal , Highlighted, Pressed, Disable 這4個Trigger 。Save這個Animation controller到Asset下面的Script Folder裡，名為My Map.controller。

Animation 觸發功能描述

屬性	功能描述
Normal Trigger	按鈕平常的顏色
Highlighted Trigger	焦點(滑鼠移在按鈕上)的顏色
Pressed Trigger	按壓未放開時的顏色
Disabled Trigger	按鈕不能使用時的顏色

按鈕最常見的是最為一個觸發事件，其中On Click會出現在Button的屬性欄
上面會有一個On Click(Button)的列表。
按下”+”可以新增對象跟觸發事件(function)，此外也可以自己編寫script，而後面欄位則是參數。這裡的Click function都是做為public void也就是公共、不回傳值

這時在Inspector裡會產生一個Animator的 Component。

接下來到Windows –> Animation ，選擇Animation這個指令。會出現Animation的操作介面。剛剛建立的My Map的Controller就在這裡。

這個Map Image button我們要讓他做出滑鼠Highlighted(滑過)的時候Image變大。 Pressed(按下)的時候 Image變小。

在Normal的按鈕下拉選單位出現Disable, Highlighted, Normal, Pressed 四個指令。

選擇Highlighted，接下來按下Recorder按鈕準備錄下在Animation的影格裡面做放大Image的動作。在Add Property –> Rect Transform –> Size Data 按下 “+” 號。做更改Image Size的動作。接下來回到影格的位置在0:10秒的地方新增影格，把Image更改為230×230 pixels。0:00跟0:20 Image的尺寸維持200×200 pixels。