前言

游戲制作UI除了能夠點擊拖動、列表顯示、窗口彈出之外，還需要有一個與用戶體驗密切相關的功能，那就是動畫效果。

在本課程中，我將主要介紹unity的動畫系統(tǒng)在UI中的應用，然后先構建一個動態(tài)界面。一旦我們熟練了動畫系統(tǒng)和UI事件輸入輸出，我們將在下一個教程中制作一個很酷的音樂游戲。

參考游戲

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

標準模式操作只有三種：

命中圈

滑塊

旋轉器

以上內容來自百度百科?？傊?，游戲界面可以通過UGUI來完成，其操作也可以根據(jù)我們所學來實現(xiàn)。對音樂游戲感興趣的玩家可以嘗試一下。

話不多說，我們開始向（抄）學習、向（山）學習、向（村）學習。

準備資源

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

一款資源提取軟件MultiExtractor，可以從Exe游戲中提取資源。請注意，我們僅將資源用于學習，不能用于完成商業(yè)作品！

獲取圖片：

在這里不得不贊一下大須的藝術。各種尺寸的圖片都準備得整整齊齊。

效果預覽

構建界面

首先，根據(jù)前面兩門課程方法搭建一個基本的UI場景。

用戶界面布局

Button組件中的Image組件和Button組件是分開創(chuàng)建的，原因稍后會解釋。

創(chuàng)建按鈕動畫

選擇“按鈕”組件的“過渡動畫”，然后單擊“自動生成動畫”按鈕。這時候unity會讓你保存Animator組件，并將其保存在你的項目中合適的位置。

創(chuàng)建的Animtor文件可以看到包含4個動畫片段（Clips）。

Animtor 組件出現(xiàn)在我們的Btn_Logo 對象上。這里簡單解釋一下Animtor組件的屬性。

打開Animtor 編輯窗口

Animator界面介紹

位置1：動畫參數(shù)設置窗口。單擊左上角的“參數(shù)”按鈕即可顯示此窗口。外部輸入信息，如果想讓動畫通過動畫轉場（Transitions）切換到不同的片段，就是通過這個參數(shù)來控制的。

位置2：動畫狀態(tài)。當動畫進入該狀態(tài)時，播放該狀態(tài)下設置的動畫Clip。注意，在State中我們還可以設置動畫播放的速度。

位置3：動畫過渡。如果游戲運行時滿足其Conditions 條件，它將把動畫狀態(tài)轉換為您連接的動畫狀態(tài)。它的過渡效果是通過插入兩個動畫數(shù)據(jù)來實現(xiàn)的，可以在窗口中調整混合過渡時間。

上面我們可以看到，為動畫狀態(tài)Normal、Highlighted、Pressed、Disabled的傳入連接設置了相應的觸發(fā)參數(shù)。 UI通過改變動畫控制器的觸發(fā)參數(shù)來改變動畫的狀態(tài)。

編輯動畫信息

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

打開后是這樣的，什么也沒有。這里我們需要選擇我們想要編輯的動畫對象。

動畫窗口簡介

位置1：

單擊以選擇要編輯的動畫剪輯。通過讀取Animtor動畫控制組件中的信息找到的。

位置2：設置動畫的幀率。一般游戲中30幀的動畫就很流暢了，所以我們改成30幀。

位置3：錄音模式。單擊后，Unity 會將您對對象的修改直接保存在時間范圍窗口中。

位置4：添加屬性按鈕。單擊后，將搜索該對象上的所有組件。如果我們在這個對象上掛一個腳本，腳本控制參數(shù)也會暴露在這里。

位置5：控制各幀狀態(tài)的窗口。這是用于可視化編輯。我們的主要業(yè)務都在這里進行。

開始編輯動畫信息

在法線動畫剪輯中添加并選擇一個屬性。我們選擇控制這個UI來實現(xiàn)跳動的效果，其實就是控制UI的縮放值。

當我們在第15幀設置對象時，整體UI放大了1.1倍，然后在最后一幀將其設置回1倍。

調整完成后，運行游戲看看效果：

如果我們想要完成復雜的動畫，通常會開啟曲線編輯模式

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

多添加一些曲線讓跳動感更加明顯。

以此類推，我們也將編輯帶有高亮效果的動畫Clip。

這里必須強調的是，在Unity2017中可以直接選擇所有關鍵幀并拉動藍色水平線，輕松修改動畫效果。所以我只復制了Normal狀態(tài)下的關鍵幀（很多Unity系統(tǒng)都支持Ctrl+C和Ctrl+V復制信息），拉高曲線就搞定了。

目前效果：

效果中可以看到，當鼠標沒有移動到按鈕上時，播放的是Normal動畫，而當鼠標移動到按鈕上時，則切換到Highlighted。當然，我們可以擴展當點擊按鈕時播放什么樣的動畫。例如，點擊一個按鈕后，該按鈕逐漸消失。您可以編輯Pressed 動畫剪輯并控制Image 組件的顏色來實現(xiàn)此目的。

