在vue中使用json格式的动效文件

在项目中有一个写动画效果前端实现起来很复杂而且效果不好；可以直接找UI设计好效果转换成json 格式的文件；

使用方法：
1、安装web-lottie

cnpm i web-lottie

2、在assets 文件中新建一个lottie 文件夹，并将json文件放入；
将ui 给到的这个images动效文件放入到public下(images一定要放到pubilc下，不然图片路径找不到)。
pulic/images

3、新建一个lottie组件

<template>
  <div id="lottie"></div>
</template>
<script>
import animationData from "../../assets/lottie/cavans.json";
import lottie from "lottie-web";
export default {
  data() {
    return {};
  },
  mounted() {
    this.svgFun();
  },
  methods: {
    svgFun() {
      let params = {
        container: document.getElementById("lottie"),
        renderer: "svg",
        loop: true,
        autoplay: true,
        animationData: animationData,
      };
      let anim;
      anim = lottie.loadAnimation(params);
    },
  },
};
</script>

4、对应的页面使用引入lottie组件即可。lottie层级应该在内容的下面不然可能出出现按钮点击不动的情况.