• 为什么会关注这个工具
• Remotion是什么
• 核心功能
• 使用体验
• 安装
• 项目结构
• 写个简单的视频
• 实际感受
• 适合什么场景
• 官方示例
• 和其他工具比怎么样
• Remotion vs 传统剪辑软件
• Remotion vs 其他代码视频工具
• 总结
• 获取方式

为什么会关注这个工具

前段时间要做一些技术教程视频,本来想用Premiere或者Final Cut,但打开软件界面的时候我就犹豫了。时间轴、轨道、特效面板…光是熟悉这些操作就要花不少时间。

后来刷GitHub的时候看到了Remotion——一个可以用React代码来写视频的框架。这个想法挺有意思的:把视频每一帧都当成React组件来渲染,通过代码控制内容和动画。对于写惯了React的人来说,这个思路反而比拖拽时间轴更直观。

就试着用了一段时间,说说我的感受。

Remotion是什么

Remotion是一个开源的React框架,让你可以用React、CSS、TypeScript来创建视频。本质上就是把视频的每一帧都当成React组件来渲染,通过代码控制时间轴、动画、转场这些。

核心功能

• 用React写视频:你熟悉的React组件、CSS样式、TypeScript类型都能用
• 代码控制:动画、转场这些全部通过代码定义,不用在可视化界面里点来点去
• 帧级精度:代码控制每一帧,可以实现传统剪辑软件很难做的效果
• 组件复用:视频元素可以封装成组件,跨项目复用
• 实时预览:写代码的时候能实时看到效果
• 多格式输出:MP4、WebM、GIF都支持
• 参数化:改几个参数就能批量生成一堆相似的视频
• 云端渲染:可以在服务器渲染,适合自动化流程

使用体验

安装

安装倒是挺简单的:

# 创建项目
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组件没啥区别:

import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // 根据帧数计算动画进度
  const opacity = Math.min(1, frame / 30);

  return (
    <AbsoluteFill style={{ backgroundColor: "white" }}>
      <div style={{
        fontSize: "80px",
        fontWeight: "bold",
        opacity,
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100%"
      }}>
        Hello Remotion!
      </div>
    </AbsoluteFill>
  );
};

用useCurrentFrame拿到当前帧数,就能基于帧数做动画了。如果你写过React Hook,这个应该很熟悉。

实际感受

做得好的地方:

React开发者几乎零成本上手。代码控制视频比时间轴拖拽要精确得多,特别是像素级别的对齐。代码可以用Git管理,团队协作比传视频文件舒服多了。改个动画效果就是改代码,不用撤销重做那一套。

批量生成是个亮点。前段时间要做一批产品介绍视频,内容一样只是参数不同,用Remotion写个配置循环就搞定了,这种事情在传统剪辑软件里要手动改几十次。

组件复用也挺实用。我现在有一些常用的片头片尾组件,新项目直接拿过来用。

不太方便的地方:

需要会写代码,这个门槛劝退了不少人。调试复杂动画有点麻烦,虽然有预览,但有时候得反复调整参数看效果。

渲染时间是个问题,高分辨率或者长视频要渲染挺久,特别是那些复杂动画。我一般让它后台跑着,自己去做别的。

生态还在发展中,插件和资源没有传统剪辑软件那么多。文档有些地方写得不够详细,某些高级功能得自己摸索。

适合什么场景

这些场景用起来比较顺手:

• 技术教程:代码演示配动画说明
• 数据可视化:把图表做成视频
• 批量生成:内容相似但参数不同的视频
• UI/UX演示:展示产品界面和交互
• 短视频:Instagram、Twitter这些平台的十几秒视频
• 营销视频:批量产品介绍、促销信息

官方示例

官方示例库里有一些挺有意思的案例:

数据可视化动画可以集成D3.js、Chart.js这些库。文字动画效果用CSS transitions就能做。音频可视化也有现成的示例,音频视频同步这块处理得不错。

和其他工具比怎么样

Remotion vs 传统剪辑软件

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(开源免费)