擴展我們的接口

我們在界面中添加了其他選項的UI。我創(chuàng)建了兩個點，Tran_menuPos_1 和Tran_menuPos_2，并使用它們來實現(xiàn)我們的OSU！這個大標志向左移動，然后彈出四個選項。

我們的界面功能流程是：點擊OSU Logo按鈕，然后logo向左移動，然后彈出右側4個選項?，F(xiàn)在讓我們開始實施這個過程。

代碼完成后是這樣的。我們定義三個變量

btn_Logo：徽標按鈕對象

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

需要說明的是，我們經(jīng)常使用腳本來完成對象的簡單移動，但是使用攜程并編寫Update方法過于繁瑣和耗時。因此，Unity有很多Tween相關的動畫插件。筆者這里使用的是DOTween插件。使用時添加

即可使用

語句解釋：對象btn_logo會移動到menuPos_2位置，需要0.3秒。

在此之前，選項按鈕是不可見的。單擊徽標按鈕使其出現(xiàn)。

將腳本安裝到我們的UI 畫布并為其分配一個值

運行結果：

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

現(xiàn)在我們的選項打開方式太簡單了，我們還應該給選項按鈕添加外觀效果。

單擊“項目”窗口中的空白區(qū)域，右鍵單擊并選擇“創(chuàng)建動畫控制器”

將其放在Tran_menuPos_2 對象上

創(chuàng)建另一個動畫Clip來記錄動畫信息。創(chuàng)建后，只需將其命名為show即可。

將名為Show 的動畫剪輯拖到Animator 窗口中

如果想讓按鈕一一彈出，就得一一編輯按鈕的位置信息。這里我們只需要讓所有的按鈕一起彈出到右邊即可，所以我創(chuàng)建了一個空對象Option作為選項的父對象。我們只需要編輯Option的位移信息就足夠了。

另一個屬性是IsActive，用于設置對象是否被激活。我隱藏了前10 幀的對象，以避免當徽標移動和選項按鈕同時移動時動畫中斷。

目前效果：

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

現(xiàn)在問題來了，我們有4個相同類型的按鈕，并且無法編輯4個按鈕的動畫。我們最好有一個動畫控制器，可以重用所有需要這個動畫效果的地方。

這里注意，Animation界面中編輯的動畫信息是獨立存儲的。這意味著，如果我們編輯名為Image 的子對象的位置屬性，如果我將動畫放在另一個對象上（該對象也有一個名為Image 的子對象），則另一個對象將具有相同的動畫。

試試看：

我們將四個UI 選項按鈕放入父子層次結構中，如下所示

僅為按鈕Btn_Play 創(chuàng)建選擇動畫

生成的動畫控制器名為Btn_Option。

將相同的動畫控制器添加到所有四個按鈕

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

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

有時候，為了達到更好的UI效果，不能只是平移和縮放，還需要動態(tài)改變UI圖片。

Button 組件有一個用于動態(tài)替換圖像效果的接口。您只需將要替換的其他圖像拖到不同的狀態(tài)框中即可。

但是如果您想要制作動畫并替換圖片怎么辦？

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

單擊“添加新事件類型”按鈕可查看許多事件。幾乎所有會用到的事件接口都在這里。 Button 組件僅使用這些選項的部分功能。

我們選擇PointerEnter 選項。這個選項的作用是，當我們的鼠標移動到UI上時，就會觸發(fā)它，然后將動畫組件放置在Object框中，也就是說，當觸發(fā)時，就會處理這個對象的相關功能。

因為我們放置的是動畫控制器，所以在Function界面中選擇Animtor組件，然后在Animator組件中調用SetTrigger來設置觸發(fā)函數(shù)。

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

這樣，當鼠標進入UI圖像時，就可以播放Btn_play對象上的動畫了。

需要注意的是，通過清除Button 組件創(chuàng)建的UI 將默認設置為循環(huán)。我們這里不需要這個屬性。找到Clip 資源并取消選中LoopTime 選項。

目前效果：

總結

因為很多UI效果的調整都是基于感官體驗，所以我不建議讓程序員通過代碼去實現(xiàn)。當然，沒必要用簡單的位移來浪費美術人員的時間。因此，我簡單介紹了Dotween組件，無需編碼即可實現(xiàn)按鈕細節(jié)的效果。希望主要對編程感興趣的讀者可以多研究一下Tween相關的組件，主要對美術感興趣的讀者可以多研究一下Unity的動畫相關功能。

這里我簡單說明一下，Unity的動畫有一個Animator組件，它是一個控制組件，信息都放在Animation組件中。一個控制播放，另一個記錄信息。有些讀者可能沒有意識到其中的關系，這需要時間去研究，因為Unity的很多函數(shù)都是分開處理數(shù)據(jù)和邏輯的。

附源碼地址：

https://github.com/chs71371/Osu