【Unity】UGUI系列教程——OSU！動態界面製作！

前言

遊戲製作UI除了要完成能點擊拖拽，列表顯示和窗口彈出外，還有一個和用戶體驗息息相關的功能——那就是動畫效果。

在這節課程我會主要介紹unity的動畫系統在UI上的運用，然後先搭建一個動態界面出來。當能熟練掌握動畫系統和UI的事件輸入輸出，我們就在下一節教程里做一個很酷炫的音樂遊戲。

參考遊戲

《osu!》是一款基於《押忍！戰鬥！應援團》、《精英節拍特工》和《太鼓達人》等商業遊戲改編的免費同人音樂遊戲，由Peppy （Dean Herbert）開發製作。

他的標準模式操作只有三種

點擊圈（Hit Circle）

滑條（Slider）

轉盤（Spinner）

以上內容來自百度百科，總而言之這款遊戲界面都可以通過UGUI來完成，而他的操作也可以根據我們學過的內容來實現，如果對音樂遊戲有興趣的玩家可以去試試。

廢話不多說，我們開始借（抄）鑒（襲）學（山）習（寨）之路。

準備資源

Osu！客戶端文件,附上官網地址https://osu.ppy.sh/p/download

一個資源提取軟體MultiExtractor,可以提取Exe遊戲的資源。注意資源我們只做學習使用，不能拿來完成商業作品！

得到圖片：

這裡不得不贊一下Osu的美術，各個規格大小的圖片都準備的很整齊。

效果預覽

搭建界面

首先根據之前的兩篇課程方法, 搭建基本的UI場景。

UI布局

Button組件的Image組件和Button組件分離創建，原因後面會解釋到。

創建按鈕動畫

Button組件的Transition選擇Animation,再點擊Auto Generate Animation按鈕,這時unity會讓你保存Animator組件，保存它在你工程的合適位置。

創建出來的Animtor文件，可以看到裡面包含了4個動畫片段（Clip）。

我們的Btn_Logo物體上出現了Animtor組件，這裡簡單的講解下Animtor組件的屬性。

打開Animtor的編輯窗口

Animator界面簡介

1號位置：動畫參數設置窗口，該窗口是點擊左上角Parameters按鈕出現的，外界的輸入信息，想讓動畫通過動畫過渡（Transitions）切換成不同的片段，就是通過這個參數來控制的。

2號位置：動畫State,當動畫進入這個狀態的時候，播放設置在該狀態上的動畫Clip。注意在State中我們還可以可以設置動畫播放的速度。

3號位置：動畫過渡Transitions，若遊戲運行時滿足它Conditions的條件，它就會將動畫狀態向你連接的動畫狀態過渡，它的過渡效果是通過插值兩個動畫數據來實現的，可以在時間窗口中調節融合過渡時間。

以上我們能夠看到在動畫狀態Normal、Highlighted、Pressed、Disabled的進入連線都設置了相應的觸發參數。UI就是通過改變動畫控制器的觸發參數來改變動畫的狀態的。

編輯動畫信息

點擊Window窗口，打開Animation界面：

打開後是這樣的他什麼也沒有，這裡需要我們選中我們要編輯的動畫物體。

Animation窗口簡介

1號位置：

點開選擇你要編輯的動畫Clip，它是讀取Animtor動畫控制組件裡面信息查找的。

2號位置：設置動畫的幀率，一般遊戲30幀動畫已經非常流暢了，因此我們改成30.

3號位置：錄製模式，點擊後，Unity將會把你對物體的修改操作直接保存在時間幀窗口中。

4號位置：添加屬性按鈕，點擊後會查找這個物體上的所有組件，如果我們掛在了一個腳本在這個物體上，這裡也會把腳本控制參數暴露出來。

5號位置：控制每一幀狀態的窗口，這是可視化編輯的，我們主要操作都在這裡進行。

開始編輯動畫信息

在Normal動畫片段中添加選擇一個屬性，我們選擇控制這個UI實現跳動效果，實際上就是控制UI的縮放值。

我們設置物體在15幀的時候，UI整體放大1.1倍，然後最後一幀設置回1倍。

調節完後運行遊戲，可以看一下效果：

如果要完成複雜的動畫我們一般都會打開曲線編輯模式

這樣我們可以直觀的看到動畫的變化程度，接下來的工作就是耐心的調整動畫吧。

多加了一些曲線，跳動的感覺更明顯了

以此類推，我們將高亮效果的動畫Clip也編輯一下

這裡必須強調一下，Unity2017中可以直接全選關鍵幀，拉動藍色橫線可以很方便修改動畫效果。因此我只把Normal狀態的關鍵幀複製過來（Unity很多系統都支持Ctrl+C和Ctrl+V拷貝信息），抬高曲線就搞定了。

目前效果：

效果中可以看到未移動滑鼠到按鈕上時，播放的是Normal動畫，當移動滑鼠到按鈕上時，切換到了Highlighted。當然我們這裡可以擴展出點擊按鈕時播放怎樣的動畫，比如點擊一個按鈕後這個按鈕漸變消失，就可以編輯Pressed動畫片段，控制Image組件的顏色來實現。

