在普通h5中使用Bodymovin和Lottie网上的教程有很多,导出data.json后引入lottie.js就可以了
尝试在vue中使用时,参考https://github.com/chenqingspring/vue-lottie
不知道其他人使用怎样,自己直接全部拷贝会出错,找不到lottie.vue的错,及数据上的错误,同样会报错的话可以尝试下。
以下为自己修改了一点的使用方法
1.npm install --save vue-lottie
2.官网代码修改以下两处:

为:

代码如下:
<template>
<div id="app">
<lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>
</div>
</template>
<script>
import Lottie from 'vue-lottie';
import * as animationData from './assets/data.json';
export default {
name: 'app',
components: {
'lottie': Lottie
},
data() {
return {
defaultOptions: {animationData: animationData.default},
}
},
methods: {
handleAnimation: function (anim) {
this.anim = anim;
}
}
}
</script>