在InVision，GIF动画绝对不仅仅是玩玩而已，因为它们在invision的营销和教育方面也发挥了很大的作用。甚至会选择GIF作为自己的主页，而且不会使用复杂的花哨的代码。
所以，最后总是有人问，GIF动画是如何制作的？
设计GIF动画
1.基本要求
这是我自己的一点小秘密，所有的GIF都是录制的视频，使用的工具是：screenflow（译者推荐一个GIF录制工具：LICEcap，非常实用），这也是我制作产品时用到的软件，它们是非常容易学习的，而且还有一些非常棒的动画工具可以使用。
当我制作好一个视频文件之后，就会通过导入到Photoshop 文件>导入>视频帧作为图层。
注意：不管是使用screenflow或者是AE制作，记住最后一定要导出成一个视频。
2.颜色越少＝更多的乐趣
如果是想制作一些比较复杂的GIF，那么就要确定好自己的用色，它不仅会影响到文件的大小，还可以使得GIF的动画可持续的时间更加长些，更复杂的GIF就尽量使文件小些（通常对我而言1M左右正好。）
3.如果可能，请使用运动模糊
像scrennflow和AE都可以使用运动模糊的功能，并导出视频，这样不仅可以显得更加专业，还可以在ps中出现丢帧现象时帮助做一些修改。
4.集中重点部分
想象一下，我如果在GIF中添加很多的其他东西，例如提示和用户名，光标点击加号按钮，将鼠标悬停到脸上，更多的提示和悬停状态。用户通常并不需要看到这么多，所以只要显示自己所需的以及文件的大小控制。
导出GIF动画
做好了下面几步，就只要直接导出GIF动画就好了。如果文件大小合适，那就很棒，如果太大那就要用到下面的方法了。
5.删除重复帧
如果我们仔细观察就会发现动画中有些地方是会有暂停和停留的地方，这里就包括一些重复的帧，只有0.03秒的持续时间，如果说有10个帧是重复的，那么我们可以删除其中的9个，并将这一个重要的关键帧设计的时间设置更长一些，例如1秒。
如果之后确定没有问题了，就可以尝试着导入视频，并将其限制为每两帧，这样就会减小文件的大小了。
注意：这个不是硬性规定，如果说你做的GIF有超过150帧，那就很难保证文件下降了。
6.减少颜色的使用
当在GIF中保存photoshop时，就会在右边看到一个“颜色”的下拉框，对于这里，尽量保证低，但又不至于使得GIF打开变成一个个没法使用的色块。
7、对部分损失做好调整
谈到这点其实我也不太清楚，但是我也能感知到，如果我们在1到10之间设置这个值就会感受到，减少文件大小又对质量没有太多的损害。
如果说上面提到的都尝试了，还是没有办法使得文件变小，那么就应该考虑自己是不是做的太多了，也许有另一种方法来完成这个呢，或者是一个GIF分成两个GIF。最后如果我们专注于GIF，那么就会把它成更加有创意的产品。
来源于：InVision
https://medium.com/@InVisionApp/7-tips-for-designing-awesome-animated-gifs-d51af4bae8b7#.9omr3wxzh
