一、lottie的引入
1. 可以同script引入
<script src="./js/lottie.js" type="text/javascript" ></script>
2. 可以通过npm包引入
npm i lottie-web –save-dev // 引入方式 import lottie from ‘lottie-web’
二、JSON文件的生成
1. 首先电脑安装AE软件
2. 其次下载 bodymovin.zxp 扩展插件，使用这个插件用于JSON的导出
3. 其次下载安装AE扩展插件的工具包 ZXP Installer，这个工具包 aescript + aeplugins zxp installer.exe 可以安装很多的AE扩展插件
4. 在 aescript + aeplugins zxp installer.exe 安装 bodymovin.zxp
安装成功的截图
5. 打开AE编辑 > 首选项 > 常规 界面勾选允许脚本写入文件和访问网络 ，点击确定
选中允许脚本执行
6. 在AE中点击窗口 > 扩展 中就可以看到添加的插件
7. 下一步就是准备动画了，一个aep文件加上素材文件，打开之后在窗口 > 扩展 中打开bodymovin窗口，可以看到下面的窗口
动画的画布
注：以前有遇到过导出卡住的情况，后面考虑到可能是插件和AE版本不匹配的原因，如果你有这种原因那么你就去换一个bodymovin.zxp重新安装一遍，应该会解决这个问题。
三、HTML引入代码
1.<div id="lottie"></div> // 创建一个容器
2.lottie.loadAnimation({
container:document.getElementById('lottie'),//dom元素的容器
loop:true,//循环播放
autoplay:true,//自动播放
path:'data.json' // AE 导出JSON文件
}); 或者
3. import lottie from 'lottie-web';
const icon = document.querySelector('.icon');
lottie.loadAnimation({
container: icon, // 包含动画的dom元素
renderer: 'svg', //渲染出来的是什么格式
loop: true, //循环播放
autoplay: true, //自动播放
path: './data.json' // 动画json的路径
});
转自：https://www.jianshu.com/p/e84812eac166