第 8 步 · 动效与 Three.js 的克制用法

deck 是 HTML 的，所以它能做传统幻灯片工具做不了的事：粒子、3D 物体、有纵深的背景、空间感的运动。Three.js 能做这些，各种动画库能做入场、悬停、章节切换、重点强调。

这一步的全部难点在于知道什么时候不用。

一条判据

动效要让演示更好记或者更好懂。不能让幻灯片更难读。

跟第 6 步的配图判据是同一个逻辑：加进去的东西要为内容服务。区别是动效更容易过度，因为它做出来很爽。

提示词

请扫一遍整份 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 场景省心得多。

这一页不要用 Three.js。用 CSS 动画做一个克制的入场：标题先出，
三个卡片依次跟上，间隔 120 毫秒，缓动用 ease-out。不要循环播放。

「不要循环播放」这句值得加。持续循环的动效在演讲时会一直分散注意力。

常见坑

坑	表现	怎么办
每页都有 3D	观众晕，笔记本发烫	限定一到三处
文字压在动态背景上	读不清	加一层压暗的遮罩，或者把文字移开
效果一直在动	讲话时观众在看背景	要求动效播完就停
投影上掉帧	现场尴尬	上台前在真机真投影上测
风格已经很花还加 3D	视觉过载	按风格反比原则，减量

下一步

第 9 步 · Comment / Mark / Edit 精修 — 大结构定了，接下来是收细节。