SuperAPI AI 工具集

remotion-video

设计与创作

查看项目

更新于 10-16 00:03

技能介绍

用途:在需要以 React/TypeScript 编程方式创建视频时使用,例如动画解说、社交媒体短片、数据驱动可视化与批量个性化视频。不适用于普通 React 问题、传统时间线剪辑工具、网页 CSS 动画或网页视频播放。

主要能力:以 <Composition> 定义视频的宽高、fps 与 durationInFrames;用 useCurrentFrame() 与 useVideoConfig() 获取当前帧与配置;用 interpolate() 做线性/钳制映射,用 spring() 做物理缓动;用 <Sequence> 与 <Series> 编排时间与场景;用 staticFile() 引用 public/ 素材,用 @remotion/google-fonts 加载字体,用 <Audio> 控制音量与时机;支持 Zod 参数化视频,并通过 CLI 或编程 API 渲染为 MP4/WebM/GIF。

使用方式:新建项目运行 npx create-video@latest,预览运行 npx remotion studio,渲染示例:npx remotion render src/index.ts MyVideo out/video.mp4,可用 --width、--height、--codec、--frames、--props 等参数。

限制与注意:每帧必须是纯函数,避免无种子随机与 setTimeout;interpolate 通常需加 extrapolateRight: 'clamp';spring 在 Sequence 内应使用子组件自身的 useCurrentFrame;staticFile 路径相对 public/;delayRender 默认 30 秒超时;合成宽高必须为偶数;渲染输出建议用 <OffthreadVideo>。详细动画、渲染与项目结构可查阅 references/ 下对应文件。