使用22k star的开源库Remotion，轻松打造动画+视频编辑器！

发布时间：2025-05-12 13:22:24 浏览量：2

嗨，大家好，我是徐小夕。
8年+程序员，曾任职多家上市公司，4年架构经验，打造过上亿用户规模的如软件产品，目前全职创业，创业项目主要聚集于“Dooring AI零代码搭建平台”和“flowmixAI多模态办公软件”。

今天和大家分享一款非常有价值的开源项目——Remotion，我们可以使用它轻松实现动画视频创作，同时我也用它写了一款动画编辑器，方便大家更好的学习和参考。

Part 1

Remotion：重新定义视频和动画创作

Remotion 是一款基于 React 的视频编辑和渲染库，它将 React 组件与视频时间轴相结合，允许开发者使用 JavaScript 和 React 来创建视频。与 Premiere Pro、AE 等传统视频编辑软件不同，Remotion 通过编写代码来控制视频的每一个元素，从动画效果到转场特效，从动态文本到复杂场景，一切皆可通过代码实现。这种创作方式不仅大大提高了视频制作的效率，还为创意的实现提供了无限可能。

最近也是因为在做一个可视化搭建的项目，偶然间发现了这个开源库，在github上有22k star，所以心血来潮打算好好研究一下。

先和大家分享一下我用Remotion写的一个动画编辑器，以便让大家对这个开源项目有一个更好的认知：

Part 2

Remotion的技术实现

Remotion 的核心技术在于将 React 组件映射到视频时间轴上。在传统的视频制作中，我们需要在时间线上手动排列素材、设置关键帧；而在 Remotion 中，每一个 React 组件都可以看作是一个视频片段，通过设置durationInFrames（持续帧数）、animation（动画）等属性，就能轻松控制组件在视频中的展示时间与动态效果。

例如，通过以下简单的代码，就能创建一个在视频中逐渐出现并旋转的文本：

import React from'react';import { AbsoluteFill, Video } from'remotion';const MyVideo = => { return ( Hello, Remotion! );};export default MyVideo;

此外，Remotion 还利用 WebGL 加速渲染，确保即使是复杂的视频内容也能快速生成。它支持导出 MP4、WEBM 等常见视频格式，方便在各种平台上传播。

官方也有比较详细的使用文档，我们可以基于文档开发各种场景的视频和动画效果：

Part 3

为什么选择Remotion

可以直接的说，我在开源库里基本上找不到比 Remotion 还全面的底层视频动画编辑引擎了。它具有如下优势：

代码即创作：对于熟悉编程的开发者来说，Remotion 将视频创作变成了一场代码的狂欢。你可以利用 React 生态丰富的组件库，快速实现各种创意效果；还能通过版本控制（如 Git）管理视频项目，轻松回溯历史版本，多人协作也变得更加高效。动态数据驱动：Remotion 支持使用动态数据生成视频。例如，从 API 获取实时数据，生成个性化的视频内容；或者通过修改代码中的参数，一键生成多个版本的视频，大大提高了内容生产的效率。无限创意可能：通过 CSS 动画、Lottie 动效、3D 模型等技术，Remotion 能够实现传统视频软件难以完成的复杂特效。无论是科幻大片般的视觉冲击，还是清新简约的动画风格，只要你能想到，就能用代码实现。轻量化与跨平台：无需安装庞大的视频编辑软件，只要有 Node.js 环境，就能随时随地创作视频。而且，Remotion 生成的视频可以在 Web 端、移动端等多个平台流畅播放，适配性极强。

我在实现动画编辑器的过程中，随时踩了很多坑，但是从零实现动画编辑器的过程中，也通过 remotion 的文档了解了很多强大的API，可以实现对于WEB视频剪辑非常有用的功能，如下是我实现的时间轴面板的效果：