VUE中使用lottie，可使用网络路径

VUE中使用lottie-web显示lottie动画

1.安装

为什么不使用vue-lottie！vue-lottie是根据lottie-web拓展的一个组件，优点是可直接引入组件使用，但最大最致命的缺点就是不支持网络路径的lottie json动画。而且使用lottie-web完全可以自己封装一个组件，并不难。一个lottie动辄200K的大小，如果不使用网络路径，打包出来的会体积巨大。所以不推荐使用vue-lottie；建议使用lottie-web自己封装组件。

npm install lottie-web --save

2.引入

import lottie from "lottie-web";

3.使用

可支持本地 Json文件和远程网络地址 Json文件

HTML

需要指定一个id的div，用来作为装载动画的容器。class自定义

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

JS

1. 定义用来承载lottie对象的变量

data() {
    return {
      lottie: {}
    };
  },

2. mounted生命周期时初始化lottie

  mounted() {
    this.lottie = lottie.loadAnimation({
      container: document.getElementById("lottie_box"),
      renderer: "svg",
      loop: false, //循环播放
      autoplay: false, //自动播放
      /**
       * animationData和path二选一。
       * 1.animationData
       * animationData为本地路径的json，需要import * as anData from "@/XXX.json"
       * 注意：使用本地路径获取的data需要使用default参数。
       * 2.path
       * path可直接传入网络路径
       */
      // animationData: anData.default,
      // path: "https://assets7.lottiefiles.com/packages/lf20_sF7uci.json"
    });
  }

3. 常用方法

• pause 暂停，示例

lottie.pause();//下同

• play 播放
• stop 停止
• destroy 销毁