UI 动画（淡入淡出/移动）

🎯本节学习目标

• 掌握 CanvasGroup
• 实现淡入淡出
• 实现滑入滑出

🚀课程导读

“菜单淡入、提示滑出”让游戏界面有质感。本课给 UI 加动画。

◆CanvasGroup 与淡入淡出

控制整组 UI 的透明度。

1. 【CanvasGroup】组件挂在 UI 容器上，统一控制其下所有子 UI 的透明度/交互。
2. 【属性】Alpha（0-1 透明度）、Interactable（可交互）、Blocks Raycasts（阻挡点击）。
3. 【淡入淡出原理】改 Alpha 值：0=全透明（看不见），1=不透明。
4. 【代码淡入】
5. CanvasGroup cg;
6. IEnumerator FadeIn() {
7. cg.alpha = 0f;
8. while (cg.alpha < 1f) { cg.alpha += Time.deltaTime * 2f; yield return null; }
9. }
10. 【淡出】同理把 alpha 减到 0，结束后 SetActive(false)。
11. 【用途】菜单开关、提示气泡、死亡画面淡入。
12. 【注意】Alpha=0 时仍占位置、可被点击，配合 Interactable/BlocksRaycasts=false 或 SetActive。
13. 【动画方式】也可用 Animator 给 CanvasGroup.alpha 做动画（第 127 课）。

◆滑入滑出与缩放

移动与弹跳。

1. 【滑入】让面板从屏幕外滑进来：
2. RectTransform rt;
3. Vector2 offScreen = new Vector2(rt.anchoredPosition.x, -600f); // 屏幕下方
4. rt.anchoredPosition = offScreen;
5. while (rt.anchoredPosition.y < 0f) {
6. rt.anchoredPosition = Vector2.MoveTowards(rt.anchoredPosition, Vector2.zero, 800f * Time.deltaTime);
7. yield return null;
8. }
9. 【滑出】反向移动后 SetActive(false)。
10. 【缩放弹跳】从 0 放大到 1.1 再回 1：
11. rt.localScale = Vector3.zero;
12. while (rt.localScale.x < 1f) { rt.localScale += Vector3.one * Time.deltaTime * 3f; yield return null; }
13. 【专业做法】用 Animator 状态机做这些过渡（可复用、可预览），或 DoTween 插件（第三方，超好用）。
14. 【DoTween 简介】安装后一行：panel.DOFade(1f, 0.5f); 极其简洁，强烈推荐进阶。
15. 【实战】做一个“设置面板”：点按钮滑入、关闭滑出。
16. 【注意】UI 动画注意在关闭时禁用组件避免持续占用。
17. 【体验】动画时长 0.2-0.4 秒手感最佳，太长拖沓。

⚠常见错误与排查

★动手练习

✓本节小结

UI 动画已掌握。下一课做生命值血条。