Remotion 入门第一次项目实践一、Remotion 是什么Remotion 是一个使用 React 和 TypeScript 编程制作视频的工具。它的基本思路是React 组件负责描述画面当前帧负责表示时间CSS 属性随帧数变化从而形成动画Composition 把组件、尺寸、帧率和时长组合成一个可以独立预览、渲染的视频。[!important] 容易混淆的概念.tsx文件只是 React 代码文件并不天然等于一个画布。只有组件在Root.tsx中通过Composition注册后才会出现在 Remotion Studio 左侧并可以独立渲染。二、创建并启动项目npx create-videolatest--yes--blankmy-videocdmy-videonpminstallnpmrun dev执行npm run dev后浏览器会打开 Remotion Studio。三、认识 Remotion StudioRemotion Studio 是 Remotion 的视频预览和调试界面。界面主要区域左侧Compositions已经注册的合成例如MyComp、NewComposition中间Preview视频预览画布底部Timeline时间轴红色指针表示当前帧中间下方播放按钮播放、暂停和逐帧预览右下角Render渲染和导出视频灰白棋盘格透明背景不代表程序报错。四、项目主要文件src/index.tsRemotion 项目的入口文件负责注册根组件。通常不需要频繁修改。src/Root.tsx视频的注册中心。它通过Composition声明项目中有哪些视频以及每个视频的组件、时长、帧率和分辨率。示例import {Composition} from remotion; import {MyComposition} from ./Composition; export const RemotionRoot () { return ( Composition idMyComp component{MyComposition} durationInFrames{150} fps{30} width{1920} height{1080} / ); };属性说明属性含义idComposition 的唯一 ID也是渲染命令使用的名称component负责绘制视频画面的 React 组件durationInFrames视频总帧数不是秒数fps每秒播放的帧数width视频宽度单位为像素height视频高度单位为像素视频时长的计算方式视频时长秒 durationInFrames / fps例如durationInFrames{150}、fps{30}视频时长就是 5 秒。src/Composition.tsx存放具体的视频画面和动画逻辑。空白模板默认可能返回nullexport const MyComposition () { return null; };因为组件没有返回任何画面所以 Studio 会显示透明棋盘格。修改文件并保存后Studio 会自动刷新预览。src/index.css项目的全局样式文件可以设置字体、背景和通用 CSS 样式。五、创建新的 Composition创建新的 Composition 后Studio 左侧会多出一个可选择的视频项目项目中可以创建对应的组件文件例如src/NewComposition.tsx该组件需要在Root.tsx中导入并通过Composition注册。例如组件文件export const NewComposition () { return div我的新视频/div; };在Root.tsx中注册import {NewComposition} from ./NewComposition; Composition idNewComposition component{NewComposition} durationInFrames{150} fps{30} width{1920} height{1080} /[!warning] 常见错误导入名称、导出名称和component中使用的变量必须一致。否则component的值可能变成undefinedRemotion 会提示A value of undefined was passed to the component prop。六、Composition、组件和场景的关系可以这样理解TSX 组件 → 一个画面元素或场景 Composition → 一个可以独立渲染的视频 Sequence / Series → 编排多个场景的时间线 render 命令 → 导出指定 ID 的 Composition一个 Composition 可以引用一个组件这个组件内部又可以组合许多其他 TSX 组件。因此不需要把每个 TSX 文件都单独导出成视频。七、渲染和导出视频基本命令npx remotion renderComposition-ID输出路径例如npx remotion render MyComp out/my-video.mp4这条命令会找到idMyComp的 Composition渲染它的全部帧生成一个out/my-video.mp4文件。如果需要分别导出两个 Composition应执行两条命令npx remotion render MyComp out/my-comp.mp4 npx remotion render NewComposition out/new-composition.mp4每条render命令默认导出一个 Composition。若希望多个场景最终生成一个视频应使用Sequence或Series将场景编排进同一个 Composition再渲染这个总 Composition。八、本次实践总结完成了以下流程创建并启动 Remotion 项目认识 Remotion Studio 的主要界面理解组件、Composition 和Root.tsx的关系创建并注册新的 Composition排查组件导入、导出名称不一致的问题使用 Composition ID 渲染并导出 MP4 视频。下一步可以继续学习useCurrentFrame()获取当前帧useVideoConfig()获取 fps、尺寸和视频总帧数interpolate()制作透明度、移动和缩放动画spring()制作自然的弹性动画Sequence和Series组织多个视频场景。