Mac制作Android演示Gif

前言

前段时间准备写Google官方动画教程的博客，里面涉及到制作android演示的gif文件，经过一些尝试，最终得到比较好的实现，现将这些经验写下来分享给大家，希望对大家有帮助。

---

相关软件

chrome插件Vysor地址
Gifrocket地址
注：ScreenFlow可以自己网上查找，Vysor是chrome插件，需要翻墙下载

---

整体流程

大致流程分为一下几步：

1. 利用chrome插件Vysor来在桌面显示android手机界面；
2. 利用ScreenFlow来录制、处理视频；
3. 利用Gifrocket将处理好的视频转换为gif文件;
4. 将制作好的gif文件传到云端；
5. 在markdown中使用云端的gif图片。

---

显示手机界面

chrome插件安装需要翻墙，所以你懂的～
Vysor安装起来十分简单，和普通chrome插件安装一样。

Vysor
Vysor打开后会自动检查是否有android手机连接电脑，如果有的话，在Vysor中可以选择这个手机进行显示。整个过程简单明了，在这不做说明。

ps：

1. Vyson这个软件的安装和使用简单明了，而且这个软件功能强大，不得不佩服人家对于整个软件的设计。
2. 在电脑上的显示桌面也支持触碰、滑动等相关事件。

---

录制裁剪视频

在这里使用ScreenFlow来录制裁剪视频。

ScreenFlow1

点击图片最下端的红色按钮可以裁剪视频时间区域，点击图片的裁剪按钮可以裁剪视频区域，下面的图就是裁剪之后的情况。

ScreenFlow2

ps：时间区域裁剪尽量精确，这样会减少视频时间，从而减少最后生成Gif图片的大小。

选择File下Export可以导出视频，选择以后出现下面界面：

ScreenFlow3
记得保持最底分辨率，这样产生的Gif图片会最小
ScreenFlow是一款很强大的录屏软件，如果想进一步学习，可参考：

1. ScreenFlow 桌面和程序录制（一）概貌
2. ScreenFlow 桌面和应用录制（二）效果
3. ScreenFlow 桌面和应用录制（三）技巧

---

生成Gif图片

软件界面如下所示，只需要将视频拖拽到中心区域就会自动生成gif图片。

Gifrocket

---

上传云端

选择一个图片存储的服务，我这里选择了七牛云服务，上传之后会生成一个链接，在markdown里面使用这个链接就可以了，整个过程也就完成了。
七牛云地址