SuperAPI AI 工具集

remotion-best-practices

前端与建站

查看项目

更新于 10-16 05:50

技能介绍

用途:在处理 Remotion 代码时获取领域知识,按最佳实践编写用 React 创建视频的项目。

主要能力与要点:

  • 新建项目:在空目录中使用 npx create-video@latest --yes --blank --no-tailwind my-video 脚手架。
  • 动画:用 useCurrentFrame() 与 interpolate() 驱动,除需物理运动外优先 interpolate() 而非 spring();用 Easing.bezier() 定制时序。为便于在 Remotion Studio 中编辑,interpolate() 调用应内联在 style 属性中,并使用独立的 CSS transform 属性(scale、translate、rotate),而非拼接 transform 字符串。禁止使用 CSS transition/animation 与 Tailwind 动画类名。
  • 素材:资源放在项目根目录 public/ 下,用 staticFile() 引用,也支持远程 URL;图片用 <Img>,视频与音频来自 @remotion/media 的 <Video>、<Audio>。用 <Sequence> 的 from 延迟、durationInFrames 限时,默认绝对填充,内联内容用 layout="none"。
  • 组合:宽高、fps、时长在 src/Root.tsx 的 <Composition> 中定义,也可用 calculateMetadata 动态计算。
  • 预览与检查:npx remotion studio 启动预览;可选单帧渲染检查 npx remotion still [composition-id] --scale=0.25 --frame=30。
  • 按需加载规则文件:字幕、FFmpeg、静音检测、音频可视化、音效、效果、光照、3D、音频、动态元数据、组合、Google/本地字体、音视频时长与尺寸、GIF、图片、Lottie、DOM 与文本测量、时序、转场、透明视频、裁剪、参数化、地图、配音等。

适用场景:需要以代码化、可复用方式制作视频、动效与字幕等内容。 限制:资料未提供收费、价格、平台支持范围等事实;需遵循禁止 CSS 动画等约束。