前几天在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 创建使用的场景这个是一个不错的选择（比如营销动画），很值得学习下。
