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}`);
    }
  });

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

<template>
<div id="lottieBox" ></div>
</template>
<script>
mounted() {
      /** 初始化lottie动画 */
      this.lottieInit();
    },
methods:{
  lottieInit() {
        /** 加载lottie动画插件; */
        // path加载远端路径
        // animationData加载本地json的导出对象
        this.lottie = lottie.loadAnimation({
          container: document.getElementById("lottieBox"),
          renderer: "svg",
          loop: false,
          animationData: animationData.default, // 如果是本地的json,使用animationData，并且注意后面需要加.default
          // path:`https//www.baidu.com/lottie/data.json`, // 加载远端路径则使用path
          autoplay: true
        });

        this.lottie["addEventListener"]("complete", () => {
       
          /** 销毁lottie动画对象; */
           this.lottie["destroy"]();
        });
      },
}
</script>

第二种：

<template>
<lottie :options="defaultOptions" :height="200" :width="200" v-on:animCreated="handleAnimation" />
</template>
<script>
    import * as animationData from '../../../../assets/images/robot/data.json';  // 引入data.json
    animationData.assets.forEach((item) => {
        item.u = '';
        if (item.w && item.h) {
            item.p = require(`@/assets/images/robot/images/${item.p}`);
        }
    }); 
    export default {
        name: "robotLottie",
        data() {
            return {
                defaultOptions: { animationData: animationData.default }, 
            }
        },
        props: [],
        computed: {},
        methods: {
            handleAnimation: function(anim) {
               
            },

            mounted() {}
        }
    }
</script>