在vue项目中使用lottie动画
首先npm安装vue-lottie:npm install vue-lottie -S在需要使用的组件里引用lottie动画的json文件:import * as animationData from '@/assets/json/loading.json'import Lottie from 'vue-lottie/src/lottie.vue'注册到组件里:data(){...
·
首先npm安装vue-lottie
:
npm install vue-lottie -S
在需要使用的组件里引用lottie动画的json文件:
import * as animationData from '@/assets/json/loading.json'
import Lottie from 'vue-lottie/src/lottie.vue'
注册到组件里:
data(){
return {
defaultOptions:{
animationData:animationData.default
}
}
},
components:{
Lottie
},
methods:{
handleAnimation(anim){
this.anim = anim
}
}
在template里使用Lottie组件:
<template>
<Lottie :options="defaultOptions" :height="26" :width="26" @animCreated="handleAnimation"/>
</template>
最后就能得到json文件的动画效果:
更多推荐
已为社区贡献17条内容
所有评论(0)