mcpField
R
remotion-new-markup

remotion-new-markup

github.com/remotion-dev创意与媒体68.6k105 次安装今天更新
代码仓库

关于 remotion-new-markup

这份指南介绍如何组织可编辑的 Remotion 时间线,并将依赖帧的动画隔离在 React 组件中,适合需要保留剪辑时序并减少无关重渲染的开发者。

主要功能

  1. 01组织可编辑轨道与序列
  2. 02将帧订阅限制在局部
  3. 03在动画属性中内联插值
  4. 04保留时间边界
  5. 05检查完整与独立合成

适用场景

  1. 01规划应一起编辑的时间线元素
  2. 02为配乐或叠加层制作动画,避免父场景订阅帧
  3. 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 的行展开和布局行为。

评论

支持 Markdown