ios android 动画效果代码,Lottie 移动应用动画效果框架(web/ios/android)

需求场景：

【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不知道扩展的功能，费了很长时间，下面附上链接

点我查看各端支持范围

【2】程序开发参考：