擴充我們的界面

我們將其他選項的UI加入進界面，我創建了兩個點Tran_menuPos_1和Tran_menuPos_2，利用它來實現我們OSU！這個大的Logo向左處移動，然後彈出四個選項的。

我們的界面功能流程是：點擊OSU的Logo按鈕，然後Logo向左移動，之後彈出右邊4個選項出來，現在開始實現這個流程。

代碼搞定後是這樣，我們定義三個變數

btn_Logo：Logo按鈕的物體

menuPos_1和menuPos_2：需要變化的兩個位置點

需要解釋的是，我們經常會利用腳本來完成物體的簡單移動，而用攜程和寫Update方法太過於麻煩和耗時了，因此對於動畫Unity有很多Tween相關的插件，筆者這裡用的是DOTween插件，使用時加上

就可以使用了

語句解釋：物體btn_logo將會移動到menuPos_2位置，耗時0.3秒

在此之前選項的按鈕都是不可見的，點擊Logo按鈕之後要讓它顯示出來。

將腳本掛載到我們的UI畫布上並賦值

運行效果：

自定義創建動畫

我們的選項現在打開的方式太簡單了，我們應該也給選項按鈕加入出場效果。

點擊Project窗口的空白位置，右鍵選擇創建一個Animator Controller

放到Tran_menuPos_2物體上

再創建一個動畫Clip來記錄動畫信息，創建出來後簡單命為show

將命為Show的動畫片段拖進Animator窗口中

父無i果要按鈕一個一個依次彈出就得一個一個編輯按鈕的位置信息，這裡我們只用讓所有按鈕一起向右彈出，因此我創建了一個空物體Option做選項的父物體，我們只用編輯Option的位移信息就可以了。

還有一個屬性是IsActive設置物體是否激活，我讓物體顯示的前10幀時隱藏，避免Logo移動和選項按鈕同時移動時的動畫穿幫。

現在的效果：

創建可以通用的動畫

現在問題來了，我們有4個相同類型的按鈕，不可能編輯4個按鈕的動畫。我們最好能有一個動畫控制器就能復用所有要這個動畫效果的地方。

在這注意的是Animation界面裡面編輯的動畫信息是獨立存放的。意思就是如果我們編輯了一個名叫Image的子物體位置屬性，如果我把動畫放在另一個物體上（它也有一個名為Image的子物體），另一個物體也會有相同的動畫。

實踐一下：

我們將四個UI選項按鈕製作成這樣的父子層級

只給按鈕Btn_Play製作選中動畫

製作的動畫控制器命名為Btn_Option，

給四個按鈕都加上同一個動畫控制器

可以看到其他按鈕也生效了

實現多種效果的動態UI

有時候UI效果要實現的更好不能只需要位移和縮放，還需要動態改變UI的圖片。

Button組件有動態替換圖片效果的介面，只用把你要替換的其他圖片拖到不同的狀態框裡面去就實現了。

但是如果又要動畫又要替換圖片呢？

我們可以添加事件觸發組件

點擊Add New Event Type按鈕可以看到很多事件。幾乎所有會用到的事件介面都在這裡。而Button組件只是用到了這些選項的部分功能。

我們選擇PointerEnter選項，這個選項的效果就是我們滑鼠移動到UI上時就會觸發，然後將動畫組件放到Object框，表示當觸發後它會去處理這個物體的相關的功能。

因為我們放入的是動畫控制器，在Function介面中選擇Animtor組件，然後調用Animotor組件中的SetTrigger設置觸發器函數。

然後下面的參數寫我們動畫控制器裡面控制選中按鈕動畫狀態的參數。

這樣就可以在滑鼠進入UI圖片的時候，去播放Btn_play物體上的動畫了。

需要注意的是通關Button組件創建的UI會默認設置成為循環，我們這裡不需要這個屬性，找到Clip資源，把LoopTime選項去掉勾選。

現在的效果：

總結

因為UI的效果調整很多都是感官體驗上來做的，我不建議讓程序員通關代碼去實現，當然簡單的位移也沒必要浪費美術工作人員的時間。因此我簡單介紹了一下Dotween組件，而針對按鈕細節的效果實現能不用代碼就不用代碼。希望主要走程序相關的讀者能多研究下Tween相關的組件，而主要走美術相關的讀者能多去研究一下Unity的動畫相關功能。

這裡我簡單再說明一下Unity的動畫有一個Animator組件，這個是控制作用的組件，而信息都是放在Animation組件中，一個控制播放，一個記錄信息。可能會有些讀者不清楚關係，這得花時間去研究，因為Unity很多功能都是數據和邏輯分開處理的。

附上源碼地址：

https://github.com/chs71371/Osu

對遊戲開發感興趣的同學，歡迎圍觀我們：【皮皮關遊戲開發教育】 ，會定期更新各種教程乾貨，更有別具一格的線下小班教育。在你學習進步的路上，有皮皮關陪你！~

我們的官網地址：http://levelpp.com/

我們的遊戲開發技術交流群：610475807

我們的微信公眾號：皮皮關