编写《Canvas事件处理及示例代码分析》时发现,鼠标移动时显示坐标以及循环小球示例的演示图做成动图形式最能展示程序效果,但由于不知道怎么在Ubuntu中创建动图,只能以静态图形方式展示。本文记录如何在Ubuntu中创建GIF格式的动图,这样以后写博客时即可插入动图。
根据参考文献,在Ubuntu中创建GIF文件可以有多种方式,一种是先录制视频,然后截取视频中的一部分内容产生GIF动图,另一种方式是将一组连续的图片文件组合为GIF文件。本文中这两种方式都会进行验证。
根据视频产生GIF动图
首先要做的是安装录屏软件,根据参考文献2中的介绍,使用下列命令安装Kazam录屏软件(详细使用说明见参考文献3)。
sudo apt-get install kazam
Kazam的主界面如下所示,屏幕录像有全屏、窗口、指定区域等多种方式,这里选择区域,点击区域后选择浏览器中循环移动小球的Canvas区域。
在文件->首选项中可以设置屏幕录像的格式、帧率等,如下图所示。
完成设置后点击捕获按钮开始录屏。录屏结束后点击桌面右上角的摄像机图标,然后选择完成录制。接着点击继续按钮保存录制的视频文件。
接着安装从视频产品GIF文件的ffmpeg和ImageMagick软件,安装命令如下所示:
sudo apt-get install ffmpeg
sudo apt-get install imagemagick
安装完成后,在视频所在文件夹中调用终端,然后使用如下命令创建从头开始、时长10秒的GIF文件(关于命令的详细介绍请看参考文献4)。命令的大致意思是:-t设置时长,-ss设置开始时间,-i指定源视频文件,最后是输出的gif文件名称。
ffmpeg -t 10 -ss 00:00:00 -i 循环移动小球.mp4 loopball.gif
创建GIF文件效果如下:
将一组连续的图片文件组合为GIF文件
使用convert命令可以将一组连续的图片文件组合为GIF文件。方法是将这些图片放在单独的文件夹内容,然后在终端中输入“convert -delay 120 -loop 0 *.jpg XXX.gif”生成GIF文件。
由于创建连续的图片文件比较麻烦,本文进行了简化,先是用kazam对Canvas中获取鼠标位置的示例进行录屏,然后使用下列命令从视频中抽取图片(命令的详细说明请见参考文献5)。
ffmpeg -i 获取鼠标位置.mp4 -r 5 -q:v 2 -f image2 %03d.jpg
将抽取的图片放在单独的文件夹中,然后调用以下名称生成GIF文件。由于只有30几张图片,所以设置的帧数比较低,如果是按照参考文献6中设置120帧的话就会看不出效果(图片太少了)。
convert -delay 10 -loop 0 *.jpg getmouseposition.gif
创建GIF文件效果如下:
参考文献:
[1]https://www.linuxprobe.com/ubuntu-16-04-gif.html
[2]https://www.cnblogs.com/cherishry/p/5710612.html
[3]https://www.jianshu.com/p/e1f6177dba3a
[4]https://blog.csdn.net/xr469786706/article/details/79245635
[5]https://blog.csdn.net/kenwengqie2235/article/details/81483533
[6]https://www.cnblogs.com/linuxprobe/p/5407296.html