一、安装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}`)
}
});
(-----------持续更新----------)