行业与现状
动画可以辅助视觉制作焦点，引导注意的方向，为广大视觉设计师青睐。从设计工具上来看，既有Frame.js、Origami，也有交互原型类Principle、Flinto，还有Figma自带动画演示功能的工具，但是对于一些视觉特效、非逻辑表达类动画，设计师通常会借助AE完成。
从AE制作到落地开发，没有一种完备且成熟的跨平台解决方案。从AE到X的落地经验，对比不同方案的差异和优劣，辨析还原度和性能表现。
图片格式动画，跨平台解决方案，从Facebook2019上半年的All White改版来看，传统意义上视觉范畴的色彩、图形、质感被最大程度简化和提炼，设计师解决的问题不再是如何将页面绘制更加漂亮，而着眼于信息本身，思考的是如何通过我们专业性帮助产品更好的传达内容。
视觉设计从来不只是解决美丑，它是关于秩序的设计，解决如何提炼重点、革除冗余、合理的引导用户的注意力方面的问题。从物理到扁平到All White，透过现象看本质，视觉在产品设计中的装饰感被逐渐减弱，转向以内容为中心。
图片格式动画
PNG序列帧动画是一种比较原始的动画类型，通过连续切换一组分解动画序列形成动画。后来为提高性能，发展出雪碧图(精灵图)，将所有帧动画合并到一张大图上，通过位移实现动画帧切换。
PNG虽然实现方式比较原始，但却是最为稳妥的解决方案，除了图片体积太大，没有别的缺点。
APNG是从PNG基础上拓展出来的，是一个支持24位色彩通道和8位透明通道的动画格式，对透明通道的支持非常优秀。
IE浏览器不支持APNG,原生可以，一般项目中用的很少，APNG需要提升兼容性。
GIF是除PNG之外另外一种比较传统的动画格式，仅支持8bit彩色，不支持半透明通道，出现年代久远，压缩技术比较差，动画边界有明显的杂边，一般对动画精度要求不高的地方。
从文件体积上，GIF比PNG序列小了76%，但是，GIF的边界粗糙有锯齿，且无法消除。
对于比较简单的动画，如果只有2个选择，在没有透明通道的情况下，选择GIF好于PNG，但是从开发者角度，一些复杂的GIF有时会引起周期的重绘，占用较多的系统内存，有一定风险。
Webp是Google开发的一款改善GIF的新动图格式，支持24bit彩色，能呈现透明通道，兼容性好，在项目中用的比较多。
文件体积上，WebP似乎没有明显优势，呈现效果上，WebP支持真正的a lpha通道(8bit)，而GIF只有1bit，所以WebP的细节一定更好。兼容性上，WebP虽不如GIF，但支持良好，不影响使用。
WebP是一种更完美的GIF，如果对文件体积不敏感，且没有更好的动画解决方案时，使用WebP是个不错的选择。
除了WebP，还有一种WebM，多见于游戏类网站，比如<炉石传说>的Landing Page,WebM仅支持Web，原生不支持。WebP导出工具文件可以在浏览器预览。[WebM导出工具](https://www.fnordware.com/WebM/ WebP)
图片格式动画的体积都比较大。综合的还原效果、兼容性和性能，WebP最佳，GIF几乎和质量无缘，PNG过于原始。
跨平台解决方案
Lottie库和插件是Airbnb于2017年前后发布的一款跨平台动画解决方案，设计师通过bodymovin从AE中将动画导出json文件，开发者只需将导入资源文件直接引用即可。为UI而生，Lottie最早是为了解决矢量图形类动画的问题。Lottie的矢量基因，社区作品大多是图形类动画。
Lottie发布之后处于持续更新，github主干合并频率大概一周一次，从新版本发布频率看，每月一个bugfix，隔月发布一个新版本，任何issue都可以很快响应和解决。
支持部分图片动画，Lottie早期版本是不支持图片类动画的，导出json之后会自动生成一个img的资源文件夹，播放.json文件时，需要解压资源压缩包到本地目录才能正常播放。从bodymovin V5.1.15之后，Lottie将图片转为base 64编码，使用字符代替图像地址，并封装在json里，直接播放一个.json文件，不用再拖着一个资源文件夹了。
Lottie对当前图片类动画的支持依然会有一些小问题，需要仔细排查出问题的图层，官方文档,灵活调整动画替代方案。Lottie安卓开发工程师Gabriel Peal访谈
PAG是腾讯开发者退出的一款面向原生开发动画解决方案，为设计师提供AE导出插件和桌面预览工具，支持AE一切特效。
为AE而生，PAG将动画渲染成图片序列帧，无论是表达式、粒子动画还是3D插件，只要AE做出，PAG都支持。另外，PAG还完美支持透明通道，动画体积非常小。对于位图动画，PAG有2种导出形式：视频序列帧和位图序列帧，视频序列帧小于位图序列帧64%
在使用场景上，视频序列帧适用于展示型、模态型页面，位图序列帧适用于对实时渲染要求较高的Feeds型页面，如果用作列表动画，可能出现卡顿。
PAG和WebP二者看不出显示方面的差异，从体积上看，PAG仅为WebP的十分之一，具有碾压优势。
PAG除了对特效类动画支持好，对矢量动画的支持也是非常优秀，甚至强于Lottie。Lottie文件和PAG文件大小14:1，PAG更小。
PAG的开发者还提供工具方便设计师调整和预览动画参数，PAG出现的比较晚，目前仅支持MAC电脑从AE导出，系统兼容到Android4.4以上，低版本需要兜底方案。另外PAG对Web的开发还未完善，当前也没有正式开源，预计明年将正式开源。
SVGA是YY直播的开发工程师2017年发布的一套跨平台动画解决方案。SVGA不支持复杂矢量图形动画，对位图动画支持超过Lottie。
为改善Lottie而生，目标是弥补和完善Lottie，SVGA记录的是动画元素在时间轴上每帧的表现，支持动画类型比Lottie更多，几乎支持一切AE基础类动画，但是更新频率比较慢，今年只发3-4个版本。
SVGA对基础类动画支持非常优秀，SVGA不支持特效动画(光效、粒子效果等),SVGA支持动态插入图片。PAG借鉴优化了动态编辑功能，保留动画效果前提下，不仅可以替换图片内容，还可以动态修改文本内容以及字体大小，比SVGA更丰富。
如果直接入一套动画库，可以考虑PAG，PAG在原生上的表现甚至可以取代Lottie和WebP，但是在libpag for Web开发完成前，需要借助其他方案协同；非腾讯系产品可以期待明年PAG开源，当前可用WebP、Lottie和SVGA替代。
阿里新出的犸良动画是基于Lottie开发的，特效还挺不错的。
