关于 remotion-new-markup
这份指南介绍如何组织可编辑的 Remotion 时间线,并将依赖帧的动画隔离在 React 组件中,适合需要保留剪辑时序并减少无关重渲染的开发者。
主要功能
- 01组织可编辑轨道与序列
- 02将帧订阅限制在局部
- 03在动画属性中内联插值
- 04保留时间边界
- 05检查完整与独立合成
适用场景
- 01规划应一起编辑的时间线元素
- 02为配乐或叠加层制作动画,避免父场景订阅帧
- 03提取组件时保留关键帧时序
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ remotion-dev/ remotion --skill remotion-new-markup安装后在 Claude Code 中输入/remotion-new-markup确认已加载。
详细介绍
新建 Remotion 标记
选择组件和包装器之前,请阅读可编辑时间线结构。 先确定哪些内容需要一起编辑,再选择独立轨道或连续序列。本指南 包含完整的交互元素、场景、父级和注册方式。
对于带有同步字幕或叠加层的素材,也请阅读 可编辑视频时间线。 若要将一组内容提取到独立时间线,请使用 关联合成。
将帧订阅保持在局部
在需要帧来渲染的最小组件中调用 useCurrentFrame()。如果只需更改音轨音量、动画标题或叠加层,请让负责排列片段和轨道的合成与场景组件不订阅帧。将该项提取为在模块作用域中定义的组件,并在其中读取帧,而不是从父组件向下传递。这样可以避免动画在每一帧都导致无关片段和场景重新渲染。
将可编辑的 interpolate() 调用内联写在动画项的属性中。例如,Soundtrack 组件可以读取 useCurrentFrame(),并返回一个 Audio,其 volume={interpolate(frame, ...)};而合成只需在各个场景旁渲染 <Soundtrack />。如果输出实际上不会随帧变化,请优先使用静态值。
提取时保留现有的时间边界:将 Hook 放在 Sequence 或定时组件内部会改变帧坐标。保持裁剪、偏移、音量包络和动画关键帧使用同一时钟,或有意调整关键帧以保留原有剪辑。普通 React 组件就足以构成此渲染边界;只有出于编辑需要时才添加时间线包装器。
在完整合成和任何独立视图中验证结构更改。保留现有剪辑,并区分有用的标记分组与 Studio 的行展开和布局行为。