vue项目中使用阿里巴巴矢量图标库中的 Lottie库

iconfont-阿里巴巴矢量图标库

先看效果图：

 使用过程：

1，安装插件

yarn add lottie-web

 2, 本文将 lottie-web 挂载到了vue上；在main.js 文件中：

import lottie from "lottie-web";
Vue.prototype.$lottie = lottie;

3， 在页面中显示动画的位置写个div， 样式自己定义

<div id="lottie_box" class="animation"></div>

4，在需要设置动画的文件中设置；json文件放到本地的话，需要下载好；

  mounted() {
    this.$nextTick(() => {
        this.$lottie.loadAnimation({
          container: document.getElementById(`lottie_box`), // 包含动画的dom元素
          renderer: "svg", // 渲染出来的是什么格式
          loop: true, // 循环播放
          autoplay: true, // 自动播放
          animationData: require(`@/assets/lottie/无人机.json`), // 动画json的本地路径
          // path:''//网络json地址, 选择 animationData 后，则不用path了，
        });
    });
  }