AVW-6：代码生成视频——Remotion、Motion Canvas、Revideo、Editly、Theatre.js、Rive 与更多

2026年6月7日 00:50 CST RemotionMotionCanvasRevideoEditlyTheatre.jsRiveJitterMotionityLottieFiles视频生成动画

AI 动态视觉 Web 专题 全景地图 | 动画引擎 | 数据可视化 | 交互叙事 | AI 生成 UI | AVW-6 视频与动效 ← 本文 | 程序化三剑客 | 中国生态 | 视觉指南

# 视频与动效工具 ## 代码→视频 - Remotion (React写视频) - Motion Canvas (数学动画) - Revideo (AI辅助) - Editly (JSON声明式) ## 协作编辑器 - Theatre.js (开发+设计) - Jitter (Figma级体验) - Motionity (开源AE) ## 动效播放 - Rive (状态机交互) - LottieFiles (JSON矢量)

核心问题：能不能在浏览器里直接生成视频？答：能。Remotion 已经做到了。但"能不能"和"顺不顺手"是两回事。

九款工具代表了四种思路：

思路	工具	类比
代码 → 视频	Remotion、Motion Canvas、Editly	视频界的 React
AI 辅助生成	Revideo	AI + 代码驱动
可视化编辑 → 视频	Jitter、Motionity	视频界的 Figma
设计师 → JSON → 播放	LottieFiles、Rive	动效界的 JSON

1. 代码 → 视频

Remotion — React 写视频

官网: remotion.dev
GitHub: remotion-dev/remotion · 20k+ stars
许可: 核心免费，企业功能付费
输出: MP4 / GIF / WebM / 帧序列
代表用户: GitHub、Shopify、Stripe

const MyVideo = () => {
  const frame = useCurrentFrame()
  const opacity = interpolate(frame, [0, 30], [0, 1])
  return <div style={{ opacity }}>第 {frame} 帧</div>
}

帧 = 纯函数(frame)。每一帧由 frame 参数决定——没有状态，没有副作用。真正的声明式视频。

Remotion + AI:

AI 批量生成视频: LLM 输出视频 JSON 配置 → Remotion 渲染
数据驱动视频: 输入时间序列数据 → 自动生成动画图表视频
个性化视频: 同一模板 + 不同用户数据 = 个性化 MP4

Motion Canvas — 数学动画引擎

官网: motioncanvas.io
GitHub: motion-canvas/motion-canvas · 16k+ stars
许可: MIT
定位: 3Blue1Brown 风格的数学/算法可视化视频

vs Remotion:

维度	Remotion	Motion Canvas
渲染	React 组件 → 逐帧渲染	Generator 函数 → Canvas
实时编辑	需重新渲染	内置实时预览编辑器
适合场景	UI 动画、产品演示	数学/算法/物理仿真
AI 友好度	JSX 结构，LLM 可生成	Generator 函数，LLM 也可生成

Editly — JSON 声明式视频合成

GitHub: mifi/editly · 4.5k+ stars
许可: MIT
核心价值: 纯声明式的视频合成——一个 JSON 配置描述整个视频

{
  "clips": [
    { "duration": 3, "layers": [
      { "type": "title", "text": "AI 生成的视频" },
      { "type": "image", "path": "./chart.png" }
    ]}
  ]
}

AI 友好度最高——LLM 直接输出 JSON，Editly 渲染。不需要写 React/Canvas 代码。

Revideo — AI 辅助的视频生成

官网: re.video
GitHub: midrender/revideo
核心创新: 基于 Motion Canvas 渲染核心 + AI 辅助编辑——自然语言描述动画 → 自动生成代码

2. 协作 & 编辑器型

Theatre.js — 开发者+设计师协作

官网: theatrejs.com
GitHub: theatre-js/theatre · 12k+ stars
许可: Apache 2.0
核心价值: 开发者用 API 创建可动画对象 → 设计师在 Theatre Studio（浏览器内编辑器）中调整关键帧
Three.js 集成: 支持 3D 动画

Jitter — 在线动效设计

官网: jitter.video
定位: 浏览器内的动效设计工具
体验: Figma 级别的易用性 + After Effects 级别的动画能力
投资: YC

Motionity — 开源 After Effects 替代

官网: motionity.app
GitHub: alyssaxuu/motionity · 3k+ stars
许可: MIT
技术: 纯 Web（HTML/CSS/JS/Canvas），浏览器原生
AI 潜力: 因为纯 Web 技术栈，AI 可以直接操作其内部数据结构 → "AI 直接生成动效"的最短路径

3. 动效播放型

Rive — 状态机驱动的实时交互

官网: rive.app
GitHub: rive-app/rive-wasm
代表用户: Duolingo、Figma、Stripe
核心差异化: 状态机驱动的复杂交互（idle→hover→click→active），每个状态有独立的动画过渡

Rive vs Lottie:

维度	Lottie	Rive
编辑器	AE → Bodymovin	Rive Editor（自有）
交互性	播放/暂停/循环	状态机驱动
运行时	JSON 解析	WASM 渲染
AI 友好度	JSON 结构，LLM 可生成	专有格式，不友好

LottieFiles — 全球最大动效平台

官网: lottiefiles.com
GitHub: airbnb/lottie-web · 30k+ stars
工作流: AE 做动画 → Bodymovin 导出 Lottie JSON → lottie-web/iOS/Android 渲染
跨平台: Web / iOS / Android / React Native / Flutter

4. 综合对比

维度	Remotion	Motion Canvas	Editly	Theatre.js	Rive	Lottie
核心能力	代码→视频	数学动画	JSON→视频	协同编辑	交互动效	矢量动效
上手难度	高（需React）	高（需TS）	低	中	中	低-中
AI 集成	★★★★★	★★★★	★★★★★	★★★	★★	★★★★
输出质量	高	高	中高	高	高	高

5. 场景决策

你的需求	首选	备选
React 技术栈，UI 动画视频	Remotion	Theatre.js
数学/算法可视化	Motion Canvas	Remotion
Agent 驱动视频演示	web-video-presentation	Remotion + Agent Skill
JSON 配置驱动，最简单	Editly	Revideo
AI 辅助生成视频	Revideo	Editly
设计师+开发者协作	Theatre.js	Jitter
游戏/交互动效	Rive	LottieFiles
跨平台矢量动效	LottieFiles	Rive

6. AI Agent 技能：让 Agent 帮你做视频

上述工具都需要人手动编写代码或操作编辑器。2026 年出现了一种新模式：Agent Skill 驱动的视频生成。

web-video-presentation（来自 ConardLi/garden-skills）是一个专为 AI 编码 Agent 设计的 Skill：

输入: 一篇文章或口播稿
输出: 可录屏的 16:9 网页演示（Vite + React + TypeScript）
工作流: 识别输入 → 口播稿 → outline → 构建演示 → 可选 TTS 音频合成 → 录屏
23 套主题: 电影感暗色、编辑纸张、工程蓝图、赛博朋克等
兼容: Claude Code、Cursor、Codex、Gemini CLI 等

与 Remotion / Motion Canvas 的区别：web-video-presentation 不直接渲染视频，而是生成一个网页演示，用户通过录屏工具录制。它的核心价值在于 Agent 协作流程——硬 checkpoint 确保 Agent 在稿子、主题、outline、音频合成前都与用户确认，避免"AI 闷头干完全程"。

更详细的 AI Skills 生态调研见 AVW-10：AI Skills 调研。下一篇：AVW-7 程序化生成三剑客——视频、PPT、网站的全方位补充