【Unity 插件推薦】AnimationUI 動態介面神器,解鎖流暢 UI 動畫秘訣

目錄
【Unity 插件推薦】AnimationUI 動態介面神器,解鎖流暢 UI 動畫秘訣

 

前言

 

今天要推薦的是 AnimationUI,一款專為 Unity 開發者設計的 UI 動畫控制插件,讓 UI 動畫的製作變得【更直覺】、【更靈活】、【更強大】!在 Unity 中,內建的動畫系統雖然強大,但對於 UI 動畫來說可能過於【繁瑣】或【不易管理】,特別是當 UI 元件數量龐大時,會讓動畫設置變得複雜且難以維護。

AnimationUI 提供更簡單的方式來管理 UI 動畫序列,透過【視覺化控制】、【內建動畫事件】及【高度可自訂的 API】,讓 UI 動畫的編排更加直觀靈活,並且能夠輕鬆與其他 UI 互動組件整合。

本篇文章將帶您了解 AnimationUI 的【核心功能】與【使用技巧】,包括如何快速建立 UI 動畫、如何利用 API 控制動畫播放,以及如何在不同場景中應用 AnimationUI,如果您需要一款【容易上手】、【高靈活度】且【功能完善】的 UI 動畫工具,AnimationUI 絕對能滿足您的需求!

今天要推薦的是 AnimationUI,一款專為 Unity 開發者設計的 UI 動畫控制插件,讓 UI 動畫的製作變得【更直覺】、【更靈活】、【更強大】!在 Unity 中,內建的動畫系統雖然強大,但對於 UI 動畫來說可能過於【繁瑣】或【不易管理】,特別是當 UI 元件數量龐大時,會讓動畫設置變得複雜且難以維護。  AnimationUI 提供更簡單的方式來管理 UI 動畫序列,透過【視覺化控制】、【內建動畫事件】及【高度可自訂的 API】,讓 UI 動畫的編排更加直觀靈活,並且能夠輕鬆與其他 UI 互動組件整合。  本篇文章將帶您了解 AnimationUI 的【核心功能】與【使用技巧】,包括如何快速建立 UI 動畫、如何利用 API 控制動畫播放,以及如何在不同場景中應用 AnimationUI,如果您需要一款【容易上手】、【高靈活度】且【功能完善】的 UI 動畫工具,AnimationUI 絕對能滿足您的需求!

 

 

插件介紹

 

AnimationUI 是一款專為 Unity UI 動畫管理而設計的插件,讓開發者能夠透過簡單直觀的方式控制 UI 元件的動畫行為,無論是【按鈕點擊動畫】、【彈出視窗效果】,還是【進退場動畫】,都能夠透過 AnimationUI 輕鬆實現。

相較於 Unity 內建的  Animator Controller 系統,AnimationUI 不需要繁瑣的【動畫狀態機】與【過場設計】,而是採用序列化動畫步驟的方式,讓開發者能夠更清楚地掌控動畫的【流暢度】與【執行邏輯】。

此外 AnimationUI 還支援動態修改動畫數據,讓 UI 動畫可以根據【用戶操作】或【外部事件】進行即時變更。

 

功能特色

  1. 輕量化 UI 動畫框架
    無需使用 Animator Controller,即可輕鬆為 UI 添加動畫,減少開發流程的複雜度。
  2. 簡單易用的 API
    透過簡單的 C# 指令即可控制 UI 動畫,適合開發者【快速上手】與【靈活應用】。
  3. 內建多種 UI 動畫效果
    支持【淡入】、【淡出】、【縮放】、【位移】、【旋轉】、【彈跳】 等多種動畫,增強 UI 互動體驗。

 

適用場景

  1. UI 過場與彈出視窗動畫
    在場景切換時,使用【淡入淡出】或【滑入動畫】,讓 UI 過渡更自然流暢。
  2. 按鈕與互動效果
    按鈕點擊時添加【縮放】或【彈跳】動畫,提高玩家的視覺回饋感。
  3. 遊戲內教學與指引動畫
    在【新手引導】或【教學過程】中,使用動畫強調重要 UI 元素,提升玩家學習體驗。
【Unity 插件推薦】AnimationUI 動態介面神器,解鎖流暢 UI 動畫秘訣!

 

 

Unity AnimationUI 使用說明

 

右鍵單擊-> UI -> 建立 AnimationUI,或者您可以將 AnimationUI 元件新增至 gameObject。

右鍵單擊-> UI -> 建立 AnimationUI,或者您可以將 AnimationUI 元件新增至 gameObject。

選擇您想要的序列類型。

如果選擇動畫,請將要設定動畫的元件類型指定給 AnimationUI 元件的檢視器。

如果選擇動畫,請將要設定動畫的元件類型指定給 AnimationUI 元件的檢視器。

