点击上方“蓝色字体”关注我，选择“设为星标”！
回复“电子书”领取超多经典计算机书籍
前几天在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 创建使用的场景这个是一个不错的选择（比如营销动画），很值得学习下。
写到最后
感谢您的一路陪伴，用代码构建世界，一起探索充满未知且奇妙的魔幻旅程。如果您对Python编程技巧、好玩实用的开源项目、行业新知趣事和各类技术干货等充满兴趣，那么不要错过未来我为大家奉上的精彩内容！点击 关注 ， 让您的探索学习之旅更加丰富多彩，我们一同成长，一同前行！ 🚀💻📚
求一键三连 ： 点赞、转发、在看
↓推荐关注↓
公众号内回复关键字“ 电子书 ”领取PDF格式的电子书籍( Python入门、异步编程、网络爬虫、高性能编程、数据分析与挖掘实战、Spring、Linux、CSS、VUE、自动化测试、程序员面试宝典 等)。
● 四款国内外远程桌面软件横测：ToDesk、向日葵、TeamViewer、AnyDesk
● 新一代开源语音库CoQui TTS冲到了GitHub 20.5k Star
● 「多线程大杀器」Python并发编程利器：ThreadPoolExecutor，让你一次性轻松开启多个线程，秒杀大量任务！
如果本文对您有帮助，也请帮忙点个 赞👍 + 在看 哈！❤️
在看你就赞赞我！