原文作者：UC 国际研发 衍豪
写在最前：欢迎你来到“UC国际技术”公众号，我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章，不限于原创与翻译。
背景
目前的动画形式多种多样，如 canvas、css、svg、gif、视频都是我们常见的形式，我们简单对它们做个分析：
- 手写实现 svg 和 canvas 动画，控制粒度较细，工作量大，对着效果来实现容易有买家秀和卖家秀的区别，且客户端不能复用
- css 我们经常使用来实现过渡效果、加载的动画，对于一些复杂的动画仍无法满足需求
- gif 动画，文件较大，带透明通道的容易有毛边，且只能在一个固定的尺寸里渲染，颜色数最高 256 导致画质不高，
- png 图序列，不能放大，且文件较大
- 视频，文件体积十分大，影响加载时间
由于各个动画实现方案有着各种问题，所以十分需要有一种简单、高效、体积小、还原度高的动画解决方案。在一次偶然的情况下，朋友推荐了 Lottie 库。
Lottie 简介
众所周知，使用代码实现一套复杂的动画是一件困难且工作量大的事情，特别是在不同的平台，不同的分辨率下，难度又会提升一个级别。
现在，Airbnb 开源了一个叫 Lottie 的跨平台动画库（前身是 bodymovin，在版本号为 v5.0.0 的时候进行了更名。），能分析 Adobe After Effects 导出的动画，并完美展现动画效果。它最大的优点是提供了一套完整的跨平台的动画实现方案，如下图：
Lottie原理
在 AE 中，动画是由各个图层组成的，图层中的内容也可以拆分为多个元素。拆分元素之后，根据动画需求，可以单独对图层或者图层中的元素做平移、旋转、收缩等操作。
简单来说就是 Lottie 是通过 bodymovin 这个插件来将 AE 的工程文件的图层元素转化为对应的 JSON 文件数据，Lottie 则负责解析这些动画的数据，将其绘制在网页上。
Lottie 的优点
对于 GIF、手写动画实现、帧动画来说，这个方案：
极大地提高了动画的开发效率以及减少工作量（仅需要设计师完成动画效果的设计，导出 JSON，前端展示，无需关心实现的细节）
动画还原度高
线上更新也容易（只需要替换 JSON 文件和素材）
JSON 文件比 gif 文件小，性能也更好。
跨平台
Lottie 的不足
Lottie 的动画，只能是 svg/canvas 动画
JSON 文件的大小受限于设计师对 AE 的使用，如果图层很多，文件体积也会增大
有部分 AE 动画的属性，Lottie 暂未支持（常用的 3D 图层变换、几乎所有效果器 [effects]、图层样式 [layer styles]、叠加模式 [blending mode]、渐变 [gradient ramp/gradient fill...]（好像正在加入支持，期待更新）、任意表达式 [expressions]、径向擦除 [radius wipe]）
Lottie 库自身的大小不算小。如果项目对于动画使用不高，GI F可能是更优的选择
由于 Lottie 在 CDN 外链上的版本是 bodymovin 这个库，所以这里选择比较 bodymovin 的大小，npm 版本是 lottie-web。
同一动画对比
效果：
Lottie 的使用
npm 版本
cdn版本
在 html 文件的 head 引入：
执行
可使用的场景
1.业务引导动画，不需要每次在清晰度和文件大小平衡，使用 Lottie 可提高动画清晰度和文件大小
2.loading 动画，可以实现更复杂的动画且质量不会下降，相对于 GIF 来说更出色
3.礼物动画，对于有大量动画，每个动画都不相同，动画过程中有大量的旋转，透明度，大小的变化，使用 Lottie 会变得更简单，且容易维护
4.闪屏动画
5.转场动画
总结
由于 Lottie 自身的包体积问题，在实际项目中，对于动画要求不高的需求（如：按钮 hover 颜色变化、纯色 loading 转动）且动画使用较少的情况下，使用 css 或 gif 是更好的选择。但在使用动画效果比较频繁的项目或者动画效果要求比较高的项目，就变得十分有利了。
对动画效果要求比较频繁的项目可以结合业务，在不同的状态下请求不同的动画 JSON，相对于 gif 和视频来说，可以大大缩减请求文件的时间，同时效果不会减弱。虽然目前仍存在不少问题，某些特效不支持，AE 的 bodymovin 插件不够完善，JSON 文件的说明不够详细等。但对于它带来的好处来说，仍可值得一试，毕竟软件工程没有银弹。
