HyperFrames
HyperFrames 入门：先验证六秒标题，再添加复杂特效
按照文档使用 CLI，理解片段属性与暂停时间线，并在指定时间点核验画面后再丰富视频。
你将学会
- 先用文字和背景隔离时间问题。
- 开始时间、时长和轨道不会自动补齐素材。
- 既检查浏览器预览，也检查导出文件。
开始前需要
- 具备基础 HTML、CSS 与 JavaScript 知识
- 本地练习需要 Node.js 22+ 和 FFmpeg
解释本章对应边界，使用清单评估可重复的视频工作流。
先看结论
- 先用文字和背景隔离时间问题。
- 开始时间、时长和轨道不会自动补齐素材。
- 既检查浏览器预览，也检查导出文件。
从本地 CLI 流程开始
README 要求 Node.js 22 或更新版本以及 FFmpeg。手动流程使用 hyperframes init 创建项目，启动预览，再渲染 MP4。先用短标题场景完成这条路线；智能体技能是另一种创作辅助，不是理解实际渲染文件的前提。
下方 npx 命令会解析执行时可用的软件版本。练习成功后记录实际版本和环境，运行前审查生成的项目及安装提示。本文说明操作流程，不代表已经在读者的环境中渲染过视频。
明确每个片段在时间轴上的位置
README 示例在零号轨道放置六秒视频，在一号轨道放置从第一秒开始、持续四秒的标题，并把音频放到二号轨道。根节点的合成标识与注册的动画时间线相连。这些属性负责排期，不会提供缺失素材，也不保证字体已经加载。
第一次修改可以只保留文字和固定背景，再逐步增加外部视频与音乐。检查起始状态、标题入场过程和结束前的画面，并写出每个时间点应该看到什么。这样更容易区分时间错误与素材缺失。
让动画服从渲染器的时钟
文档中的 GSAP 写法创建暂停时间线，并以合成 ID 存到 window.__timelines。标题动画因此能够定位到已知时间，而不是独立推进。如果添加另一种动画库，应使用相应的可定位适配约定，不能假设 requestAnimationFrame 本身就足够。
预览正确后仍要检查导出文件。浏览器预览与最终编码可能暴露不同问题，例如字体就绪时机、音频时长和媒体缺失。把源码、环境和验收时间点一起保存，另一位开发者才能复现同一个练习。
实施步骤
- 1
检查目标环境中的 Node.js 与 FFmpeg。
- 2
按文档使用 CLI 初始化小项目。
- 3
预览六秒标题场景的已知时间点。
- 4
导出后检查文件并记录版本。
可复制示例
node --version
ffmpeg -version
npx hyperframes init my-video
cd my-video
npx hyperframes preview
# 完成预览后停止该进程，再执行渲染。
npx hyperframes render常见问题
必须安装智能体技能吗？
不必须。README 也提供手动 CLI 路线。技能可以辅助创作，但不能替代对时间和素材的理解。
为什么预览正常，导出却出问题？
捕获与编码还有额外的环境和就绪条件，应在实际导出中检查字体、媒体、动画状态和音频。
资料来源
- 固定版本 README来源核查 2026-09-07
- GSAP 适配器来源核查 2026-09-07
- 定位事件派发器来源核查 2026-09-07
- Three.js 适配器来源核查 2026-09-07
- GSAP 测试来源核查 2026-09-07
- 派发器测试来源核查 2026-09-07