一、页面效果
实际效果小树可以跳动
二、vue-lottie
vue-lottie git地址 : link.
三、使用
1、安装
npm install --save vue-lottie
2、在main.js 引用
import lottie from 'vue-lottie';
Vue.component('lottie', lottie)
3、代码中使用
// html
<div>
<lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation" />
<div>
<p>Speed: x{{ animationSpeed }}</p>
<input type="range" value="1" min="0" max="3" step="0.5" v-on:change="onSpeedChange" v-model="animationSpeed" />
</div>
<button v-on:click="stop">stop</button>
<button v-on:click="pause">pause</button>
<button v-on:click="play">play</button>
</div>
-----------------
// script 中
const animationData = require('@/assets/lottie/data.json')
// import * as animationData from '@/assets/lottie/data.json'; // 不显示图片
data() {
return {
defaultOptions: { animationData: animationData },
animationSpeed: 1,
}
},
methods: {
handleAnimation: function (anim) {
this.anim = anim
},
stop: function () {
this.anim.stop()
},
play: function () {
this.anim.play()
},
pause: function () {
this.anim.pause()
},
onSpeedChange: function () {
this.anim.setSpeed(this.animationSpeed)
},
},
注意
json文件中图片地址是针服务器项目目录
需放在public文件夹下,注意检查json文件图片地址和所在文件的路径