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里面使用这个链接就可以了,整个过程也就完成了。
七牛云地址

推荐阅读更多精彩内容