导出指南
HTML 动画做好了，怎样得到 MP4？
验证一段 HTML 动画能够稳定、重复地导出。
网页可以依靠实时事件、异步素材和播放历史表现得很流畅。视频渲染则需要准确回答“第 120 帧是什么样”。本文从这个问题出发，说明时间、素材、音频与导出检查如何配合，并提供一个可拖动的逐帧实验，帮助判断自己的动画是否适合稳定导出。
ONE CLOCK. EVERY FRAME.
Same time. Same scene.
拖动到任意一帧，再回到同一位置：画面和读数保持一致。切换曲线比较运动节奏。这是用于解释时间线的本站示例，不是工具生成效果或性能实测。
开始前，先把这些弄清楚
先明确可重复性要求
录屏适合快速分享草稿，但会记录播放时序和录制环境。对于需要反复修改的交付件，使用能定位到指定帧的渲染器。网页播放流畅，不代表离线渲染一定正确。
准备统一的时间线
定义时长、帧率和尺寸。镜头位置、图表值等动画状态都由请求的时间决定。截图前加载好字体与图片；粒子等随机效果固定种子；声音使用同一时间线。
检查真正的文件
在 HyperFrames 工程里，用 npx hyperframes preview 预览，用 npx hyperframes render 导出。检查首尾帧、场景切换、声画同步和手机上的可读性。保留源工程，让修改一行文案不必从头再来。
完整操作流程
从输入到交付，一步步展开
01先写输出约定
把时长、宽度、高度与帧率写在同一个地方。12 秒、30 fps 对应 360 帧，编号为 0 到 359。提前决定片尾是停留还是直接切断。预览时容易忽略的一帧误差，在循环播放时可能很明显。
02去掉对播放历史的依赖
“每次刷新都往前加一点”的位置计算，会依赖实际刷新了多少次；从帧编号计算的位置则可以重现。计数器、镜头路径、粒子种子和图表值都需要同样检查。测试时不仅向前播放，也向后拖动，观察是否仍能得到正确状态。
03等待素材就绪，不猜延迟
05声音与画面使用同一时间线
给声音提示点明确时间，在编码后文件里检查事件附近。独立定时器触发的声音，可能与逐帧定位的渲染器错开。审片时同时看视觉落点和音频瞬态，不要只凭整段听起来差不多就通过。
06保留可重复导出的配方
保存源工程版本、素材版本、输出设置和简短审片说明。依赖更新后重新渲染一个已知帧，如果出现非预期变化，先定位差异，再验收整条视频。
每个阶段检查什么
下表是用于实践的编辑建议。把它当作可修改的工作底稿，按实际素材和投放要求调整。
| 阶段 | 检查 | 证据 |
|---|---|---|
| 截图前 | 字体和图片已加载 | 完整且稳定的第 0 帧 |
| 截图时 | 状态由请求时间决定 | 重复定位结果一致 |
| 编码后 | 时间、音频与场景边界 | 播放真实输出文件 |
| 交付 | 分辨率与手机可读性 | 在实际投放位置检查 |
一份可以直接改写的完整请求
这是本站为本文编写的示例。把括号里的内容替换成自己的任务，保留准备、检查和交付要求。先要求 Agent 说明缺少哪些输入，再进入制作，能减少猜测和返工。
检查这个 HTML 合成是否适合导出 MP4。输出：1920×1080、12 秒、30 fps。检查字体与素材、实时计时器、随机数、指针依赖状态和声音时序。让所有视觉状态能够在第 0 到 359 帧之间定位。先导出短测试，对比两次第 120 帧的结果。完整渲染前说明不受支持的效果。保留源工程与导出检查表。实际操作中，容易卡在哪里
预览流畅，为什么导出仍然失败？
预览跟随浏览器时间，截图可能直接跳到某一帧。检查场景默认哪些事件已经发生，并确认素材在截图环境中确实就绪。
循环片段怎么检查？
连续播放多个循环，观察片尾到片头的衔接。检查姿态、镜头、光照与声音；即使最后一帧位置相同，速度突然改变仍可能让循环产生顿挫。
送审应该发哪个文件？
发送编码后的交付文件，并附尺寸、帧率与具体版本。仅提供浏览器链接不够，审片者应能定位到你讨论的同一个时间点和画面。
把方法用在自己的项目里
下一步，完成一个可检查的小样
拿自己的输入材料走一遍本文流程，保存第一版输出和具体审片记录。能说明“哪里成立、哪里需要改、如何重新生成”，比只留下一个好看的预览更有用。确定小样通过后，再扩展时长、复杂度和交付版本。
资料来源与编辑说明
功能、资格和安装信息以原项目当前文档为准。本文的练习、时间分配、示例请求与审片建议为本站编辑内容；作者作品与本站教学示意均在展示处标注。