建議使用到到來鎖定檢查器,這樣設定值的動畫就更容易了。

您可以透過點擊設定開始按鈕來捕捉開始值。

您也可以透過變更值,然後按一下設定結束按鈕來擷取結束值。

您也可以透過變更值,然後按一下設定結束按鈕來擷取結束值。


拖曳進度條以查看動畫的外觀。

也可以在編輯模式下播放動畫,但請確保場景視圖已打開,否則動畫可能會有一些延遲。

也可以在編輯模式下播放動畫,但請確保場景視圖已打開,否則動畫可能會有一些延遲。


試著看一下 demo 的例子。但請確保「Level 1」場景已新增至建置設定中,否則無法載入「Level 1」場景。

在序列的左側也有每個序列的進度條。

在序列的左側也有每個序列的進度條。


嘗試比較升級選單和演示的設定選單。

請注意,這些設定的位置總是相對於左側或右側,但隨後它變為相對於螢幕的中間。

在演示的升級選單中,也有一個與設定選單類似的場景。

如果你不確定如何建立它,你可以用設定開始或設定結束按鈕來捕捉所有變數。一個例子是,當您要使用拉伸的“錨預設”來設定“矩形變換”的動畫時。只要嘗試啟用所有變數並設定所有內容,您可能會產生與演示中的設定或升級選單類似的結果。

如果你不確定如何建立它,你可以用設定開始或設定結束按鈕來捕捉所有變數。一個例子是,當您要使用拉伸的“錨預設”來設定“矩形變換”的動畫時。只要嘗試啟用所有變數並設定所有內容,您可能會產生與演示中的設定或升級選單類似的結果。


您可以在很短的時間內建立動畫,透過使用 Unity 內建的檢查器清單中的一些技巧。例如,新增序列將自動複製先前的序列,如果序列與其他序列相似,則可以快速。或做一些類似在使用它們之前創建等待序列的許多副本的事情。

您可以在很短的時間內建立動畫,透過使用 Unity 內建的檢查器清單中的一些技巧。例如,新增序列將自動複製先前的序列,如果序列與其他序列相似,則可以快速。或做一些類似在使用它們之前創建等待序列的許多副本的事情。

使用此工具,您還可以建立序列,設定活動的所有輸入,播放 sfx,在執行下一個序列之前等待,設定活動的 gameObject,載入場景,並使用 UnityEvent 進行自訂操作,其中每個都具有不同的顏色。

 

 

Unity AnimationUI API 參考資料

 

以下是引用取得方式。

using DhafinFawwaz.AnimationUILib;

public class Something : MonoBehaviour

{

   AnimationUI _animationUI;

   void DoSomething()

   {       _animationUI.Play();

   }

}

 

 

Unity AnimationUI 語法

 

方法名稱描述
Play()播放動畫
PlayReversed()播放反向動畫。適合快速從某個選單返回。
AddFunctionAt(float time, Action func)在執行 AnimationUI.Play() 後的某個時間點,添加需執行的函數。

 

屬性名稱類型描述
OnAnimationEndedAction當最後一個等待序列結束時的回調函數。這樣設計是為了在需要時提供回調選項,而不僅限於整個序列結束後。如果希望在整個序列結束時觸發回調,可以使用以下兩種方式之一:
1. 調用 AddFunctionAt(_animationUI.TotalDuration, func) 
2. 在檢視器中添加另一個作為最後序列的等待序列。

 

屬性名稱類型描述
OnSetActiveAllInputAction<bool>啟用或停用所有輸入相關功能(例如在播放動畫期間停用按鍵或互動)。
OnSetActiveAllInputAction<bool>啟用或停用所有輸入相關功能(此處可能為重複列出,需確認)。
OnPlaySoundByFileAction<AudioClip>根據指定的音頻文件播放聲音。
OnPlaySoundByIndexAction<int>根據音頻索引播放聲音。

 

目前仍然沒有直接的方式可以停用所有輸入,因此如果您需要停用鼠標和觸控以外的輸入,請修改 AnimationUICustomizable.cs 檔案。

此外,您可以訂閱 AnimationUI 的靜態事件來改變其行為,例如 OnSetActiveAllInput、OnPlaySoundByFile 或 OnPlaySoundByIndex。

如果您想修改這些行為,可以參考 Demo 資料夾內的 AudioManager.cs,裡面有具體的實作範例。

Sequence 類中的大多數變數是可修改的,因此可以在運行時更改 _animationUI.AnimationSequence[MyIndex].MyVariableName 的值。

 

 

Unity AnimationUI 範例

 

播放動畫,在動畫結束後呼叫 LoadSceneWithLoadingBar()

_animationUI.OnAnimationEnded += LoadSceneWithLoadingBar;

