vue-lottie的使用，以及本地json文件和线上json文件使用的区别

vue-lottie是一个基于vuejs的动画效果实现组件。它基于lottie开源项目，可以将After Effects导出的json文件渲染成svg/canvas/html动画效果。
下面就来简单介绍下如何使用，以及哪些是坑需要避免

一、下载安装

npm install --save vue-lottie

二、引入
这里要注意的是引入有两种方式。亲测都是可以的。但是要注意是加载远端路径还是加载本地json的导出对象，
这两种做法是有区别的。

import lottie from "lottie-web";
或者 import lottie from "vue-lottie";

三、如果是使用本地json，则需要引入

import * as animationData from "@/assets/lottie/data.json";

// 获取静态资源, 注意这一段很重要，很多文章并没有这个，没有这个动画加载不出来

 animationData.assets.forEach(item => {
    item.u = "";
    if (item.w && item.h) {
      item.p = require(`@/assets/lottie/images/${item.p}`);
    }
  }); 

引入完成、现在需要实现功能,这里也有两种方式
第一种：

第二种：