需求场景：
【1】动画效果太难实现，或者实现后速度很慢
【2】动画效果很复杂又不想用gif或者视频加载，卡顿问题
【3】安卓，ios，web三端需要统一动画效果
那么Lottie你值得一试！只要设计师能做出来你代码就能100%还原效果！
核心：
是设计师用AE制作动画，并且导出json文件，前端只需要使用Lottie框架去加载其json即可
原理：
Lottie将json动画文件转化为svg渲染在浏览器（SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真）
使用：
【1】设计师参考：
LottieJS动画的安装与使用 - 简书
AE插件bodymovin如何安装 - 简书
有这个两个应用后就可以开始制作动画效果了，如果只是简单的路径位置，动画曲线、透明等问题在制作完成后打开bodymovin，选中要导出的文件，选择位置点击 render即可。
需要注意的是lottie不能万能的，加入特效插件的无法实现，预合成的文件无法识别，因此需要设计师在做动效时需要用最简单、最近本的方法实现动画效果。
还有因为bodymovin的影响渐变色可能是黑白渐变，这时需要通过修改json文件来修改渐变色，后面会提到。
适用范围
即便是用ae最简单的工具制作，但是Lottie也只能实现部分效果，web端的使用范围大很多，但是ios和安卓有一些限制，大家在制作前最好看看哪些效果无法实现，比如我之前就在这遇到个坑，用了蒙版扩展，但是ios不知道扩展的功能，费了很长时间，下面附上链接
点我查看各端支持范围
Lottie 动画里有图片怎么办？设计师小姐姐也能帮你减少开发量！
Lottie的避坑指南 | 写给设计师的Lottie使用技巧_动画
想用 Lottie 做动画？先收下这份常见错误和解决方法总结 - 优设网 - UISDC
Lottie和Bodymovin输出动画 完美实现渐变方案|UI|教程|威武小帅哥 - 原创文章 - 站酷
附：
通过这个网站可以预览你的json文件，不过这里默认是web端，ios端和安卓端可以下载应用，lottie files 下载。
使用方法：在网站上点击预览，拖入json文件，右边有二维码app扫码查看效果。
Preview & Test Bodymovin Lottie Animations on Web, iOS and Android
网友评论