【笔记】在vue项目中使用Lottie动画

1，下载vue-lottie包

npm install --save vue-lottie or yarn add vue-lottie

2，在main.js中引入并注册为全局组件

//引入 import lottie from 'vue-lottie'; //注册为全局组件 Vue.component('lottie', lottie)

3，页面使用

//----3.1 引入json文件（就是lottie动画资源）---- import * as lottieJson from "../assets/lottie/lottie.json"; //-----------------3.2 html使用----------------- <div class="home"> <lottie :options="defaultOptions" :height="500" :width="500" @animCreated="handleAnimation"/> <div> <p>Speed: x{{animationSpeed}}</p> <input type="range" value="1" min="0" max="3" step="0.5" @change="onSpeedChange" v-model="animationSpeed" /> </div> <button @click="stop">停止</button> <button @click="pause">暂停</button> <button @click="play">播放</button> </div> //---------------------3.3---------------------- data(){ return { defaultOptions: { animationData: lottieJson.default, /*文件资源*/ }, animationSpeed: 1, /*动画速度*/ } }, //----------------------3.4---------------------- methods: { handleAnimation: function (anim) { this.anim = anim; }, //停止 stop: function () { this.anim.stop(); }, //暂停 pause: function () { this.anim.pause(); }, //播放 play: function () { this.anim.play(); }, //当滑块控件值发生改变时，改变动画的速度 onSpeedChange: function () { this.anim.setSpeed(this.animationSpeed); } }