我们大都会认同一个简单的事实：动图不断循环播放的帧序列温暖了我们的心窝。
GIF 动画诞生于互联网的蛮荒时期，历经多个时代的考验和洗礼，如今仍然在互联网上茁壮成长。如今，GIF 的作用远远不止于渲染一幅热舞婴儿的动图，或者在网页上显示临时的“建设中”之类的动画。GIF 已经演化成了一种艺术形式，一种在网络上传神地表达情绪的方式，以及本文将要介绍的这种向他人展示软件功能的强大工具。
在 GitHub 上，我们可以创建很多 GIF 来演示我们的工作成果。有很多工具、技巧和技术可以帮助我们生成展示项目的高质量动画。这些动画为文档增色不少，可以提升文档的可读性、强调重要的新功能，乃至在文字难以描述时演示软件的使用方式。下面列举了 GitHub 上流行的 GIF 制作工具和流程，它们被广泛应用于博客和社交媒体的动图制作上。
制作高品质的动图需要花费大量的时间和精力。在开始投身其中并录制屏幕内容之前，先仔细评估一下自己的需求，这样可以避开许多大坑。有一些可视化辅助工具可以用来演示你的软件，包括带有注释的静态图像、图表、视频，当然还包括 GIF 动图。它们都有各自的优势和缺陷。就像软件开发行业中其它的决策一样，关键是要选择合适的工具。
如果最佳方案就是 GIF 动图，那么就可以开始规划方案了。第一步，最好考虑一下你想让人们在哪里看到这些动图。不同的社交媒体平台有着不同的限制条件，制作动图时可以利用这些限制条件，或者至少要意识到它们的存在。例如，GitHub 博客上的 GIF 通常相比 Twitter 上的动图有着不同的分辨率和压缩设置。这些差异会影响内容的呈现和动画的流畅度，所以最好从一开始就考虑周全。
在规划动画的时候，要将它想象成是在为你的软件讲故事。软件演示和屏幕录制技术已经非常成熟，所以人们通常只会考虑全屏和单镜头动画。然而，想要让故事更加生动，就要尝试将动画分为不同的镜头，并为每个镜头单独做好规划。何时要让观众看到全屏？哪些动作应该近距离观看？为了让你的 GIF 更像是电影短片，最好不要把所有的内容都塞到一个长镜头里，这样可以让动画显得井然有序。多次录制相同的素材对后期编辑是很有用的，这样有助于提高模块化和重用性。
有很多优秀的工具可以用来录制屏幕片段。我们既会使用商业软件也会用到开源应用，包括：
QuickTime Player：https://support.apple.com/kb/ph5882?locale=en_US
ScreenFlow：https://www.telestream.net/screenflow/overview.htm
Kap：https://github.com/wulkano/kap
LICEcap：https://github.com/justinfrankel/licecap
它们都在某个领域有自己的优势，具体来说取决于你需要的动画类型。然而，要演示你的项目的亮点，只是简单录下屏幕内容是不够的，你还需要展现出丰富、动人的用户体验。
录制前花点时间美化你的 UI，这样可以为动画引入更加真实生动的背景。在电影工业，这叫做场面调度，与场景道具等内容相关。对于 GIF 动图来说，场面调度可以是为应用准备更适合展示的内容，即使是随机的真实内容也比“示例文字”或“演示样例”这样的名字要好得多。
在 GIF 中，我们通常会使用动态内容，并对其加以调整，以便突出重点、简化色调或移除隐私信息。这类 DOM 调整可以用浏览器内置的的开发者工具来处理。对渲染好的网页进行手动调整很费时间，不过我们可以使用：
Greasemonkey：https://github.com/greasemonkey/greasemonkey/
或
Tampermonkey：https://github.com/Tampermonkey/tampermonkey
这样的浏览器工具将 DOM 调整编写成脚本，在需要重复录制时就可以免去很多麻烦。
镜头滚动时，仔细留意你的动作。计划好每一个点击，直接移动光标到目标位置。提前想好按键内容能简化后期编辑过程。
屏幕录制软件都自带后期剪辑工具。对剪辑任务来说，你最熟悉的软件就是最好的工具。理想的动画通常时长 7-10 秒，专注于一个主题。所以剪辑的过程也是仔细调整素材的好机会。在迭代式的剪辑过程中，第一轮先汇总所有的镜头，接下来的几轮分别进行错误清理、速度调整以及移除无关内容。最后一轮添加用来吸引观众注意力的动作，并调整转场效果，让 GIF 动图更加流畅自然。
你所使用的编辑软件可能会有选项直接将动画导出为 GIF 格式。有时你只需要做这一步就够了。导出通常是在图像质量和文件大小之间做出仔细权衡的过程，然而这一步并不一定会得到你想要的结果，也不见得一定与你想要分享动画平台相匹配。有很多用于 GIF 创作的专门工具，比如开源的：
Gifsicle：https://github.com/kohler/gifsicle
Giffy：https://github.com/jclem/gifify
商业应用 GIF Brewery：https://gfycat.com/gifbrewery
GitHub 博客和社交媒体上的很多 GIF 都是通过 24fps 视频转换过来的。这个帧速率再加上一些动态模糊效果可以让动画显得更有电影范儿。这些视频被导入 Adobe Photoshop，然后逐帧调整。
网上有很多教程（https://helpx.adobe.com/photoshop/how-to/make-animated-gif.html）介绍了这个流程。在 Photoshop 中，可以在输出设置界面比较不同设置下的文件大小和图像质量，这样你就能知道是否有空间多做一层抖动，或者更小的色彩空间能够节省多少空间。
需要压缩动画文件尺寸时，以下是一些可行的办法（不分先后）：
降低分辨率
缩短时长
简化颜色
导出时减少抖动数量
移除动画中的多余动作
高质量的动画的确能帮助人们了解你的项目，因为动画能让大家了解你的软件操作起来是什么样子。正如你很在乎 GIF 创建工具的花费或复杂度一样，人们也很关心你通过动画向他们传达的软件操作体验。你可能已经在电脑上搭建了一个强大的 GIF 创造环境，但如果你漏掉了一些内容，或者需要某个特定的功能，可以看看本文提到的 GIF 项目相关的链接或者浏览 GitHub 的 screen-recorder（https://github.com/topics/screen-recorder）主题。
不管你是在教别人使用 GIFfy 还是在做一个新的 GIF 动图，都有很多出色的工具可以帮助你讲好故事。
https://blog.github.com/2018-06-29-GIF-that-keeps-on-GIFing/
