二、跨平台解决方案
1、Lottie
Lottie 库和插件是 Airbnb 于2017年前后发布的一款跨平台的动画解决方案，设计师通过 bodymovin 从 AE 中将动画导出 json 文件，开发只需将将其导入资源文件夹直接引用即可。
Lottie 最早是为了解决矢量图形类动画的问题。从官方社区来看，我们能容易发现 Lottie 的矢量基因，社区作品大多是图形类动画。
Lottie 发布之后处于持续更新，从 Github 上主干合并频率来看，大概每周一次，从新版本发布频率来看，每月一个 bug fix，隔月发布一个新版本，任何 issue 都可以很快响应和解决。
Lottie 早期的版本是不支持图片类动画的，导出 json 之后会自动生成一个 img 的资源文件夹，播放 .json 文件时，需要解压资源压缩包到本地目录才能正常播放。从 bodymovin V 5.1.15 之后，Lottie 将图片转为 base 64 编码，使用字符代替图像地址，并封装在 json 里，直接播放一个 .json 文件，不用再拖着一个资源文件夹了。但有开发反应lottied 的资源转 base64 需要编译，一定程度上会影响性能，正常情况还是附带资源包的方法会保险一些。
Bodymovin 5.5.9 资源文件的设置面板
Lottie 当前对图片类动画的支持依然会有一些小问题，对AE的某些属性还不支持，有时候需要仔细排查出问题的图层，并对照官方文档
2、PAG
PAG 是腾讯开发者推出的一款面向原生开发的动画解决方案，为设计师提供 AE 导出插件和桌面预览工具，支持 AE 一切特效。
官网地址：https://pag.im/
PAG 将动画渲染成图片序列帧，无论是表达式、粒子动画还是 3D插件，只要 AE 做的出，PAG 都支持。另外，PAG 还完美支持透明通道，动画体积非常小。
起点读书今年上半年接入了 PAG 的 SDK，最早用于作品荣誉徽章的展示：
起点读书荣誉徽章 PAG 文件对比
对于位图动画，PAG 有2种导出形式：视频序列帧和位图序列帧，视频序列帧小于位图序列帧，以上图为例，视频序列帧83k，位图序列帧 234k，前者比后者小 64%。
在使用场景上，视频序列帧适用于展示型、模态型页面，位图序列帧适用于对实时渲染要求较高的 Feeds 型页面，如果用作列表动画，可能会出现卡顿。
起点读书作品徽章 PAG vs. WebP
我们再比较下 PAG 和 WebP，首先，二者用肉眼几乎看不出显示方面的差异，但是从体积上看，PAG 仅为 WebP 的十分之一，具有碾压优势。
PAG vs. Lottie
PAG 除了对特效类动画的支持可圈可点，对矢量动画的支持也是非常优秀，甚至强于 Lottie。以一个生长动画为例，Lottie 文件 14k，而 PAG 文件只有1k。
起点读书投月票提醒
另外，PAG 的开发者还提供工具方便设计师调整和预览动画参数，不懂 AE 的开发不是好测试：）
强大的桌面预览工具 PAGViewer
PAG 出现的比较晚，目前仅限 MAC电脑从 AE 导出，Windows 下AE 导出插件还在开发过程中，系统只兼容到 Android 4.4 以上，低版本需要有兜底方案。另外，PAG 对 Web 的开发还未完成， 当前也没有正式开源，目前优先腾讯系业务接入，预计明年将正式对外开源。
3、SVGA
SVGA 是 YY 直播的开发工程师 2017 年发布的一套跨平台动画解决方案。SVGA 不支持复杂矢量图形动画，对位图动画的支持超过 Lottie。
SVGA 最初的目标是弥补和改善 Lottie 。笔者通过反复测试发现，SVGA 记录的是动画元素在时间轴上每帧的表现，支持的动画类型比 Lottie 更多， 几乎支持一切 AE 基础类动画。但是更新频率比较慢，今年只发布了3-4个版本。
SVGA 对基础类动画的支持非常优秀，但是笔者发现 SVGA 不支持特效类动画。如下图：
PAG实现效果
SVGA实现效果
从上面两张图可以看出，SVGA 仅保留了基础的缩放动画，却丢失了光效和粒子效果。
另外，SVGA 支持动态插入图片，例如下面左图中的用户头像就是动态插入的，在一些直播类、游戏类产品中比较常见。
SVGA 和 PAG 对于动态编辑方面的支持演示
后来，PAG 的开发者受此启发，借鉴并优化了这种动态编辑的功能，在保留动画效果前提下，不仅可以替换图片内容，还可以动态修改文本内容以及字体大小，比 SVGA 更为丰富。
综上所述：
通过以上比较分析，如果只接入一套动画库，那么可以考虑 PAG ，PAG 在原生上的表现甚至可以取代 Lottie 和 WebP，但是，在 libpag for Web 开发完成之前，需要借助其他方案协同；非腾讯系产品可以期待明年 PAG 开源，当前可用 WebP、Lottie 和 SVGA 代替。
以上就是关于UI动效如何落地的方法总结。工作中还需要考虑具体场景选择合适的方法，最后希望对大家的工作有帮助！感谢大家的阅读！