_animationUI.Play();

 

訂閱可自訂的 AnimationUI 事件。

void OnEnable()

{

   AnimationUI.OnSetActiveAllInput += SetActiveAllInput

   AnimationUI.OnPlaySoundByFile += PlaySoundByFile

   AnimationUI.OnPlaySoundByIndex += PlaySoundByIndex

}

void OnDisable()

{

   AnimationUI.OnSetActiveAllInput -= SetActiveAllInput

   AnimationUI.OnPlaySoundByFile -= PlaySoundByFile

   AnimationUI.OnPlaySoundByIndex -= PlaySoundByIndex

}

void SetActiveAllInput(bool isActive)

{

   Debug.Log("SetActive");

}

void PlaySoundByFile(AudioClip clip)

{

   Debug.Log("Playing " + clip.name);

}

void PlaySoundByIndex(int index)

{

   Debug.Log("Playing clip at index " + index.ToString());

}

 

 

Unity AnimationUI 注意事項

 

  • 目前仍沒有適當的方法來禁用所有輸入,因此如果您也想禁用滑鼠和觸控以外的輸入,請修改 AnimationUICustomizable.cs 的第 9 行、第 14 行和第 19 行。
  • ButtonUI 提供了一個額外的組件作為加值功能。
  • 提供了「反向序列按鈕」,適合用於從其他選單返回的場景。
  • 請務必按下「預覽開始」按鈕,避免意外操作,例如禁用所有輸入。
  • 在序列的左側有個別的進度指示器。
  • PlayOnStart 切換為 true,對於過渡到新場景非常有用。
  • 您可以安全地刪除 Demo 資料夾,但請確保修改 AnimationUICustomizable.cs,或者訂閱 AnimationUI 的靜態事件,例如 OnSetActiveAllInputOnPlaySoundByFileOnPlaySoundByIndex

 

 

Unity AnimationUI 授權條款

 

本插件採用 MIT 授權,這是一種開源友好的授權方式,允許您自由使用、修改和分發程式碼,包括商業用途,唯一的要求是保留原作者的版權聲明。

本插件採用 MIT 授權,這是一種開源友好的授權方式,允許您自由使用、修改和分發程式碼,包括商業用途,唯一的要求是保留原作者的版權聲明。

 

 

Unity AnimationUI 動態介面神器相關網站 & 插件下載點

 

【AnimationUI】

GitHub 下載連結:AnimationUI

Gitee 下載連結:AnimationUI

————————————————

以上內容改編節錄自:CSDN 作者:向宇it

 

更多好用插件:【Unity 好用插件推薦】持續更新,一起讓遊戲開發事半功倍!

 

 

 

本文原創(或整理)於亞洲電玩通,未經作者與本站同意不得隨意引用、轉載、改編或截錄。

特約作家簡介

X
A
Y
B
JamXu的頭像
JamXu
十年遊戲研發
二十年遊戲台主
三十年遊戲玩家

經中華網龍遊戲企劃進入遊戲圈,然後被雷打到去學程式前後端又學了點設計帶帶幾個研發團隊,見證了 3D 渲染技術及遊戲引擎互相進步,也見證了研發代理的更迭與博弈遊戲的興起,再毅然研究起 SEO 網路行銷社群廣告投放,深信自研自賣才是最大贏家,期望能為台灣研發重回輝煌時光貢獻一點力量。如果你也有遊戲夢,歡迎交流認識。


支持贊助 / DONATE

 

亞洲電玩通只是很小的力量,但仍希望為復甦台灣遊戲研發貢獻一點動能,如果您喜歡亞洲電玩通的文章,或是覺得它們對您有幫助,歡迎給予一些支持鼓勵,不論是按讚追蹤或是贊助,讓亞洲電玩通持續產出,感謝。

亞洲電玩通AsiaGameMaster - Steam 遊戲鑑賞家
亞洲電玩通AsiaGameMaster - FB 粉絲專頁
亞洲電玩通AsiaGameMaster - IG 粉絲專頁
亞洲電玩通AsiaGameMaster - Twitter
亞洲電玩通AsiaGameMaster - Yoytube 粉絲專頁
亞洲電玩通AsiaGameMaster - Tiktok

BTC

亞洲電玩通AsiaGameMaster - BTC 鏈贊助地址

352Bw8r46rfXv6jno8qt9Bc3xx6ptTcPze

 

ETH

亞洲電玩通AsiaGameMaster - ETH 鏈贊助地址

0x795442E321a953363a442C76d39f3fbf9b6bC666

 

TRON

亞洲電玩通AsiaGameMaster - TRON 鏈贊助地址

TCNcVmin18LbnXfdWZsY5pzcFvYe1MoD6f

延伸閱讀