Remotion 时序与编排实战用 Sequence、Series 与交错入场构建复杂动态编排【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion导读在 Remotion 中动画的时间由**帧frame**驱动一个 30fps 的视频每秒渲染 30 帧每个组件通过useCurrentFrame()得知自己正处在哪一帧。当视频里同时出现标题、字幕、图表、Logo 等多个元素时如何精确控制谁在什么时候出现、出现多久、与前后元素是否重叠就构成了 Remotion 中被称为Timing Sequencing时序与编排的核心能力。这篇指南围绕模板项目template-prompt-to-motion-graphics内置的 时序编排技能文档 展开讲解Sequence、Series、负偏移重叠、交错入场、嵌套时间轴与局部帧坐标系六个关键手段并逐一给出正反示例与底层源码依据。读完你将具备设计多元素、多阶段、可复用的编排化动画的完整方法论。为什么不能用手动判断帧号控制元素出现最直观的让标题在第 30 帧才出现写法是直接在 JSX 里做条件判断// 不推荐手动帧判断hardcoded frame checks { frame 30 Title /; } { frame 60 Subtitle /; }这种写法存在几个结构性问题时间信息与业务代码耦合每个组件都要感知全局帧号frame一旦要调整出现时间就要改动组件内部逻辑而不是改一个声明式的属性。无法在 Studio 时间轴上可视化条件渲染的内容不会被 Remotion Studio 识别为一个时间片段无法在时间轴里拖拽、裁剪、折叠调试成本高。组件卸载与挂载时机不明确frame 30 ...意味着前 30 帧该子树直接不渲染相关状态、媒体播放、预加载行为都不受 Remotion 调度管理。不利于嵌套复用当这段 JSX 被放进另一个Sequence后帧号语义会变化见下文局部帧坐标系写死的全局帧号会让组件无法复用。因此Remotion 提供了专用的时间容器组件来解决这个问题。Sequence把一段 JSX 在时间轴上平移的容器Sequence是 Remotion 核心导出组件。源码对其的定位是A component that time-shifts its children and wraps them in an absolutely positioneddiv.即把它的子元素在时间轴上平移并默认包在一个绝对定位的 div 中。用于延迟元素出现的推荐写法是import { Sequence } from remotion; Sequence from{30} durationInFrames{90} Title / /Sequence Sequence from{60} durationInFrames{60} Subtitle / /Sequence这段代码声明了Title从第 30 帧开始渲染、持续 90 帧覆盖 30–119 帧Subtitle从第 60 帧开始、持续 60 帧覆盖 60–119 帧。两个元素在 60–119 帧区间重叠显示——这就是编排choreography的基础多个元素在同一时间轴上各自占据一个时间窗口。from与durationInFrames的精确语义在 Sequence 组件实现 中可以看到它的核心渲染判定逻辑const content absoluteFrame cumulatedFrom from ? null : absoluteFrame endThreshold ? null : children;其中endThreshold Math.ceil(cumulatedFrom from durationInFrames - 1)。含义是当全局帧落在[from, from durationInFrames - 1]区间内时渲染子元素否则渲染null。因此from是起始帧默认值为0见 Sequence.tsxdurationInFrames是持续帧数默认值为Infinity一直持续到合成结束。虽然可省略但显式给出时长是良好的编排习惯也能让 Studio 时间轴正确显示片段长度代码中还会校验durationInFrames必须是正数、from必须是有限数值非法值会直接抛出TypeError帮助你在开发期尽早发现错误。此外Sequence还支持layout默认absolute-fill可设为none取消包裹层布局影响、name在时间轴中显示的片段名、showInTimeline、hidden、trimBefore从媒体/内容开头裁掉若干帧后再播放等属性完整列表见 Sequence.tsx 的 Props 类型定义。底层如何实现时间平移Sequence通过 React Context 工作它计算并向下提供一个SequenceContext包含absoluteFrom、cumulatedFrom、relativeFrom、durationInFrames等字段见 Sequence.tsx 的 contextValue 构造并用SequenceContext.Provider包裹子元素见 Sequence.tsx。所有挂在Sequence下的子组件通过读取该 Context 就能得知自己相对父时间轴偏移了多少进而把useCurrentFrame()换算成局部帧详见后文。Series让多个场景无缝衔接、依次播放Sequence解决的是延迟出现但当你要表达**A 播完紧接着播 BB 播完紧接着播 C**这种流水式结构时手动累加from很容易出错。为此 Remotion 提供了Series组件——文档对其定位是用于应当一个接一个播放、彼此不重叠的元素。import { Series } from remotion; Series Series.Sequence durationInFrames{45} Intro / /Series.Sequence Series.Sequence durationInFrames{60} MainContent / /Series.Sequence Series.Sequence durationInFrames{30} Outro / /Series.Sequence /Series;三个片段将自动排布为Intro占 0–44 帧MainContent占 45–104 帧Outro占 105–134 帧——你只需声明每一段的时长Series自动帮你累加起始帧。Series 的底层编排算法在 Series 实现 中SeriesInner会先通过flattenChildren摊平子元素然后递归地计算每一段的起点const currentStartFrame startFrame offset; const nextStartFrame startFrame durationInFramesProp offset;即本段起点 上一段累计起点 上一段时长 本段 offset默认offset 0时天然无缝衔接。实现上Series本质是把每个Series.Sequence渲染成一个layoutnone的Sequence见 series/index.tsx并将整个Series包在最外层Sequence之下见 series/index.tsx因此它享受Sequence的全部时间语义。需要注意Series的几条强约束同样由源码校验保证Series的子元素只能是Series.Sequence。传入字符串或其他组件会抛出TypeError纯空白字符串会被宽容忽略见 series/index.tsx每个Series.Sequence的durationInFrames必须是正数只有最后一个序列允许不设有限时长传Infinity让它自然延伸到合成结尾见 series/index.tsx 的校验逻辑offset必须是整数且不能是NaN或无穷大见 series/index.tsx。如果你的场景需要在无缝切换的同时做淡入淡出、滑动等过渡效果则应考虑使用仓库中的remotion/transitions转场库TransitionSeries相关包位于 packages/transitionsSeries适合纯粹的连续播段二者分工不同。Series 负 offset制造有重叠的转场窗口纯Series让上一段在结束帧立即卸载、下一段立即挂载这种硬切在多数视频中不够自然。为了在段与段之间制造重叠前一段淡出 后一段淡入同时进行可以使用负 offsetSeries Series.Sequence durationInFrames{60} SceneA / /Series.Sequence Series.Sequence offset{-15} durationInFrames{60} {/* Starts 15 frames before SceneA ends */} SceneB / /Series.Sequence /Series结合上面的起点公式SceneA占据 0–59 帧SceneB的起点被负偏移提前 15 帧至60 (-15) 45于是SceneB从第 45 帧起就开始渲染与尚未结束的SceneA在 45–59 帧区间重叠 15 帧。这 15 帧就是天然的交叉过渡窗口——你可以在SceneA末尾做一个淡出在SceneB开头做一个淡入让切换更顺滑。需要留意的副作用是nextStartFrame startFrame durationInFrames offset中包含了 offset因此负偏移不仅提前了本段的起点也会让后续所有段落整体前移同样的帧数。如果你只希望 B 提前、而 C 仍从 B 原始结束点开始就需要对 C 补一个正的 offset 抵消或在设计 A 时把 A 的durationInFrames留出重叠余量。交错入场Stagger用公式替代硬编码延迟多个列表项依次登场每个比前一个晚几帧是数据可视化、图标/卡片展示中最常见的编排需求。初学时的错误写法是为每一项手写延迟// 不推荐硬编码的延迟分支 const items data.map((item, i) { const delay i 0 ? 0 : i 1 ? 10 : i 2 ? 20 : 30; // ... });问题显而易见超过 4 项后延迟不再增长而且一旦调整间隔就要改一大串三元表达式。正确做法是用等差公式计算每项的延迟并结合spring物理动画实现弹性入场const STAGGER_DELAY 8; const BASE_DELAY 15; const items data.map((item, i) { const delay BASE_DELAY i * STAGGER_DELAY; const progress spring({ frame: frame - delay, fps, config: { damping: 15, stiffness: 120 }, }); return ( Item key{i} style{{ opacity: progress, transform: translateY(${(1 - progress) * 20}px), }} / ); });这段代码的三个关键点延迟公式第i项的入场帧为BASE_DELAY i * STAGGER_DELAYSTAGGER_DELAY交错间隔与BASE_DELAY基准延迟是两个可独立调节的常量。无论列表多长公式都成立。把延迟折算进弹簧动画spring({frame: frame - delay, ...})的本质是把弹簧动画的输入帧整体后移——对第i项而言它的第 0 帧发生在delay帧之后。frame来自useCurrentFrame()fps来自useVideoConfig()。用物理运动而非线性插值驱动入场spring是 Remotion 的物理弹簧动画函数实现在 packages/core/src/springconfig: {damping: 15, stiffness: 120}控制弹簧的阻尼与刚度stiffness越高回弹越快、damping越低摆动越明显。返回值progress从 0 增长到 1恰好可同时驱动opacity0→1 淡入和位移translateY((1-progress)*20px)即从下方 20px 上浮到原位。相比手写插值弹簧运动天然带有自然、有机的节奏是模板 系统提示词 中Prefer spring() for organic motion所倡导的做法。frame - delay之所以成立正是因为下一节要讲的局部帧语义只要这段交错代码自身处在某个Sequence内frame就始终是该序列内部的局部帧延迟公式即可稳定工作无需关心外层绝对时间。嵌套 Sequence构建多层级时间轴真实视频通常是一个多层级结构整片 → 幕 → 场景 → 元素。Sequence支持任意嵌套内层的from是相对外层起点的时间偏移Sequence from{0} durationInFrames{120} Background / Sequence from{15} durationInFrames{90} Title / /Sequence Sequence from{45} durationInFrames{60} Subtitle / /Sequence /Sequence这里外层是一个 120 帧的幕背景贯穿始终Title在外层第 15 帧即全局第 15 帧进入持续 90 帧Subtitle在外层第 45 帧进入持续 60 帧。嵌套带来两个重要收益相对语义如果整幕被移动到其他时间点内层所有from不用改动——它们描述的是幕内部的相对编排时长自动裁剪从源码看子序列的有效时长会被父序列剩余长度与合成总时长钳制actualDurationInFrames取父序列余量、自身时长、合成剩余时长三者的最小值见 Sequence.tsx。也就是说内层序列不可能溢出外层边界你可以在父级放心地声明一个较大的内层时长Remotion 会自动把超过父级边界的内容截掉。在 Studio 的时间轴面板中嵌套序列会以父子层级呈现可整体折叠、拖拽这就是 Remotion 里复杂动态编排的标准组织方式。Sequence 内的帧坐标系useCurrentFrame 返回局部帧进入任何Sequence后时间语义会发生关键转变useCurrentFrame()不再返回全局帧而是返回相对该Sequence起点的局部帧。Sequence from{60} durationInFrames{30} MyComponent / {/* Inside MyComponent, useCurrentFrame() returns 0-29, not 60-89 */} /Sequence上面这个Sequence从第 60 帧开始、持续 30 帧但它的子组件MyComponent内部调用useCurrentFrame()拿到的永远是0–29而不是全局的 60–89。其实现原理在 use-current-frame.ts 中一目了然const frame useTimelinePosition(); const context useContext(SequenceContext); const contextOffset context ? context.cumulatedFrom context.relativeFrom : 0; return frame - contextOffset;即局部帧 全局时间轴帧 − 所有祖先 Sequence 的累计偏移。Sequence通过 Context 把自己的累计偏移传递给后代useCurrentFrame读取后做减法从而让每个组件都工作在自己的第 0 帧起算的坐标系里。这个设计是所有高级编排的地基组件可移植复用一个组件只要依赖局部帧把它放进任意Sequence或从Sequence中取出都无需改写内部时间逻辑动画效果保持一致编排与实现解耦外层用Sequence/Series决定何时出现内层用局部帧决定出现后怎么动各自独立演进嵌套层级透明无论嵌套多少层useCurrentFrame都会把累计偏移一次算清内层组件永远面对一个从 0 开始的干净时间轴。如果确有需求读取全局帧号也应当通过类似方式显式获取全局时间轴位置或祖先SequenceContext而不是在组件内部对帧号做假设性换算以免组件被复用时时间语义被破坏。该指南在仓库中的角色面向 Agent/LLM 的技能文件上述指南原文并非散落的笔记而是template-prompt-to-motion-graphics提示词生成动态图形模板中一套Skill 技能体系的组成部分用于指导大语言模型编写时序正确的 Remotion 组件代码文档本身带 frontmatterimpact: HIGH、impactDescription: controls when elements appear and enables complex choreographytags 为sequence, series, timing, delay, choreography说明它属于高影响力技能它在 skills 目录的索引 中被注册为一条 guidance 技能sequencing并配套有提示词分类描述sequencing: multiple elements appearing at different times, staggered animations, choreographed entrances见 index.ts 的 SKILL_DETECTION_PROMPT当用户输入一个包含多个元素在不同时间出现的动效需求时路由中的生成逻辑 会先做技能检测再把命中的技能 Markdown 与示例代码拼接进系统提示词指导模型生成代码。这解释了为什么文档中的正反示例如此强调声明式、可计算、避免硬编码因为模型的输出直接面向真实可运行的 Remotion 代码而Sequence/Series/spring的局部帧语义是保证生成代码可正确渲染的前提。决策清单如何选择正确的编排手段把本文要点收敛成一张实操决策表需求场景推荐手段关键参数单个元素在指定时间延迟出现、持续固定时长Sequencefrom起始帧、durationInFrames持续帧数多个场景无缝衔接、依次播放Series每段的Series.Sequence durationInFrames场景间需要重叠以做交叉过渡Series 负offsetoffset{-N}重叠窗口即 N 帧多个相似元素逐个入场交错spring 延迟公式delay BASE_DELAY i * STAGGER_DELAYframe: frame - delay组织幕/场景/元素多级结构嵌套Sequence内层from相对外层起点子序列时长被父级自动裁剪组件内部读取自己出现后的第几帧useCurrentFrame()返回 0 起始的局部帧切勿假设为全局帧记住贯穿全篇的三条底层原则即可写出时序清晰、可复用、可调试的 Remotion 动画时间即声明用Sequence/Series的 props 表达时间而不是在组件里用frame N手写判断始终工作于局部帧任何入场、动画计算都基于useCurrentFrame()返回的局部帧让组件可自由嵌套与搬移用公式代替分支涉及多个同类元素时用BASE_DELAY i * STAGGER_DELAY这类可参数化公式驱动延迟代码量与元素数量解耦。需要更深入阅读源码时可依次查看 Sequence 组件、Series 组件、useCurrentFrame 实现 与 spring 弹簧动画目录它们共同构成了 Remotion 时序编排的完整底层支撑。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考