lottie在前端引用

以在vue中使用为例
一、下载lottie

npm i vue-lottie -S

二、在main.js中引入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)
  }
}

引入资源是遇到的问题：图片文件找不到
解决方法：
方法一：
① 把静态资源文件移到public文件夹下(public/img/lottie/images)，与"u"的值相对应，加载成功！

② 万能：资源文件依旧放在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}`)
  }
}); 

四、Lottie-web 常用方法
animation.play(); // 播放，从当前帧开始播放

animation.stop(); // 停止，并回到第0帧

animation.pause(); // 暂停，并保持当前帧

animation.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止isFrame(默认false)指示value表示帧还是时间(毫秒)

animation.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并进行播放

animation.goToAndStop(30, true); // 跳转到第30帧并停止

animation.goToAndPlay(300); // 跳转到第300毫秒并播放

animation.playSegments(arr, forceFlag); // arr可以包含两个数字或者两个数字组成的数组，forceFlag表示是否立即强制播放该片段

animation.playSegments([10,20], false); // 播放完之前的片段，播放10-20帧

animation.playSegments([[0,5],[10,18]], true); // 直接播放0-5帧和10-18帧

animation.setSpeed(speed); // 设置播放速度，speed为1表示正常速度

animation.setDirection(direction); // 设置播放方向，1表示正向播放，-1表示反向播放

animation.destroy(); // 删除该动画，移除相应的元素标签等。在unmount的时候，需要调用该方法
五、Lottie-web 常用的事件
data_ready：动画数据加载完毕
animation.addEventListener(‘data_ready’, () => { console.log(‘animation data has loaded’); });
config_ready：完成初始配置后

data_failed：当无法加载动画的一部分时

loaded_images：当所有图像加载成功或错误时

DOMLoaded：将元素添加到DOM时