vue中引入json动画

ps：我们经常会碰到复杂的动画，运用纯css3制作动画效果不理想，因为图片太多，canvas动画比较复杂，而且会失真，所以想起运用json文件进行动画；

1.安装lottie-web

lottie是一个跨平台的动画库，通过AE导出动画Json文件，然后用lottie解析这个Json文件，还原动画

npm install lottie-web
复制代码

2.引入lottie

可以在main.js里面引用，也可以在单独需要这个动画的界面引用；我是因为只有一个界面需要引入，所以就直接在当前页面引入的lottie-web;

import lottie from 'lottie-web' 
复制代码

3.制作动画

html，id为imgwrapper是承载json的容器；

 <div class="lottieMain">
      <div id="imgWrapper"></div>
 </div> 
复制代码

json文件，这里的p是图片位置；

"assets": [{
    "id": "image_0",
    "w": 26,
    "h": 26,
    "u": "",
    "p": "img_0.png",
    "e": 0
},
{
    "id": "image_1",
    "w": 472,
    "h": 299,
    "u": "",
    "p": "img_1.png",
    "e": 0
}]
复制代码

js文件，可以在mouted中写入这个动画；

let AstronautDefalut = require('./lottie/blindBox/tc1/data.json'); 
let AstronautJSON = reactive(JSON.parse(JSON.stringify(AstronautDefalut)));   //深拷贝json
AstronautJSON.assets.forEach(item=>{ //更改json里面的图片路径
  item.u="";
  if(item.w && item.h && !item.p.startsWith('data:image')){
    item.p = require(`./lottie/blindBox/tc1/${item.p}`);  //这里是因为图片如果不是放在根目录下，就要把图片单独引入；
  }
  return item;
})       
 let amin = lottie.loadAnimation({
    container: document.getElementById('imgWrapper'),
    renderer: 'svg',
    loop: false,
    autoplay: true,
    animationData: AstronautJSON
  })
  amin.addEventListener('complete', () => {
    //结束动画
    console.log("动画结束")
  })  
复制代码

lottie.loadAnimation属性：
container:需要渲染的DOM元素；
renderer：渲染方式，默认是svg，还有html和canvas
loop:是否循环
autoplay:是否自动播放
animationData:json动画，这个是必填；