第三十二课：UI 动画与过场动画

角色、敌人会动了；界面和叙事也要会动。第27课讲 UI 零件；这一课讲零件怎么进场、怎么反馈、怎么带走。

好的 UI 动画几乎看不见——但一点击就知道生效了。过场则是「我先接手画面几秒」。

1、UI 动画三件事

目的	一句话	例子
反馈	告诉你按到了	按钮下沉、获得飘字
引导	拉你看重要处	新按钮发光、任务栏滑出
氛围	跟世界同调	RPG 像翻书开窗；科幻像扫描

要快、有目的、成套一致。参考时长：

类型	大约
按钮点一下	50～100ms
提示 / Toast	150～250ms
面板滑入	200～300ms
大过场	0.5～2s（别让人选关等三分钟）

2、像素里常见几种动法

状态切换（第27课四态）：Normal / Hover / Focus / Active。动起来就是换图，或整块下移 1px。

按下与回弹：Active 别拖太长；松手立刻回。按键提示也可以自己抖一下、亮一下。

弹出 / 滑入 / 淡入：

• 弹出：80% → 100% 或略过冲再回（100% → 110% → 100%）
• 滑入：从屏外按整数像素步进（如每帧 4px）
• 淡入：半透明遮罩、Toast

面板成套出现：暂停窗、商店、升级提示——同一套进场规矩。

数字滚动：伤害 / 金币别瞬跳；短时间 tween 到目标，可叠向上飘字。

像素硬规矩：

• 位置取整；开 Pixel Snap
• 缩放优先 2× / 3×，或直接换一张更大素材，别 1.5× 糊边
• 想像素味：对话框边框可以「一格一格长出来」，再打字机出字

指针也能动：箭头 / 手 / 禁用 / 对话……按悬停目标换状态。

3、过场：先写镜头，再堆特效

过场 = 短暂拿走控制，讲一件事：开场、换关、胜负、教程演示。

像素项目优先：

1. 游戏内过场：用现成精灵在场景里演（衔接顺、体积小）
2. 视觉小说式：立绘 + 背景 + 打字 + 轻微震动/闪白

少用超长预渲染视频，除非你真有剧情片预算。

镜头别贪多，小项目 3～5 镜够用：

景别	干什么
远景	氛围、地点
中景	对话、走路
近景 / 特写	表情、关键道具

运动：推近强调、拉远收场、横移换景、跟镜跟角色。
转场：硬切（紧）、淡入淡出（时间过了）、闪白/闪黑（冲击）、像素化再切（风格化）。

手绘透视走动、地牢走廊推进——就是「相机在动」的像素做法，适合关卡门或梦境进场。

制作顺序：剧本 → 分镜 → 素材 → 时间轴。每镜写清：几秒、角色播哪段动画、字出现时机、音效。先通一版静帧切换，再加缓动和特效。

4、作业

做一段 获得奖励 的 UI 时序（开箱或直接弹道具都行），约 2～3 秒：

1. 时序表：出现 → 打开/放大 → 道具飞出 → 提示停留 → 收起；每段写大概毫秒
2. 素材：关闭/打开（或 4～6 帧序列）、一个 32×32 图标、可选光芒/星星、一句「获得××」面板
3. 像素对齐：动画路径用整数坐标；列表说明你用了硬切还是 Ease Out
4. 选做 A：引擎里 Tween / AnimationPlayer 跑通并录屏
5. 选做 B：写一个 5～10 秒游戏内过场剧本（3～5 镜）+ 简易分镜；标转场方式

下一课做 游戏封面与宣传图——会玩了，还得让别人第一眼想点开。