最近在不忙，捣鼓了下动效的实现，发现利用Sketch+Keynote制作简单的动效非常方便，当然Origami功能上Keynote强很多，但是个人认为学习成本也相对较高（一大堆的Patch好难记。。= =！！）。好了，话不多说，先上图：

这张GIF是看了一篇讲如何生成和优化GIF的文章之后决定自己试试的，因为是实验，所以有几个细节我去掉了。

先用Sktech制作素材，很简单的几个头像和加号：

然后将素材分别导出，在keynote中布局：

然后根据设置相应的动作：

1、按钮点击效果用的"跳动"；2、左下角“+”旋转移动；3、背景渲染成蓝色；（这一点keynote自带的动画中没有相对应的，我加了个蓝色色块使用了“放大”的功能）；4、头像对应“渐隐渐现”+“移动”；5、调整相应动作的顺序和延迟时间。

设置好了预览如果觉得效果还ok，将其导出mov格式的视频。并在PS中导入该视频帧（文件 - 导入 - 视频帧到图层），在下方时间轴的菜单中选择“从图层建立帧”。此时，浏览每一帧的效果，将认为不需要的帧挑出删除进行优化。

最后“文件 - 存储为web所用格式”，大功告成！