前言

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

在這節(jié)課程我會主要介紹unity的動畫系統(tǒng)在UI上的運用，然后先搭建一個動態(tài)界面出來。當(dāng)能熟練掌握動畫系統(tǒng)和UI的事件輸入輸出，我們就在下一節(jié)教程里做一個很酷炫的音樂游戲。

參考游戲

《osu!》是一款基于《押忍！戰(zhàn)斗！應(yīng)援團》、《精英節(jié)拍特工》和《太鼓達人》等商業(yè)游戲改編的免費同人音樂游戲，由Peppy （Dean Herbert）開發(fā)制作。

他的標(biāo)準(zhǔn)模式操作只有三種

點擊圈（Hit Circle）

滑條（Slider）

轉(zhuǎn)盤（Spinner）

以上內(nèi)容來自百度百科，總而言之這款游戲界面都可以通過UGUI來完成，而他的操作也可以根據(jù)我們學(xué)過的內(nèi)容來實現(xiàn)，如果對音樂游戲有興趣的玩家可以去試試。

廢話不多說，我們開始借（抄）鑒（襲）學(xué)（山）習(xí)（寨）之路。

準(zhǔn)備資源

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

一個資源提取軟件MultiExtractor,可以提取Exe游戲的資源。注意資源我們只做學(xué)習(xí)使用，不能拿來完成商業(yè)作品！

得到圖片：

這里不得不贊一下Osu的美術(shù)，各個規(guī)格大小的圖片都準(zhǔn)備的很整齊。

效果預(yù)覽

搭建界面

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

UI布局

Button組件的Image組件和Button組件分離創(chuàng)建，原因后面會解釋到。

創(chuàng)建按鈕動畫

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

創(chuàng)建出來的Animtor文件，可以看到里面包含了4個動畫片段（Clip）。

我們的Btn_Logo物體上出現(xiàn)了Animtor組件，這里簡單的講解下Animtor組件的屬性。

打開Animtor的編輯窗口

Animator界面簡介

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

2號位置：動畫State,當(dāng)動畫進入這個狀態(tài)的時候，播放設(shè)置在該狀態(tài)上的動畫Clip。注意在State中我們還可以可以設(shè)置動畫播放的速度。

3號位置：動畫過渡Transitions，若游戲運行時滿足它Conditions的條件，它就會將動畫狀態(tài)向你連接的動畫狀態(tài)過渡，它的過渡效果是通過插值兩個動畫數(shù)據(jù)來實現(xiàn)的，可以在時間窗口中調(diào)節(jié)融合過渡時間。

以上我們能夠看到在動畫狀態(tài)Normal、Highlighted、Pressed、Disabled的進入連線都設(shè)置了相應(yīng)的觸發(fā)參數(shù)。UI就是通過改變動畫控制器的觸發(fā)參數(shù)來改變動畫的狀態(tài)的。

編輯動畫信息

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

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

Animation窗口簡介

1號位置：

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

2號位置：設(shè)置動畫的幀率，一般游戲30幀動畫已經(jīng)非常流暢了，因此我們改成30.

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

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

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

開始編輯動畫信息

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

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

調(diào)節(jié)完后運行游戲，可以看一下效果：

如果要完成復(fù)雜的動畫我們一般都會打開曲線編輯模式

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

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

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

這里必須強調(diào)一下，Unity2017中可以直接全選關(guān)鍵幀，拉動藍色橫線可以很方便修改動畫效果。因此我只把Normal狀態(tài)的關(guān)鍵幀復(fù)制過來（Unity很多系統(tǒng)都支持Ctrl+C和Ctrl+V拷貝信息），抬高曲線就搞定了。

目前效果：

效果中可以看到未移動鼠標(biāo)到按鈕上時，播放的是Normal動畫，當(dāng)移動鼠標(biāo)到按鈕上時，切換到了Highlighted。當(dāng)然我們這里可以擴展出點擊按鈕時播放怎樣的動畫，比如點擊一個按鈕后這個按鈕漸變消失，就可以編輯Pressed動畫片段，控制Image組件的顏色來實現(xiàn)。

擴充我們的界面

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

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

代碼搞定后是這樣，我們定義三個變量

btn_Logo：Logo按鈕的物體

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

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

就可以使用了

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

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

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

運行效果：

自定義創(chuàng)建動畫

我們的選項現(xiàn)在打開的方式太簡單了，我們應(yīng)該也給選項按鈕加入出場效果。

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

放到Tran_menuPos_2物體上

再創(chuàng)建一個動畫Clip來記錄動畫信息，創(chuàng)建出來后簡單命為show

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

如果要按鈕一個一個依次彈出就得一個一個編輯按鈕的位置信息，這里我們只用讓所有按鈕一起向右彈出，因此我創(chuàng)建了一個空物體Option做選項的服務(wù)提，我們只用編輯Option的位移信息就可以了。

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

現(xiàn)在的效果：

創(chuàng)建可以通用的動畫

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

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

實踐一下：

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

只給按鈕Btn_Play制作選中動畫

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

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

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

實現(xiàn)多種效果的動態(tài)UI

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

Button組件有動態(tài)替換圖片效果的接口，只用把你要替換的其他圖片拖到不同的狀態(tài)框里面去就實現(xiàn)了。

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

我們可以添加事件觸發(fā)組件

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

我們選擇PointerEnter選項，這個選項的效果就是我們鼠標(biāo)移動到UI上時就會觸發(fā)，然后將動畫組件放到Object框，表示當(dāng)觸發(fā)后它會去處理這個物體的相關(guān)的功能。

因為我們放入的是動畫控制器，在Function接口中選擇Animtor組件，然后調(diào)用Animotor組件中的SetTrigger設(shè)置觸發(fā)器函數(shù)。

然后下面的參數(shù)寫我們動畫控制器里面控制選中按鈕動畫狀態(tài)的參數(shù)。

這樣就可以在鼠標(biāo)進入UI圖片的時候，去播放Btn_play物體上的動畫了。

需要注意的是通關(guān)Button組件創(chuàng)建的UI會默認(rèn)設(shè)置成為循環(huán)，我們這里不需要這個屬性，找到Clip資源，把LoopTime選項去掉勾選。

現(xiàn)在的效果：

總結(jié)

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

這里我簡單再說明一下Unity的動畫有一個Animator組件，這個是控制作用的組件，而信息都是放在Animation組件中，一個控制播放，一個記錄信息?？赡軙行┳x者不清楚關(guān)系，這得花時間去研究，因為Unity很多功能都是數(shù)據(jù)和邏輯分開處理的。

附上源碼地址：

https://github.com/chs71371/Osu

對游戲開發(fā)感興趣的同學(xué)，歡迎圍觀我們：【皮皮關(guān)游戲開發(fā)教育】 ，會定期更新各種教程干貨，更有別具一格的線下小班教育。在你學(xué)習(xí)進步的路上，有皮皮關(guān)陪你！~

我們的官網(wǎng)地址：http://levelpp.com/

我們的游戲開發(fā)技術(shù)交流群：610475807

我們的微信公眾號：皮皮關(guān)