這一篇利用Setting Button 使用到Animator,Animation,跟C Script。去呼叫視窗做開啟跟關閉的動作。(從上移動到下)
複製Panel這個物件。把舊的Panel更改一下名稱做區別。


到Window –> Animation –> 開啟Animation視窗:

在Animation裡按下Create Button,新增一個OpenMenu的Animation。
按下錄製鈕,在1:00的地方把Panel視窗往下拉到主畫面。這樣就做出一個簡單的滑動動畫。在OpenMenu的Inspector裡的設定把Loop Time的選框取消。


接下來設定Animator Controller,從Window –> Animation –> Animator。
在Asset下面的Animation有一個 MenuAnimator 的 Controller。
點選Animator會看到畫面如下:

首先,我們發現的是3個默認的狀態,這些狀態是Unity自動建立的同時也無法刪除:
Entry : 表示當進入當前狀態機時的入口,該狀態連接的狀態會成為進入狀態機後的第一個狀態。
Any State : 表示任意的狀態,其作用是其指向的狀態是在任意時刻都可以切換過去的狀態。
Exit : 表示退出當前的狀態機,如果有任意狀態指向該出口,表示可以從指定狀態退出當前的狀態機。
Entry to Empty的設定
首先按下右鍵,建立一個新的狀態。名Empty。
在Empty按右鍵選擇Set as Layer Default State。
新增狀態 Empty狀態設定為Default
再按一次右鍵建立轉換。這次是要從Entry到Empty這段的轉換設定。

接下來在Parameters(參數)下面點+號新增一個Bool參數,名為open。

打開Parameters面板,這裏被用來設置狀態機使用到的各種參數,如下:
Int : 整數數字
Float : 小數數字
Bool : 真或假(複選框)
Trigger : 布爾類型參數,控制器被使用過後重置(一次性觸發器)
可以透過程式腳本的對應方法 SetFloat、SetInt、SetBool、SetTrigger 和 ResetTrigger 來控制這些參數。
Empty to OpenMenu的設定
在這個Empty狀態上我們要呼叫OpenMenu,按右鍵選擇Make Transition。就會出現一條線代表Empty會去執行OpenMenu。在Transition的Inspector裡,取消勾選 Has Exit Time。 Has Exit Time(是否要有結束時間的設定:在沒有結束時間的情況,動畫播放完後,還是會停留在當前的動畫。有結束時間的情況,動畫在播放結束時,會切換到下一個動畫並播放)

這邊我們是利用Button去控制開關(切換)所以選擇Bool。
所以在Condition的open選擇True。
OpenMenu to CloseMenu 的設定
設定好OpenMenu後會有一個CloseMenu的指令。第二次按下Button時,關閉視窗。
先複製OpenMenu後,更名為CloseMenu。
在Inspector這邊的Speed設定值是-1。意思是反轉打開動畫。

這邊Transition的設定跟上一個步驟相同。物件狀態設定為False。
但是多了一項Settings。這邊的Settings是有關兩個物件動畫過渡時的時間控制。

CloseMenu to Empty 的設定
在CloseMenu新增Transition到Empty。這樣就設定MenuAnimator。

回到主畫面,選擇Setting 物件。在Panel Opener (Script)裡的Panel插槽指定為Panel這個物件。


打開C Script。去PanelOpen.cs修改一段程式。
呈現的效果如下: