善忘技术夹 Logo
善忘技术夹
善用佳软 开源

用React写视频?我试了一下Remotion

#善用佳软

为什么会关注这个工具 前段时间要做一些技术教程视频,本来想用Premiere或者Final Cut,但打开软件界面的时候我就犹豫了。时间轴、轨道、特效面板…光是熟悉这些操作就要花不少时间。 后来刷GitHub的时候看到了Remotion——一个可以用React代码来写视频的框架。这个想法挺有意思的:把视频每一帧都当成React组件来渲染,通过代码控制内容和动画。对于写惯了React的人来说,这个思路反而比拖拽时间轴更直观。 就试着用了一段时间,说说我的感受。 --- ## Remotion是什么 Remotion是一个开源的React框架,让你可以用React、CSS、TypeScript来创建视频。本质上就是把视频的每一帧都当成React组件来渲染,通过代码控制时间轴、动画、转场这些。 Remotion官网首页 ### 核心功能 - 用React写视频:你熟悉的React组件、CSS样式、TypeScript类型都能用 - 代码控制:动画、转场这些全部通过代码定义,不用在可视化界面里点来点去 - 帧级精度:代码控制每一帧,可以实现传统剪辑软件很难做的效果 - 组件复用:视频元素可以封装成组件,跨项目复用 - 实时预览:写代码的时候能实时看到效果 - 多格式输出:MP4、WebM、GIF都支持 - 参数化:改几个参数就能批量生成一堆相似的视频 - 云端渲染:可以在服务器渲染,适合自动化流程 --- ## 使用体验 ### 安装 安装倒是挺简单的: bash # 创建项目 npm init video remotion-video # 进入目录 cd remotion-video # 安装依赖 npm install # 启动开发服务器 npm start 跑起来之后会给你一个示例项目,基本的配置和示例组件都有了。 ### 项目结构 和普通React项目差不多: - remotion.config.ts:视频配置文件,定义分辨率、帧率这些参数 - src/Root.tsx:根组件 - src/Video.tsx:视频组件,具体内容在这里写 - src/Composition:合成层,一个Composition就是一个视频场景 核心概念是Composition,你可以把它理解成一个视频场景,里面定义了分辨率、帧率、时长这些。 ### 写个简单的视频 写起来跟React组件没啥区别: ```tsx import { AbsoluteFill, useCurrentFrame, useVideoConfig } from “remotion”; export const MyVideo = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); // 根据帧数计算动画进度 const opacity = Math.min(1, frame / 30); return (

Hello Remotion!

); }; ``` 用useCurrentFrame拿到当前帧数,就能基于帧数做动画了。如果你写过React Hook,这个应该很熟悉。 ### 实际感受 做得好的地方: React开发者几乎零成本上手。代码控制视频比时间轴拖拽要精确得多,特别是像素级别的对齐。代码可以用Git管理,团队协作比传视频文件舒服多了。改个动画效果就是改代码,不用撤销重做那一套。 批量生成是个亮点。前段时间要做一批产品介绍视频,内容一样只是参数不同,用Remotion写个配置循环就搞定了,这种事情在传统剪辑软件里要手动改几十次。 组件复用也挺实用。我现在有一些常用的片头片尾组件,新项目直接拿过来用。 不太方便的地方: 需要会写代码,这个门槛劝退了不少人。调试复杂动画有点麻烦,虽然有预览,但有时候得反复调整参数看效果。 渲染时间是个问题,高分辨率或者长视频要渲染挺久,特别是那些复杂动画。我一般让它后台跑着,自己去做别的。 生态还在发展中,插件和资源没有传统剪辑软件那么多。文档有些地方写得不够详细,某些高级功能得自己摸索。 --- ## 适合什么场景 这些场景用起来比较顺手: - 技术教程:代码演示配动画说明 - 数据可视化:把图表做成视频 - 批量生成:内容相似但参数不同的视频 - UI/UX演示:展示产品界面和交互 - 短视频:Instagram、Twitter这些平台的十几秒视频 - 营销视频:批量产品介绍、促销信息 ### 官方示例 官方示例库里有一些挺有意思的案例: 数据可视化动画可以集成D3.js、Chart.js这些库。文字动画效果用CSS transitions就能做。音频可视化也有现成的示例,音频视频同步这块处理得不错。 --- ## 和其他工具比怎么样 ### Remotion vs 传统剪辑软件 | 维度 | Remotion | PR/FCP | |------|----------|--------| | 操作方式 | 代码 | 可视化操作 | | 学习曲线 | 需要编程基础 | 需要学习专业操作 | | 精确控制 | 代码控制到帧 | 时间轴拖拽 | | 版本管理 | Git友好 | 难以版本控制 | | 批量生成 | 写个循环就行 | 手动操作 | | 团队协作 | 代码审查、合并 | 传文件、冲突麻烦 | | 上手速度 | 程序员快,非程序员慢 | 大家都要学 | | 适用人群 | 开发者 | 专业剪辑师 | | 成本 | 免费 | 通常要付费 | ### Remotion vs 其他代码视频工具 还有一些类似的工具: - Manim:Python写的数学动画库,主要是数学内容可视化 - FFmpeg:命令行工具,功能强但参数多 - MotionCanvas:TypeScript动画库,跟Remotion类似 Remotion的优势是React生态,前端开发者用起来比较顺手。IDE支持、开发体验这些做得不错,社区也挺活跃。 --- ## 总结 Remotion把写代码和做视频结合在了一起,给技术人提供了一种新的视频创作方式。 适合这些情况: - 你是React开发者,要做技术视频 - 团队需要批量生成大量相似视频 - 需要精确控制和高度定制 - 视频内容要集成到自动化流程里 不太适合: - 完全没有代码基础 - 需要大量手动调色的创意视频 - 赶时间且不想学新东西 学习建议: 1. 如果React还不熟,先补一下基础 2. 看看官方文档,理解Composition、Frame这些概念 3. 从官方示例开始,改改参数看效果 4. 做个简单视频熟悉流程 5. 学学高级动画和性能优化 6. 封装一些常用的组件 传统剪辑软件有自己的优势,但Remotion这种代码驱动的方式,对于开发者来说确实是个新思路。技术分享、产品演示、数据可视化这些场景,用代码写视频反而更高效。 --- ## 获取方式 > 官网:https://remotion.dev > GitHub仓库:https://github.com/remotion-dev/remotion > 推荐安装方式:npm init video 或 yarn create video > 许可证:Apache-2.0(开源免费)