在游戲開發中，精美的UI動畫能極大提升用戶體驗。Unity提供了強大的動畫系統，讓開發者可以輕松創建流暢的界面動效。本文將介紹UI動畫的核心概念、制作流程和實用技巧。

一、核心動畫組件

1. Animation窗口?- 可視化創建關鍵幀動畫

2. Animator組件?- 控制動畫狀態和過渡

3. Animator控制器?- 管理動畫狀態機

二、創建UI動畫的步驟

1. 創建動畫剪輯

   • 選中UI元素 > 菜單欄Window > Animation > Animation

   • 點擊"Create"創建新動畫剪輯(.anim文件)

2. 添加關鍵幀

   • 移動時間線到目標位置

   • 修改UI屬性（位置/縮放/透明度等）

   • 系統自動記錄關鍵幀

三、常用動畫效果實現

1. 漸入漸出效果

// 通過代碼控制CanvasGroup透明度實現漸隱效果
public class FadePanel : MonoBehaviour
{[SerializeField] private CanvasGroup canvasGroup;[SerializeField] private float fadeDuration = 1f;public void FadeIn(){StartCoroutine(FadeCanvasGroup(0, 1));}public void FadeOut(){StartCoroutine(FadeCanvasGroup(1, 0));}private IEnumerator FadeCanvasGroup(float start, float end){float elapsedTime = 0f;while (elapsedTime < fadeDuration){canvasGroup.alpha = Mathf.Lerp(start, end, elapsedTime / fadeDuration);elapsedTime += Time.deltaTime;yield return null;}canvasGroup.alpha = end;}
}

2. 按鈕懸停動畫

// 按鈕懸停時播放縮放動畫
public class ButtonHoverEffect : MonoBehaviour
{[SerializeField] private float hoverScale = 1.1f;[SerializeField] private float animationSpeed = 10f;private Vector3 originalScale;private bool isHovering;void Start() => originalScale = transform.localScale;public void OnPointerEnter() => isHovering = true;public void OnPointerExit() => isHovering = false;void Update(){Vector3 targetScale = isHovering ? originalScale * hoverScale : originalScale;transform.localScale = Vector3.Lerp(transform.localScale, targetScale, animationSpeed * Time.unscaledDeltaTime);}
}

3. 菜單滑動動畫

// 控制菜單從屏幕外滑入
public class SlideMenu : MonoBehaviour
{[SerializeField] private RectTransform menuTransform;[SerializeField] private float slideDuration = 0.5f;private Vector2 onScreenPosition;private Vector2 offScreenPosition;void Awake(){// 假設菜單初始在屏幕外（左側）offScreenPosition = new Vector2(-menuTransform.rect.width, 0);onScreenPosition = Vector2.zero;}public void ToggleMenu(bool show){StopAllCoroutines();StartCoroutine(Slide(show ? onScreenPosition : offScreenPosition));}private IEnumerator Slide(Vector2 targetPos){Vector2 startPos = menuTransform.anchoredPosition;float elapsed = 0;while (elapsed < slideDuration){menuTransform.anchoredPosition = Vector2.Lerp(startPos, targetPos, elapsed / slideDuration);elapsed += Time.deltaTime;yield return null;}menuTransform.anchoredPosition = targetPos;}
}

四、高級技巧與優化

1. 動畫事件

   • 在Animation窗口添加事件點

   • 觸發特定時間點的邏輯

// 動畫事件調用的方法
public void OnAnimationEvent(string eventName)
{switch(eventName){case "PopupShown":// 彈窗完全顯示時的邏輯break;case "TransitionComplete":// 轉場結束后的處理break;}
}

1. 動畫混合

   • 使用Animator的Layers實現動畫疊加

   • 通過Avatar Mask控制影響區域

2. 性能優化

   • 使用Canvas Group控制批量渲染

   • 避免頻繁改變RectTransform尺寸

   • 使用Animator的Culling Mode優化不可見UI

五、常見問題解決

1. 分辨率適配問題

   • 使用錨點(Anchors)而非絕對位置

   • 動畫基于錨點位置制作

2. 動畫卡頓

   • 檢查Canvas的Render Mode

   • 避免在Update中頻繁修改布局

3. 動畫不同步

   • 使用Time.unscaledDeltaTime制作UI動畫

   • 避免受游戲時間縮放影響

六、最佳實踐

1. 設計原則

   • 保持動畫時長在0.3s以內

   • 使用緩動函數提升自然感

   • 保持整個UI系統的動畫風格一致

2. 組織策略

   • 為每個UI元素創建單獨的Animator控制器

   • 使用動畫層管理復雜狀態

   • 創建動畫模板庫復用常見效果