vue-cli3.0 之 vue-lottie使用教程（渲染JSON动画）

一、安装vue-lottie

npm install vue-lottie -S

二、在main.js中引入vue-lottie（全局）

// 引用vue-lottie动画
import lottie from 'vue-lottie'
Vue.component('lottie', lottie)

三、在组件中注册使用

1、引入json

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

2、使用组件

<lottie :options="defaultOptions" v-on:animCreated="handleAnimation"/>

3、data、methods

data () {
     
  return {
     
    defaultOptions: {
      animationData:animationData.default },
    anim : {
     }
  }
},
methods: {
     
  handleAnimation(anim){
     
    this.anim = anim // 这里可以看到lottie对象的全部属性
    console.log(anim)
  }
}

    说明：lottie初始化时，需要指定一个options配置项。animCreated方法用于创建lottie动画，返回一个anim对象，里面包含这个动画的所有属性。我们可以根据它返回的这个对象，来对lottie动画做一系列的控制。

---

    你以为这就结束了？接下来说下博主在使用中遇到的问题！！！——找不到静态资源文件，动画加载失败！！！划重点（以下针对vue-cli3.0，其他版本可自行尝试）

    一般情况下，引入的资源文件都是放在src/assets下的，博主按照以上步骤引入后发现动画的静态资源文件加载失败（找不到路径），于是我手动修改"u"的值，Emmm…一番挣扎过后，于事无补，但皇天不负有心人！现提供以下两种解决方式，亲测有效！

① 把静态资源文件移到public文件夹下(public/img/lottie/images)，与"u"的值相对应，加载成功！

（暂时还不明白为什么data.json中的资源默认根目录是public）

② 万能：资源文件依旧放在src/assets/lottie下，在组件中使用时动态加载静态资源，成功！

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

（-----------持续更新----------）