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