一排监、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編輯 > 首選項 > 常規(guī)?界面勾選允許腳本寫入文件和訪問網(wǎng)絡?西饵，點擊確定
? ? ? ? 6.?在AE中點擊窗口 > 擴展?中就可以看到添加的插件
? ? ? ? 7. 下一步就是準備動畫了插掂，一個aep文件加上素材文件问潭，打開之后在窗口 > 擴展?中打開bodymovin窗口，可以看到下面的窗口
? ? ? ? 注：以前有遇到過導出卡住的情況饼暑，后面考慮到可能是插件和AE版本不匹配的原因稳析，如果你有這種原因那么你就去換一個bodymovin.zxp重新安裝一遍，應該會解決這個問題弓叛。
三彰居、HTML引入代碼
? ?????1.<div id="lottie"></div>? ? // 創(chuàng)建一個容器
? ? ? ? 2.lottie.loadAnimation({
????????????????????????????container:document.getElementById('lottie'),//dom元素的容器
????????????????????????????loop:true,//循環(huán)播放
????????????????????????????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,? //循環(huán)播放
? ? ????????????????????autoplay: true, //自動播放
? ????? ????????????????path: './data.json' // 動畫json的路徑
????????????});
