趁着工作不忙,就闲着倒腾自己的事情,把自己写的一个完整Demo整理了一番,总结其中用到的技术和实现的功能,并想把一些用到的技术分享给各位工友们,因为我自学iOS开发得益于大家的分享。今天给各位朋友分享我的做得一个开花效果的按钮,刚刚把它打包分享到了GitHub了,欢迎有兴趣的朋友参考,地址:https://github.com/qlongming/DeleteCell。
不过我要写的这篇文章主要不是有关这个按钮的制作技术,而是我在打包到GitHub时,希望在README.md中加入演示动画——gif动态图片。我们多数iOS开发者都会经常因为一些曾经在windows下非常熟悉的东西,才Mac下却行不通,我今天就因为这个抑郁了,windows下itools可以轻而易举实现gif动画制作,但在Mac下却itool这个功能确是收费的,当我点击itools录屏时弹出付费按钮,我那复杂的心情工友们懂吗(可怜)。
还好,互联网世界让知识木有屏障,最好找到了一个解决办法,所以就总结出来分享给大家。
需要用到得工具:
1.Mac系统的PC一台
3.QuickTime Player自带软件
4.GifBrewery软件,下载地址:http://www.pc6.com/mac/114758.html
QuickTime Player录制视频的步骤
1.首先打开QuickTime.然后在菜单中选择File(文件)->(New Screen Record)新的屏幕录制。如图:

然后会弹出的窗口,如下图所示,我们可以点击录中间个那个可爱的小红点:

然后Mac会弹出一个提示,提示我们可以截取屏幕一定区域进行录屏或者全屏录屏:

单击表示全屏录制,拖动可以截取部分区域录制,如果选择错误您就按ESC退出再重新选择。
iOS工友们就可以选择我们的模拟区域进行截屏啦,非iOS开发的朋友就选择你感兴趣的部分截取录屏吧,作为iOS开发者我这里只能选择性的选择照顾我的工友们了(求原谅)。如图虚线区域就是我截取录屏的部分。

然后我们选择 Start Recording (开始录制)就可以录制我们的App操作过程了。
当我们操作App完成后就可以点击右上角这个按钮,结束录制

然后我们选择 Start Recording (开始录制)就可以录制我们的App操作过程了。
当我们操作App完成后就可以点击右上角这个按钮,结束录制
您可以播放看看,然后按command + S 保存我们的视频,记住你保存的目录哦。录屏工作到此结束。
开始利用CIFBrewery软件将视频转成gif图片
将我在前面提供的工具下载下来,解压,然后打开程序,会让我们选择视频文件
我们打开我们刚才录制好的视频即可,然后弹出编辑窗口
你可以编辑下你制作的视频,比如设置起始位置,或者设置结束位置,其他你自己研究,其他的我没动,只是设置了起始位置和结束位置,然后点击


然后就会弹出下图这个窗口:

看看你做得GIF效果,恭喜你,你得新技能已经Get了,你只需要点击Save(保存)按钮即可。如下图就是我制作的Gif.

右击它在safiri或者chrome或者其他工具上秀一秀你得新技能把。

终于把本教程弄完,多做一遍我也更清楚了思路。更希望对您制作Gif有帮助。
网友评论