OpenMontage 迁移指南Remotion Sequence 嵌套树到 HyperFrames 扁平时间轴sequencing.md 全解析【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage本文是 OpenMontage 仓库.agents/skills/remotion-to-hyperframes/迁移技能集中references/sequencing.md的深度解读。核心主题如何把 RemotionReact 帧驱动中嵌套的Sequence/Series/Loop/Freeze时间树翻译成 HyperFramesHTML GSAP中扁平的data-start/data-duration标记与单一暂停 GSAP 时间线。读完你将掌握Composition→#stage根元素、AbsoluteFill→定位 div、Sequence→时间窗口 div、嵌套序列扁平化、Series 偏移累加、场景边界交叉淡化、Loop/Freeze 的 GSAP 等价实现以及多轨data-track-index的并行渲染约定。翻译前后可用本仓库随附的 T1–T4 测试语料做 SSIM 量化验证。核心思想坐标变换 vs. 时间窗口Remotion 的Sequence from{F} durationInFrames{D}本质是一个坐标变换它把useCurrentFrame()的返回值平移F并把子组件裁剪到[F, FD]这个窗口内。子组件永远是在当前帧是多少的心智模型下写作的。HyperFrames以下简称 HF没有逐元素当前帧的概念——它只有一个组合级composition的 seek 时间。运行时根据元素的data-start/data-duration决定在某个时刻显示或隐藏谁动画则统一由一条暂停的 GSAP 时间线驱动window.__timelines[compositionId]注册。两种模型碰撞的结果就是本文的核心结论Remotion 的嵌套时间树会被拍扁成同一父节点下的一列兄弟节点每个节点携带自己的时间窗口。这个结论在仓库的迁移技能 SKILL.md 中被称为机械式翻译mechanical translation约 80% 的典型 Remotion 组合可以逐条映射剩下的 20% 会因为不符合 HF 的 seek 驱动模型而被 lint 拦下。Composition→ 根元素#stageRemotion 组合的入口是Composition声明 id、总帧数、fps、画布尺寸Composition idMyVideo component{MyVideo} durationInFrames{300} fps{30} width{1280} height{720} /对应的 HF 根元素是一个携带data-*契约的div idstagediv idstage >AbsoluteFill style{{ backgroundColor: #0a0a0a }}...children.../AbsoluteFillHF 中直接翻译为div styleposition:absolute;inset:0;background-color:#0a0a0a;...children.../div规则position:absolute; inset:0是固定套路其余 style props 原样透传。T1 语料的 Remotion 源码 TitleCard.tsx 正是用AbsoluteFill包裹 1280×720 的纯黑底 HELLO 标题其 HF 翻译把背景色#0a0a0a直接写进了样式。这里要注意一个细节CSS 应该设置每个动画属性的初始状态from 值这样 GSAP 的to补间才能从正确状态出发详见后文 timing 映射。Sequence→ 时间窗口 div单个Sequence是最常见的映射Sequence from{0} durationInFrames{90} TitleCard / /Sequencediv>Sequence from{60} durationInFrames{120} Sequence from{30} durationInFrames{60} ImageScene / /Sequence /Sequence内层序列的有效窗口是[6030, 603060] [90, 150]。翻译方法是先求和再发射——不要保留嵌套的 HTML 结构直接算出解析后的窗口输出一个 HF divdiv>Series Series.Sequence durationInFrames{60} A / /Series.Sequence Series.Sequence durationInFrames{120} B / /Series.Sequence Series.Sequence durationInFrames{90} C / /Series.Sequence /Series发射成data-start依次累加的兄弟节点div>const tl gsap.timeline({ paused: true }); tl.set(scene1, { opacity: 1 }, 0); tl.set(scene1, { opacity: 0 }, 2); // hard cut at 2s tl.set(scene2, { opacity: 1 }, 2);0.5 秒交叉淡化crossfade——两个场景在时间窗口上重叠各自 tween opacitytl.to(scene1, { opacity: 0, duration: 0.5 }, 1.5); tl.to(scene2, { opacity: 1, duration: 0.5 }, 1.5);这条规则同时是TransitionSeries翻译的基础。若源码用到remotion/transitions的预置过渡fade/slide/wipe/clockWipe/flip/cube/iris 等完整翻译表见 transitions.md——例如fade()对应手动 GSAP 交叉淡化slide({direction:from-right})对应fromTo(translateX: 100% → 0)而iris()/clockWipe()建议直接使用 HF 的sdf-iris着色器过渡npx hyperframes add sdf-iris。Loop→ GSAPrepeat: -1循环HF 没有Loop原语Loop durationInFrames{30} Spinner / /Loop翻译为一条repeat: -1的 GSAP 子时间线再嵌入主时间线的正确偏移处const spinTl gsap.timeline({ paused: true, repeat: -1, repeatRefresh: false }); spinTl.to(spinner, { rotate: 360, duration: 1.0, ease: none }); // Embed in the main composition timeline at the right offset: mainTl.add(spinTl, 3);原文档明确警告这是易碎的翻译Remotion 的Loop每次迭代都会重置内部状态GSAP 的 repeat 也会但如果被循环的子元素自身还有动画你需要根据情况小心决定repeatRefresh开还是关。对大多数无限旋转这类简单循环这个方案够用。需要特别指出的是这条建议与 HF 的确定性渲染约束存在张力OpenMontage 的 skills/core/hyperframes.md 反模式清单明确禁止在 HF 组合里使用repeat: -1因为无限补间会破坏确定性的 seek-and-capture 渲染。实践中更稳妥的做法是有界重复bounded repeats或预先算好循环次数再落成有限 tween——迁移时建议优先把 Loop 的语义换算成固定次数的有限 tween仅在纯预览/非严格场景下使用repeat: -1。Freeze→ 丢弃包裹层Freeze frame{30} Animated / /FreezeFreeze的作用是把useCurrentFrame()固定为一个常量传给子组件。在 HF 里子元素的动画本来就已经由显式的 GSAP tween 驱动没有运行中的帧可冻结因此Freeze 的翻译就是不要对该元素做 tween——直接丢弃Freeze包裹层保留子元素本身。多轨并行渲染当背景视频、叠加文字、音频同时播放时使用不同的data-track-indexdiv contenteditable="false">【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考