Lottie是一套动画转代码的服务名称。

特点

• 其体积和性能都优于 png 与 gif
• 跨平台，适用于H5、手机APP、桌面应用
• 可编辑、可配置、可允许交互

生成方法

1. 在线课程
2. 借助airbnb开发的bodymovin插件，将After Effects动画转为json文件（版本同bodymovin）供Lottie使用
   注意，AE、bodymovin、Lottie需要使用相适应的版本
3. 上传并在线测试
4. 通过在线工具微调颜色/文字等
5. 通过 json-editor 调试JSON文件

---

使用方法

通用

• 下载为gif/mp4直接使用
• 下载为可编辑的AEP文件导入AE（需搭配bodymovin插件），编辑后导出为json使用

H5

• 直接引用iframe

<iframe src="https://lottiefiles.com/iframe/60424-web-hosting"></iframe>

• webplayer，下载json搭配lottie-player.js使用，可配置背景/速度等

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets3.lottiefiles.com/packages/lf20_g0zfud2s.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop controls autoplay></lottie-player>