如何让动态效果又快又好地落地？我分析了这五种格式的优缺点。

编辑导语：动态效果是页面的灵魂，也能让用户有更好的体验。作为设计师，怎样才能让动态效果更加简洁有趣？在这篇文章中，作者分享了五种动态效果方案的优缺点。感兴趣的朋友不妨看看。
动态设计可以增强界面的趣味性和引导性，让用户在浏览过程中不会过于枯燥，获得更好的体验。
最近金山知识(后更名为金山知识库)官网，头部地图元素加入了慢动作效果，乍一看还挺新颖的。
在与金山新年许愿活动的合作中，许愿按钮加入了运动的形象，可以吸引用户点击。
但是在输出动画和开发衔接的过程中，我也遇到了一些问题：导出的动画比较模糊，资源太大，开发不支持动画格式等等。当时，我尽力去解决它们。
这次总结了几种常用的动画格式，也提到了自己在导出动画的过程中遇到的问题和解决方法，以及我们的设计师应该如何选择合适的动画格式。
第一，序列帧刚开始接触动态效果。我第一次学的PNG序列帧是把运动画面的每一帧都输出，然后交付开发，一帧一帧的播放画面。
比如这个加载动画，我的实践作品，导出序列帧都有很大的资源，所以我平时基本不用这个格式。
导出方法：
如果要导出透明背景，AE将选择PNG序列作为输出，RGB Alpha作为通道。
第二，GIFGIF支持Android、iOS和网页，可以说是比较常用的格式之一。
这种格式可用于界面中的小元素，如操作按钮动画、图标动画等。而且资源不会太大。
像我之前负责的新年许愿活动，因为是从0到1的产品，开发还没有支持洛蒂，所以许愿按钮动画输出GIF到开发实现，压缩资源300KB。
虽然动图周围有锯齿边缘，但在手机上是看不见的。
导出方法：
1.AE导出MOV格式，然后用PS转换成GIF。(注：可能是因为动画时间太长，文件太大，导出经常失败，所以我很少用这个方法)
2.AE安装Gifgun插件，直接导出。
3.AE导出PNG序列，拖动所有图片到iSparta，检查GIF输出。(注意：如果导出GIF图片有问题，需要检查压缩质量，填入小于100的值即可解决)
如果GIF文件过大，可以使用无损压缩软件：PPDuck。
三。LottieLottie是一个适用于Android、iOS、Web和Windows的动画库，用于分析使用bodymovin导出为json文件的AE动画。
动画是通过代码实现的，代码是矢量。
动画库资源会增加安装包的大小，客户端会有驱动成本。
不过WPS Office在用，目前资源大小和稳定性都有。
不支持AE效果器直接添加的效果，如高斯模糊、内部照明和投影。
支持带图导入AE制作的动画效果，比如金山知识库中官网的页眉图像，由洛蒂实现，资源小，动画清晰。
支持颜色渐变，但是导出json容易出问题。比如之前设计的会员卡的动态效果，渐变颜色导出后就变成了黑白渐变。
这时候你只需要把所有渐变图层的名称依次改成渐变填充1，渐变填充2，…就可以解决了。
导出方法：
安装bodymovin插件，直接导出。(注意：要选择保存路径，可以单击导出按钮。点击设置图标，选择标准和演示导出json文件和演示预览效果)
四。ApngAPNG是基于PNG格式的位图动画格式图片。文件后缀仍然是。PNG，这样就可以在浏览器中预览动画了。
金山的合作表情包也是用这种格式。
与GIF相比，它的优点是动图边缘平滑，没有锯齿或颗粒感。
导出方法：
导出aepng序列，拖动所有图片到iSparta，并检查APNG的输出。
动词（verb的缩写）SVGASVGA是由YY团队开发的跨平台开源动画格式。也兼容iOS/Android/Flutter/Web平台的动画格式。常用来直播礼物现场，适合酷炫的礼物动画。
因为礼物效果比较复杂，通常用png序列制作动画，一帧一帧，输出SVGA文件。
它只会生成一个svga后缀文件，代码和位图元素集成在一起，但是Lottie会生成两个文件：json代码文件img文件夹。
支持AE自己的基础动画：位移、缩放、不透明等。但不支持图层渐变(洛蒂支持渐变)和AE自带及外部插件效果控制效果。所以UI动态效果洛蒂是通用的，不容易出错。
不及物动词总结了这么多动态落地方案，在实际工作中应该如何选择使用？
1.资源规模比较
2.质量比较
3.使用场景对比Lottie:基本适用于所有UI动画，如图标动画、加载动画、插画动画、操作按钮动画等。优先使用GIF:可以使用移动小元素动画，如赞动画(不建议使用大透明背景动画，锯齿严重)APNG:表情、小元素动画(比GIF好)SVGA:直播礼物酷炫动画序列。
作者：ALEI；微信官方账号：ALEI的设计思维
原文链接：https://www.uisdc.com/motion-design
本文由@ ALEI授权发布。每个人都是产品经理。未经许可，禁止复制。
来自Unsplash的图像，基于CC0协议。