UI切图-高清动图输出指南（干货整理，附带安装包）
2020了，动画和动态图形已经成为创意广告和营销的强大工具。如何输出体积小，质量高的动图呢？
2020了，动画和动态图形已经成为创意广告和营销的强大工具。他们不断推动各种类型的商业推广，并塑造了一种全新的方式来展示产品和服务。动画对全球设计和技术趋势非常敏感，今年也在快速发展中。
很多设计师在设计完动效图之后，难倒在了输出上。高清的动效图占内存，体积小的动图又不高清。
下面为大家整理了公司内部常用的几个出动效的方法，赶快去看看吧。
GIF篇
推荐指数：🌟🌟
第一种：ps导出gif
只会用ps的小朋友们可以用ps绘制帧动画，导出的时候记得调整颜色数量，否则导出的gif会很大。
如果是从序列图片转帧动画的，可以使用脚本来制作。
帧动画制作教程：
https://jingyan.baidu.com/article/fa4125ac7d3e5c68ac7092c2.html
必要的时候，需要通过减少帧数来缩小内存。
Ae渲染器导出来的GIF通常都会比较大，可以导出视频，再拖进ps里面重新导出，这样可以减少很多内存。
第二种：AE导出gif
AE本身的渲染器是无法导出gif的，大家可以下载adobe自家的Media Encoder渲染器，这个渲染器可以直接导出gif格式。
出gif的时候帧速率可以调低一些，太高占内存，加载太慢会降低用户的体验。
但是渲染器做出来的gif都是带背景的。我们要出透明背景的gif，可以借助外部软件。
首先导出png序列，记得要打开Alpha通道。
导出png序列后，可以拖进ps里面利用脚本制作帧动画，也可以用Isparta制作。
Isparta是个超级好用的软件，后面会上传安装包在附件。
下载连接：
如果是已经调整好了速度的，一定要让帧频和原来的一样。
可以点击设置按钮，调整每一个图片的时间，十分方便。
GIF压缩：
大家也可以下载ae插件——GifGun，这样就能在ae中直接生成了。
APNG、WEBP篇
推荐指数：🌟🌟🌟🌟
GIF导出总会出现毛边，质量不高清的情况，而且还会占内存，为此，我们经常输出APNG和WEBP 格式的图片给到技术。APNG给IOS开发，WEBP给到安卓。出这两个格式我们会用isparta制作。
首先用ae导出png序列图，然后直接拖进去，设置好帧频，点击开始就可以了。
如果导出的APNG图片太大，可以放进 https://tinypng.com/ 进行压缩。
APNG和WEBP格式的图片可以用浏览器打开，就能预览动效了。
JSON篇
推荐指数：🌟🌟🌟🌟
我们现在做的图，大多是矢量图，在这种情况下，大家就可以出JSON给到开发。Json是一种轻量级的数据交换格式。也就是说程序员小哥哥拿到的是代码，而不是图片了。JSON可以让几兆的gif图，只用几十kb就能展示出来，可以大大提高用户体验。JSON也可以做位图的变化，但是位图多了，体积就大了，这点要注意。（有位图的时候，需要将JSON和导出的image文件夹一起交付给开发）
设计师制作JSON的方式：在AE上绘制矢量动效，用Bodymovin插件导出成JSON。缺点是不能用AE上的一些炫酷特效，以及一些蒙板、描边样式无法识别。
导出的JSON预览网站：
https://loupthibault.github.io/bodymovin-player/
LOTTIE灵感网站，JSON可以直接下载。
https://lottiefiles.com/getting-started
SVGA篇
推荐指数：🌟🌟🌟
SVGAConverter 可以将 Flash 以及 After Effects 动画导出成 .SVGA 文件（实际上是 ZIP 包），供 SVGA Player 在各平台播放，SVGAPlayer 支持在 iOS / Android / Web / ReactNative / LayaBox 等平台、游戏引擎播放。
他比较好的是没有位图、特效的限制，都能给你渲染呈现出来，占的内存还小。但是在导出的时候，总会出些bug，丢帧或者图层不显示的情况，渐变也会出现一些毛边的情况。因此平时在出图的时候，我们都会综合考量，在各个格式里面挑选一个最优质的交付到开发。
综合下来，出什么格式要看具体的情况。在大部分情况会倾向于输出APNG和WEBP格式，矢量动效出JSON，如果是全屏动画，时间长、颜色多、尺寸大，Mp4会是不错的选择。
关于mp4压缩，推荐给大家一款体积小、质量好的视频压缩软件——HandBrake
这个软件能减少百分之80的内存，而且导出的质量也很优质。这个比在ae中压缩出来的mp4要高清，内存还小。
最后对格式整体做了一个对比总结，方便大家快速查询适合出的格式。
具体设计师也要配合程序员小哥哥，挑一个最省开发时间的格式。
还有什么其他的好的方法，欢迎评论区一起讨论哦。
