Lottie 是 Airbnb 开源的一套动画库, 我们可以使用 Adobe After Effects (俗称AE) 设计出动画, 使用 Lottie提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式, 就可以直接运用在 iOS, Android, Web和 React Native之上, 无需其他额外操作.

lottie 官网lottie 官网

lottie-androidAndroid 应用

lottie-iosiOS 应用

lottie-react-nativeRN 应用

lottie-webWeb 应用

AE 破解版AE 破解版下载链接, 相关下载在百度网盘上搜索

Bodymovin 插件AE插件, 用于将 aep 文件导出为 json 文件

AE 插件安装器亲测, 好用

lottie 动画社区lottie 动画库, 有很多轮子可供下载编辑

json文件格式利用 Bodymovin 插件将动画从 AE 中导出的 JSON文件  

需要设计lottie的动画时：

  1. 官网动画实例 www.lottiefiles.com
  2. ae文件预览 https://www.lottiefiles.com/preview
  3. 在为Lottie构建时，您始终必须记住，这些JSON文件需要尽可能小巧令移动产品尽可能小。 例如，尽可能使用parenting。 在类似的图层上复制相同的关键帧会增加额外的代码。 只有在必要时才使用路径关键帧动画。 由于它为每个关键帧上的每个顶点添加数据，因此占用的空间最多。 诸如Autotrace之类的技术，或者每帧都为您提供关键帧的摇摆器，可能会使您的JSON文件非常大，并可能会对性能产生负面影响。 必须与组合物的设置方式保持平衡，以使事物尽可能高效。
  4. 将任何Adobe Illustrator，EPS，SVG或PDF资源转换为After Effects中的图层，否则它们将无法在您的Lottie动画中使用。
  5. Lottie尚不支持效果菜单中的表达式或任何效果。
  6. 使用alpha遮罩会影响性能。 如果你使用的是alpha遮罩或alpha倒置遮罩，遮罩的大小会对性能产生更大的影响。 如果必须使用遮罩，请覆盖最小的区域。
  7. 混合模式（如Multiply, Screen 或 Add）尚不受支持，也不支持Luma遮罩。
  8. Lottie还不支持阴影，颜色叠加或笔触等图层效果。
  9. 导出比您想要支持的最宽屏幕更宽的动画，使开发者在Android上使用centerCrop类型或在iOS上使用aspectFill内容模式。
  10. 将图片资源放入JSON， 将图片资源整合到动画的 JSON文件中，开发人员的工作量就可以节约很多。
  • 需要先将图片转换成矢量图 SVG 格式，这个设计师一定有办法。
  • 使用 Illustrator 将 SVG 文件另存为 .ai 文件。
  • 使用 .ai 文件在 AE 中做动画处理。
  • 最后通过 Bodymovin 插件，输出动画资源。 官方文档： artwork-to-lottie-walkthrough