第 8 步 · 動效與 Three.js 的剋制用法
deck 是 HTML 的，所以它能做傳統幻燈片工具做不了的事：粒子、3D 物體、有縱深的背景、空間感的運動。Three.js 能做這些，各種動畫庫能做入場、懸停、章節切換、重點強調。
這一步的全部難點在於知道什麼時候不用。
一條判據
動效要讓演示更好記或者更好懂。不能讓幻燈片更難讀。
跟第 6 步的配圖判據是同一個邏輯：加進去的東西要為內容服務。區別是動效更容易過度，因為它做出來很爽。
提示詞
text
請掃一遍整份 deck，找出哪些地方加一點剋制的 Three.js 效果會更好。
只在 Three.js 能支撐這一頁的資訊時才用。
合適的用法：
1. 開場頁一個低調的動態背景。
2. 某個核心概念的 3D 隱喻。
3. 不影響可讀性的粒子氛圍。
4. 幫助解釋系統、網路或者流程的空間視覺化。
要求：
1. 不要每一頁都加 3D 效果。
2. 避免視覺噪音。
3. 保持文字可讀。
4. 保持效能合理。
5. 效果要跟 deck 的視覺風格一致。
更新完之後告訴我：
1. 哪些頁加了 Three.js 效果。
2. 加了什麼效果。
3. 為什麼它支撐這一頁。
4. 有沒有哪個效果為了清晰應該去掉。最後那一問要認真看
「有沒有哪個效果為了清晰應該去掉」——這句給了它一個自我否定的出口。實際用下來，它經常真的會指出一兩處。那些通常就是你自己看著也覺得彆扭的地方。
風格與用量的關係
官方教程裡有一條很實用的判斷：
- deck 本身已經很花的時候，3D 用得更少。 高飽和、高密度、強表情的風格，本身視覺負載已經滿了，再加 3D 就是噪音。
- deck 本身很剋制的時候，一點動效能提氣。 極簡風格有空間容納一處低調的運動，而且對比之下效果明顯。
也就是說，動效的預算跟風格是反比的。選了大膽風格的人，這一步應該做得比別人少。
一個更實際的數量建議
10 到 15 頁的 deck：
| 位置 | 建議 |
|---|---|
| 開場頁 | 可以有一處背景動效 |
| 章節分隔頁 | 可以有一個統一的轉場處理 |
| 核心概念頁 | 最多一頁值得一個 3D 隱喻 |
| 資料頁 | 用圖表自己的入場動畫就夠，不要額外加 |
| 結論頁 | 靜止。最後一頁需要的是重量，不是運動 |
總計一到三處。超過這個數，觀眾記住的會是效果，不是你的論點。
效能這件事
第 4 條那句「保持效能合理」不是客套。Three.js 場景在演示筆記本上、外接投影時、螢幕共享時的表現差別很大。
上臺前必須實測：
- [ ] 在你真正要用的那臺機器上跑一遍
- [ ] 外接投影的情況下跑一遍（解析度變了，粒子數可能撐不住）
- [ ] 如果要遠端共享螢幕，測一下會不會卡（這是最容易翻車的場景）
- [ ] 電池模式下跑一遍（有些機器會降頻）
遠端共享那條尤其重要。本機流暢的粒子效果，經過影片編碼之後可能變成一片糊。
一個更保守的替代方案
如果你不確定，用 CSS 動畫代替 Three.js。入場、淡入、位移這些用 CSS 就夠，效能穩定，在任何環境下都不會崩。
OpenDesign 本身也有基於 SVG + CSS 的動效技能，做出來的東西是純程式碼，能塞進 deck 也能塞進網頁，比 3D 場景省心得多。
text
這一頁不要用 Three.js。用 CSS 動畫做一個剋制的入場：標題先出，
三個卡片依次跟上，間隔 120 毫秒，緩動用 ease-out。不要迴圈播放。「不要迴圈播放」這句值得加。持續迴圈的動效在演講時會一直分散注意力。
常見坑
| 坑 | 表現 | 怎麼辦 |
|---|---|---|
| 每頁都有 3D | 觀眾暈，筆記本發燙 | 限定一到三處 |
| 文字壓在動態背景上 | 讀不清 | 加一層壓暗的遮罩，或者把文字移開 |
| 效果一直在動 | 講話時觀眾在看背景 | 要求動效播完就停 |
| 投影上掉幀 | 現場尷尬 | 上臺前在真機真投影上測 |
| 風格已經很花還加 3D | 視覺過載 | 按風格反比原則，減量 |
下一步
第 9 步 · Comment / Mark / Edit 精修 — 大結構定了，接下來是收細節。