我是如何高效录制出那么多高质量 gif 动图的呢?

240 阅读2分钟

大家好,我是小拍。我的文章有一个特点:录屏的动图多

比如我正在写的 gecode 教程:

Gecode::gist 使用 又比如我之前写的 VS Code :

VS Code 汇总

废话不多说,我用的是上古神器音视频处理神器 ffmpeg ,仅仅一条命令,足矣。

我做动图,一般是:录屏 + 转换gif这两个步骤,录屏软件多了去了:

  • 我以前用 Bandicam
  • 现在用开源推流神器 OBS
  • 以及简化版 QQ 即 Tim 自带的录屏功能

我最推荐 Tim 自带的录屏功能(在截图功能里),因为这玩意选择录制区域方便得很。

接下来就是转为 gif ,你自己下载 ffmpeg ,把二进制文件路径配到环境变量里,之后就可随时随地使用 ffmpeg 命令了。

咱的命令只有一个模型:

ffmpeg -t <截取的视频时常>
			-ss <视频起始时间>
			-i <视频名称>
			-s <输出大小>
			-r <输出帧率>
			<输出文件的名称>

举个栗子:

ffmpeg -t 15 -ss 00:1.50 -i .\vsc_e2.mp4 -s 640*360 -r 5 ctrl_p.gif

就是指:

  • 把 mp4 视频文件 vsc_e2.mp4 给老子转换成 gif ,名称为 ctrl_p.gif
  • 从视频的 00:1.50 第一秒半开始转,一共要 15 秒
  • 还得注意大小给我输出为 640*360 的,帧率别太高,=5就可以

一般来讲,我不怎么使用 -s-r 命令,但有时候:

  • 微信公众号限制图片的大小以及总帧率
  • 所以,我们要对尺寸和帧率进行优化

做了优化的 gif 看着也不会很生涩,比如你看上面那个 VS Code 的 gif 就是我优化后的。而关于 gecode 的动图,很丝滑,因为我没有使用 -s-r 命令。

独门秘笈,如果你也在做笔记、写博文、玩技术号,欢迎加我微信 PiperLHJ ,咱们一起学习、一起进步。我的公众号是 Piper蛋窝 ,记得关注喔!