在游戏开发中，精美的UI动画能极大提升用户体验。Unity提供了强大的动画系统，让开发者可以轻松创建流畅的界面动效。本文将介绍UI动画的核心概念、制作流程和实用技巧。

一、核心动画组件

Animation窗口 - 可视化创建关键帧动画
Animator组件 - 控制动画状态和过渡
Animator控制器 - 管理动画状态机

二、创建UI动画的步骤

创建动画剪辑
- 选中UI元素 > 菜单栏Window > Animation > Animation
- 点击"Create"创建新动画剪辑(.anim文件)
添加关键帧
- 移动时间线到目标位置
- 修改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;}
}

四、高级技巧与优化

动画事件
- 在Animation窗口添加事件点
- 触发特定时间点的逻辑

// 动画事件调用的方法
public void OnAnimationEvent(string eventName)
{switch(eventName){case "PopupShown":// 弹窗完全显示时的逻辑break;case "TransitionComplete":// 转场结束后的处理break;}
}