第三十二課：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 鏡）+ 簡易分鏡；標轉場方式

下一課做 遊戲封面與宣傳圖——會玩了，還得讓別人第一眼想點開。