1.0.3 • Published 3 years ago
安装
npm i lottie-vue
使用
<template>
<div>
<h1 @click="play">点击文字或图案</h1>
<lottie-vue
ref="lottieVue"
:width="500"
:height="500"
:autoplay="false"
:clickPlay="true"
:loop="false"
:manualLoop="false"
path="https://assets7.lottiefiles.com/packages/lf20_tmyg7clb.json"
// animationData:require('您的本地json路径'),
@onComplete="onComplete"
@onEnterFrame="onEnterFrame"
@onSegmentStart="onSegmentStart"
>
</lottie-vue>
</div>
</template>
<script>
import LottieVue from "lottie-vue"
export default {
components: {
LottieVue
},
methods:{
onComplete(){
console.log("onComplete");
},
onEnterFrame(){
console.log("onEnterFrame");
},
onSegmentStart(){
console.log("onSegmentStart");
},
play(){
this.$refs.lottieVue.play()
}
}
}
</script>
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| renderer | 渲染器 | String | svg / canvas / html | svg |
| loop | 循环播放 | Boolean | true / false | true |
| autoplay | 自动播放 | Boolean | true / false | true |
| manualLoop | 事件播放循环 | Boolean | true / false | true |
| clickPlay | 点击播放 | Boolean | true / false | false |
| mousePlay | 鼠标移入播放 | Boolean | true / false | false |
| name | 动画名称，用于 reference | - | - | - |
| animationData | json 动画数据 | - | - | - |
| path | json 网络路径（与animationData互斥，animationData优先） | - | - | - |
| animationData | json 本地路径 | - | - | - |
| direction | 方向 | Number | 1：正向 / -1：反向 | 1 |
| speed | 速度 | Number | 取值>0 1为倍速 | 1 |
| width | 宽度 | Number | - | - |
| height | 高度 | Number | - | - |
Events
| 事件名称 | 说明 | 回调参数 |
|---|
| onComplete | 非循环动画执行一次触发 | - |
| onLoopComplete | 循环动画每执行一次触发 | - |
| onEnterFrame | 动画准备完毕触发 | - |
| onSegmentStart | 每进行一帧执行一次 | - |
Methods
| 方法名称 | 说明 | 回调参数 |
|---|
| stop | 停止动画 | - |
| play | 播放动画 | - |
| pause | 暂停动画 | - |
| setSpeed | 设置播放速度 | 取值>0 1表示倍速 |
| setDirection | 设置播放方向 | 1：正向 / -1：反向 |
| goToAndStop | 跳到某一帧或者某一秒停止 | 第一个参数为数字，取值>0；第二个参数为Boolean，true为跳到某一帧，false为跳到某一时间 |
| goToAndPlay | 跳到某一帧或者某一秒开始播放 | 第一个参数为数字，取值>0；第二个参数为Boolean，true为跳到某一帧，false为跳到某一时间 |
| playSegments | 播放某些片段 | 第一个参数为数组，两个元素为开始帧和结束帧；第二个参数为Boolean，是否立即播放片段，还是等之前的动画播放完成 |
| destroy | 销毁动画实例 | - |
基于lottie-web二次开发，丰富了一些功能，简化了api调用。