场景幻灯片:一图一镜头
场景幻灯片是一种全部内容都存在于单幅插图中的演讲方式。每个“页面”就是同一个场景上的一个镜头位置。镜头会推近到某个细节,沿着绘制路径滑向下一个对象,在房间中跳跃,最后在结尾拉回全景。文字显示在屏幕空间的卡片上,并且在镜头稳定、停顿一个节拍之后才会出现,这样观众在阅读文字之前能先看到场景。
本技能是使用 @open-slide/core 2.2 制作一个包含 22 个镜头、时长 20 分钟的会议演讲的方法。open-slide 没有镜头 API,因此镜头在页面组件内部驱动。template/index.tsx 是完整的引擎和七个示例镜头;复制后替换场景、锚点和卡片即可。
何时使用
- 演讲有一个具体的场所:教室、手术室、工厂车间、城市街区。该场所中的物体对应演讲的各个节点。
- 演讲者希望拥有 Prezi 的感觉(拉近讲细节、拉出看全貌、滑向下一个点),但不想用 Prezi。
- 镜头数量为 15 到 25 之间。少于这个范围用普通幻灯片就够了;多于这个范围镜头移动会变成背景噪音。
不适用于数据密集的幻灯片、现场演示,或任何需要由他人在 PowerPoint 中编辑的场合。它是网页,只能在 Chrome 中运行。
工作顺序
- 先做分镜。 一个场景、一系列节点、每个节点一个镜头位置和一张卡片,以及你仍需准备的真实材料(截图、日志、照片)。在开始美术或代码之前写下来。
references/storyboard.md包含表格以及与演讲者协商的问题。 - 制作场景。 生成三张全景风格候选图,让演讲者选择,然后通过图生图编辑修复图片(移除物体、添加故事需要的东西、保留屏幕空白)。只有当镜头距离世界坐标中的像素在几百像素以内时才生成特写图。参见
references/art.md。 - 用网格测量锚点, 永远不要在全景图上凭目测。
scripts/measure-grid.sh以 100 像素网格裁剪图片区域;对于任何需要让截图恰好居中的情况,使用 3 倍角点裁剪。参见references/art.md。 - 基于模板构建幻灯片。 添加一个
ViewKey、一个VIEWS条目(镜头、HUD 模式、模糊、停顿)、一个HudBody分支、一个页面、一条注释。引擎不变。references/engine.md解释了每个参数。 - 验证,不要凭眼感。 在带界面的 Chrome 中运行
scripts/perf-probe.cjs:所有页面变化中零长任务且帧间隔不大于 50 ms 是标准。测量时不截图;截图耗费 300 ms,会表现为卡顿。参见references/verification.md。 - 录制导览并在手机上观看。
scripts/record-walkthrough.cjs按每个镜头停留时间播放并录制;转换为 mp4 后发送到演讲者的手机。在原始项目中,每一轮反馈都来自这个循环,而不是浏览器。 - 从构建文件夹演示。
scripts/present.command构建、提供dist/服务,并同时打开幻灯片和演讲者窗口(注释、计时器、下一页)。在会场投影仪上用演讲者本人的笔记本测试。参见references/presenting.md。
付费买来的规则
- 在卡片出现之前先稳定场景。卡片要等到镜头着陆并额外等待
holdms(默认 1 秒)后才显示。如果卡片在镜头移动的 70% 时就弹出,场景就变成了桌面背景。 - 特写镜头必须位于其特写图内部。如果视野比特写图更宽,放大后的基础图片会从边缘渗透进来,看起来像阴影或幽灵之手。
- 截图通过单应性矩阵映射到屏幕内,并紧贴边框内边缘。以 3 倍分辨率测量四个角点。
- 远距离跳跃不需要中间页面。van Wijk 路径会自动上拉然后俯冲;将远端的节点放在图片的两端,让它自由飞行。
- 卡片上使用平实的语言。图片承担了一半的信息;卡片只表达一个想法,最多四行。
- 对此功能永远不要使用
MorphElement。它会在动画开始之前复制主线程上所有后代的计算样式;一个真实的幻灯片因此冻结了五秒钟。参见docs/adr/0001-drive-the-camera-in-page.md。
文件夹内容
| 路径 | 说明 |
|---|---|
template/index.tsx | 引擎和七个示例镜头。复制到 slides/<id>/index.tsx。 |
template/assets/ | 示例场景(2752 × 1536)、特写图、应用截图。替换它们。 |
references/engine.md | 镜头、HUD、停顿、特写图及透视屏幕的工作原理;如何添加镜头。 |
references/storyboard.md | 分镜表格及在美术之前需要做的决定。 |
references/art.md | 提示生成场景、修复、测量锚点、特写图。 |
references/verification.md | 性能探测、导览录制、手机审查循环。 |
references/presenting.md | 构建、预览、演讲者窗口、启动器、备选方案。 |
references/pitfalls.md | 曾经出过一次错的所有事情,避免再次发生。 |
scripts/ | perf-probe.cjs, record-walkthrough.cjs, measure-grid.sh, genimg.py, genedit.py, present.command。 |
docs/adr/ | 为什么镜头实现在页面内,为什么 HUD 要等待。 |
与演讲者合作
按以下顺序与演讲者一起决定:节点的故事顺序;远距离跳跃是否经过全景(会自动经过);他们提供哪些真实材料以及何时提供;美术风格(展示三种,选择一种);图片中不能出现什么。将每个决定写入分镜文档并标注日期。然后构建整个幻灯片、录制并发送视频。预期会有三轮或四轮批注,每轮大约涉及五个镜头。