一、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中点击窗口 > 扩展 中就可以看到添加的插件

选中导出json的插件

        7. 下一步就是准备动画了，一个aep文件加上素材文件，打开之后在窗口 > 扩展 中打开bodymovin窗口，可以看到下面的窗口

动画的画布 clone导出文件

        注：以前有遇到过导出卡住的情况，后面考虑到可能是插件和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的路径

            });