HyperFrames 到 Remotion 迁移工作流
将遗留或现有的 HyperFrames HTML 组合迁移到纯 React Remotion 代码。
概念映射表
| HyperFrames 概念 | Remotion 等价概念 |
|---|---|
GSAP 时间轴 .to() / .from() | useCurrentFrame() + spring() / interpolate() |
<div class="clip" data-start data-end> | <Sequence from={start} durationInFrames={duration}> |
<video> 元素 | <OffthreadVideo src={staticFile('...')} /> |
<audio> 元素 | <Audio src={staticFile('...')} /> |
npx hyperframes render | npx remotion render src/index.ts MyComp out/video.mp4 |
迁移步骤
- 解析 HyperFrames HTML 结构和时间线值。
- 将场景布局重新创建为 React
<AbsoluteFill>组件。 - 将 GSAP 插值替换为基于帧的确定性 Remotion
spring()和interpolate()原语。 - 在 Remotion Studio 中验证输出。