前几天在B站看到科技网红up主**「程序员鱼皮」**分享了一则GitHub年终总结的视频，总结在开发者在 GitHub 这一年的代码贡献，提交记录，修正记录等，而且以动画流程的形式展现出来，画面清晰美观，看起来很高级。

看完之后才知道是通过一个前端视频框架 Remotion 生成的，所以今天小编刚好将其分享出来，学习借鉴下！

一键生成 GitHub 年度总结视频项目：https://githubunwrapped.com/

在github上经常提交代码的同学们，可以体验一番！

项目介绍

Remotion 是一款基于 react 创建视频的框架，可以让我们直接基于 react 创建视频，使用到的技术有 webgl，css，canvas，svg。

官方文档：https://www.remotion.dev/docs/

项目地址：https://github.com/remotion-dev/remotion/

它允许你使用 React 创建视频和动态图形。如果你是作为一名 Web 方向的开发人员，会发现它非常趣，因为它为我们自己创建视频和动画打开了一扇新的大门。

Remotion能够最大限度地利用Reacts的特性，如可重用的组件、强大的组合和快速重载。

Remotion还配备了一个被称为Remotion Player的播放器，它给你带来了真正的视频编辑器的感觉，它可以用浏览器来播放和审查你的视频。

为什么要使用 React 框架去创建视频？

  • 利用网络技术：使用所有 CSS、Canvas、SVG、WebGL 等。

  • 利用编程：使用变量、函数、API、数学和算法来创建新效果

  • 利用 React：可重用组件、强大组合、快速刷新、包生态系统

安装和创建Remotion

创建一个新的 Remotion 项目是非常简单的。但有两个依赖项需要先安装。

步骤1：安装NodeJS和FFMPEG

由于 NodeJS 是前端项目必装的。所以重点介绍安装FFMPEG。

首先，需要下载合适版本的FFMPEG：

然后将其解压到你选择的文件夹中，并设置为系统环境变量

setx /M PATH "path\to\ffmpeg\bin;%PATH%"
步骤2：启动新项目

安装完上述依赖后，初始化一个新的Remotion视频只需要一个命令，你可以使用yarn或npm来实现。

yarn create video#or npm init video

你已经成功地初始化了你的第一个Remotion项目，你可以使用npm run start来启动该项目。

如果想创建一个视频，还是需要具备一定的前端知识，然后再根据具体的Remotion基础知识，组件功能，及开发的API结合开发制作出一个视频来。

对于希望使用web 创建使用的场景这个是一个不错的选择（比如营销动画），很值得学习下。