图解工作流

Anatomy：从交互图解到视频场景

把可以自由探索的图解，转换成有顺序的观看过程。

Hermes AI 编辑部更新于 2026-10-14查看资料来源 ↗

交互物体让读者决定看哪里，视频则需要作者安排观看顺序。本文结合 Anatomy 官方可操作示例，说明如何从机构状态、输入事件和镜头顺序出发，把图解编排成一个可检查的小片段。MP4 导出属于额外制作流程，不是 Anatomy 自带功能。

开始前，先把这些弄清楚

Anatomy 擅长细致的等距插画，使用 SVG，可结合 WebGL 和 3D 效果。机器、缓存与流程讲解都适合从这里开始。明确工程需要的输出格式，并根据可靠资料核对标注。

以下是我们建议的组合工作流，并非 Anatomy 自带导出功能。列出观众必须看到的状态：完整物体、工作部件、信号路径、最终结果。为每个状态分配时间，去掉必须由观众恰好点击才会发生的动作。

先把一个小场景接入渲染器，导出短测试。在交付分辨率下检查透明度、字体、着色器输出和文字标注。确认多次导出在同一时间点呈现相同状态后，再扩展场景。

完整操作流程

不要试图在一条短片里解释复杂机械的全部组件。以缓存为例，可以只回答“未命中时发生了什么”。先用普通语言写出初始状态、输入和最终状态，再开始安排时间。讲解范围越清楚，越容易判断某个动效是否必要。

列出读者通常会触发的动作：聚焦组件、按下控制、展开结构、复位装置。为每个动作分配时间戳。这份事件表将代替观众的点击，驱动视频中的状态变化。事件与时间最好存成数据，而不是散落在多个临时定时器里。

镜头拉近时，机构本身可能不需要变化。把这两类控制分开：一个描述世界发生什么，一个描述观众从哪里看。如果移动镜头同时重启模拟，重复截图可能出现不同结果。先检查机构最终姿态，再组合镜头运动。

展开前让完整物体停留，下一次变化前让当前工作部件被看清。爆炸图只有在观众来得及建立部件关系时才有意义。说明文字放在机构外，并与当前状态对应；不要一边拆解、一边移动镜头、一边更换整段解释。

先只导出“闭合到展开”或“静止到工作”的一个变化。在真实文件里检查几何结构、着色器、边缘清晰度和字体加载。小片段没有通过时，不要急着拉长视频；更长的输出只会增加定位问题的成本。

下表是用于实践的编辑建议。把它当作可修改的工作底稿，按实际素材和投放要求调整。

这是本站为本文编写的示例。把括号里的内容替换成自己的任务，保留准备、检查和交付要求。先要求 Agent 说明缺少哪些输入，再进入制作，能减少猜测和返工。

把这个已有的 Anatomy HTML 图解编排成 12 秒讲解。保留原机制，为每个节拍定义初始状态、带时间戳的输入、镜头和读数。把仅依赖指针的操作改成可重放事件表，保留静态回退。先给时间表，再验证两次定位到同一时间戳会得到相同姿态，然后才接入选定的视频渲染器。

草稿演示可以录屏。但如果后续需要修改，最好能在相同时间重放相同输入。即使首版用录屏交付，也建议保存事件顺序，方便下一版保持节奏一致。

在小场景上检查渲染环境，并保留 SVG 回退。先确认透明度和 WebGL 支持，再搭完整时间线。不要把浏览器预览正常当成导出必然正常。

每次减少一种运动。先试固定镜头和一个工作组件，如果解释明显更清楚，就保留这个更简单的结构。讲解片段的目标是让关系可读。

把方法用在自己的项目里

拿自己的输入材料走一遍本文流程，保存第一版输出和具体审片记录。能说明“哪里成立、哪里需要改、如何重新生成”，比只留下一个好看的预览更有用。确定小样通过后，再扩展时长、复杂度和交付版本。

功能、资格和安装信息以原项目当前文档为准。本文的练习、时间分配、示例请求与审片建议为本站编辑内容；作者作品与本站教学示意均在展示处标注。