大家好，我是小六 今天给大家分享在可视化设计中，最常用的动效落地方案介绍，这一次是一个非常非常干的干货，手把手教你如何配合开发将小动效在页面中展示出来。希望可以带给大家更多帮助！
前言
最近在做项目中遇到一些问题，有些效果开发实现出来跟实际相差较大、被产品拿着设计稿戏称为买家秀、卖家秀的区别。还会有些情况是因为项目排期问题开发落地有一定成本，希望能快速落地。还有的开发直接说搞不了 等等。
借这次整理一下动效落地过程中遇到的坑，同事展开聊一下设计师对接前端做动效落地的一些最常用的方法，最后会把文中提到的插件软件整理打包分享给大家。
常见的开发对接方式
1、GIF
2、PNG序列
3、APNG
4、Lottie
5、SVGA
6、MP4
GIF
Gif是现有市面上应用最广泛的动效格式了，最早起始于1987年 由CompuServe 公司引入。
优点：兼容性好几乎所以浏览器都支持、文件能够快速输出。
缺点：颜色仅支持8位256颜色，支持半透明、颜色有限导出文件体积大而且有锯齿，效果差透明导出会有白边。
输出：GIF文件有多种输出方法这里给大家罗列比较常用的，大家按需使用。
1、通过ae导出png序列或者mov视频 拖入ps导出
2、Adobe Media Encoder（需要跟ae版本一致就可以软件联动直接导出gif）
3、AEscripts GifGun是一款可以直接在AE里一键创建输出GIF动画格式脚本
Gif压缩
1、https://docsmall.com/gif-compress
2、https://www.iloveimg.com/zh-cn/compress-image/compress-gif
3、https://ezgif.com/
4、https://gifcompressor.com/
PNG序列
是由png图片组成的序列帧。
优点：兼容性非常好、效果还原高、颜色丰富。
缺点：文件比较大，动效比较复杂的话输出png序列可能好几百张，会影响浏览器性能。
输出：可ae等动效软件直接输出。
APNG
APNG是一个基于PNG的位图动画格式它的动图后缀依然是.png。
优点：颜色丰富，支持1600万种颜色，支持渐变透明，无损压缩。
缺点：文件过大，兼容性差受浏览器、系统版本等限制。
在web端对于主流的浏览器Firefox、Safari、Chrome都能够兼容。
输出：1、通过iSparta软件导出。操作步骤是将png序列拽到iSparta软件中点击开始即可导出apng，此软件一共可以导出三种格式，APNG/GIF/WEBP
2、AE BX-WebpApngExporter插件
Lottie
Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，用 AE做完动画后，使用 Lottic 提供的 Bodymovin 插件将导出成 JSON 格式，就可以直接运用在Web上，无需其他额外操作。
优点：文件小、颜色丰富，开发可以控制大小、速度、循环次数等参数。
缺点：不支持渐变、粒子、阴影透视等效果，表达式也只支持一部分，部分位图文件输出的效果失真，需手动替换。
输出：使用: AE菜单栏窗口 - 扩展 — Bodymovin — 导出.json文件
设置选项里了选择输出一个HTML的本地文件，可打开进行预览
bodymovie插件下载地址：https://github.com/bigxixi/bodymovin_cn
bodymovin需要这个安装器才能安装 推荐zxp安装器下载地址https://zxpinstaller.com/
SVGA
SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。
优点：便捷SDK开发集成步骤轻松简单。支持大部分效果、体积小、动画还原效果好
缺点：有损压缩，兼容性不太好有的平台不支持，移动端用的居多
输出：ae选择 菜单 > 窗口 > 扩展 > SVGAConverter
MP4
MP4是一种常用的视频格式，也通常运用于直接对接开发。
优点：兼容性好，文件能够快速输出，文件小。
缺点：视频格式项目中过多的话影响性能，效果会有压缩。
输出：Adobe Media Encoder（需要跟ae版本一致就可以软件联动直接导出MP4），ae中菜单-合成-添加到Adobe Media Encoder队列，直接可以输出MP4文件。
最后
以上介绍的几种动效落地方案，是目前比较主流的方法， 基本可以满足产品中动效落地，而且能够大大节省开发的时间和产品的稳定性。
**文章摘自“小六可视化设计”（ID:six-design），作者：Mr.小六。
