動畫

本頁面的內容：

控件藍圖編輯器 的底部有兩個窗口，可用來實施和控制 UI 控件的動畫。第一個是動畫窗口，可以創建用來驅動控件動畫的基礎動畫軌。第二個是 時間軸 窗口，用於指定動畫如何隨時間應用至控件，其方法是在指定的時間上放置 關鍵幀 並定義附加的控件在該關鍵幀如何顯示（可以是尺寸、形狀、位置甚至顏色選項）。

添加動畫

爲了開始在 UMG 中添加動畫，您首先需要添加一個動畫軌。可以在動畫窗口中單擊 +動畫 按鈕添加動畫軌。添加動畫後（下圖中的黃框），會收到提示爲動畫軌輸入一個名稱。

添加動畫軌後，時間軸 將會變爲可用，並且您可以開始添加 動畫關鍵幀，動畫關鍵幀與控件隨時間改變的值是相關的。同時也請注意每個控件可以有多個動畫軌，例如使一個按鈕在移過屏幕的同時進行閃爍。

添加動畫關鍵幀

有兩種方法向動畫軌中添加關鍵幀。第一種方法是使用 時間軸 窗口中的 自動關鍵幀 複選框（下圖中的黃框）。通過這種方式，當對支持關鍵幀的值進行修改時，會自動向時間軸中添加關鍵幀。

目前選中的動畫軌在 時間軸 的頂端突出顯示（由上面的黃框表示）。

通過 自動關鍵幀 選項添加關鍵幀的一般流程爲：爲控件指定一個時間，使其在這個時間達到預定值，然後將 時間軸滑塊 移動到這一時間上，並使用細節面板或網格（通常用於設置位置、旋轉或縮放比例）來設置值。設置好最終結果後，滑動到序列的起始位置並設置控件的默認狀態。在兩個時間段之間滑動時間軸滑塊時，應該可以看到隨時間逐漸發生的變化。

第二種添加關鍵幀的方法是在支持關鍵幀的設置旁邊單擊 添加關鍵幀 按鈕。

在上圖中，每個設置旁邊都有一個圖標，可以單擊這些圖標向時間軸的當前位置添加一個該值的關鍵幀。在下圖中，背景顏色 的關鍵幀添加到了 0.00 和 2.00，此處按鈕控件的背景顏色在 2 秒內由白色變成黃色。

更改關鍵幀的值

按住 Ctrl 鍵並單擊關鍵幀，可以更改時間軸上某一特定時間的多個關鍵幀的值。

上圖中，我們選擇了與包含按鈕的垂直框的位置相關聯的所有關鍵幀，以此通過細節面板手動設置這些關鍵幀。例如，我們想使對象只沿着一個軸移動，那麼可以通過手動輸入值來更精確地控制控件的移動。

調用動畫

創建動畫的同時也會爲其創建一個變量。在 我的藍圖 窗口中，可以在圖表選項卡上的動畫下拉菜單下，看到已經創建的所有動畫軌。通過按住 Ctrl 並將動畫拖動到圖表中，就可以對其發佈命令，如播放或停止。

在此，我們令 開始動畫 在控件藍圖構建好的時候開始播放。

並且在此我們使 閃爍按鈕 動畫在 start_Button 被單擊時停止播放。

示例：帶動畫的主菜單

下面是兩個示例動畫，用來模仿一個簡單的 主菜單 屏幕，其中按鈕從屏幕底部飛入，而開始按鈕不斷閃爍。完成這些步驟後，應看到與下圖中的示例類似的情況。

本示例僅用於展示如何在 UMG 中設置動畫，單擊按鈕不會有任何作用。

按任意的方式設置主菜單，並在屏幕上包含一個具有按鈕的 垂直框。

點擊查看全圖。
在動畫窗口中單擊新建按鈕，併爲動畫命名，例如 開始動畫。
單擊 時間軸窗口 中的 自動關鍵幀 按鈕。
將時間軸上的 時間軸滑塊 移動到 0.00，然後單擊包含按鈕的 垂直框。
按住 Ctrl，單擊圖案控件（黃色箭頭）的中心並將 垂直框 拖出屏幕 (1)。

這樣即可在時間軸的當前位置上添加關鍵幀 (2)。
在 垂直框 的細節面板中，單擊錨並選擇 中下方 選項。
將 時間軸滑塊 移動到 1.00，然後按住 Ctrl，單擊並向上移動 垂直框 使其完全可見。
在 垂直框 的細節面板中單擊錨並選擇居中選項。
在動畫窗口中，單擊新建按鈕添加另一個名爲 閃爍按鈕 的動畫。

確保未勾選 自動關鍵幀。
將 時間軸滑塊 移動到 1.00 並單擊開始按鈕將其選中。
在細節面板中的外觀部分下，單擊 背景顏色 旁邊的 添加關鍵幀 按鈕。
將 時間軸滑塊 移動到 2.00，然後更改 背景顏色 的顏色並添加另一個關鍵幀。
此時 閃爍按鈕 動畫的 時間軸 應與下圖中一樣。
單擊圖表標籤，將兩個動畫變量拖入其中，創建出下面所示的圖表。

在此，當控件藍圖構建好時，播放 開始動畫（按鈕從屏幕底部飛入）。然後使用 Set Timer 節點每隔 2 秒調用一次名爲 StartBlinking 的 自定義事件（Set Timer 節點設置爲循環）。然後 StartBlinking 自定義事件每隔 2 秒就播放 閃爍按鈕 動畫（該動畫是指“開始”按鈕隨時間由白色變爲綠色）。
最後從 關卡藍圖 或您的可操縱角色藍圖創建控件藍圖。

我們在 我的角色 藍圖中創建該控件（控件包含主菜單的動畫和 UI 佈局）並使用 Add to Viewport 節點將其添加到窗口。