效果
安装vue-lottie包
npm install --save vue-lottie
使用vue-lottie
<template>
<div>
<lottie :options="defaultOptions" :width="100" :height="100" v-on:animCreated="handleAnimation" />
<div class="flex flex-content-center">
<el-button type="primary" size="mini" @click="stop">stop</el-button>
<el-button type="primary" size="mini" @click="play">play</el-button>
<el-button type="primary" size="mini" @click="pause">pause</el-button>
<el-input-number style="margin-left:10px" @change="onSpeedChange" size="mini" v-model="speed" :min="1" :step="1"></el-input-number>
</div>
</div>
<template>
<script>
import Lottie from 'vue-lottie';
import * as animationData from './live.json';
export default {
components: { Lottie },
data() {
return {
defaultOptions: { animationData: animationData.default },
speed: 1
}
},
methods:{
handleAnimation(anim) {
this.anim = anim;
},
stop() {
this.anim.stop();
},
play() {
this.anim.play();
},
pause() {
this.anim.pause();
},
onSpeedChange() {
this.anim.setSpeed(this.speed);
}
}
}
</script>
附：json文件
{
"v": "5.6.10",
"fr": 30,
"ip": 0,
"op": 60,
"w": 28,
"h": 24,
"nm": "合成 1",
"ddd": 0,
"assets": [],
"layers": [
{
"ddd": 0,
"ind": 1,
"ty": 4,
"nm": "形状图层 4",
"sr": 1,
"ks": {
"o": { "a": 0, "k": 100, "ix": 11 },
"r": { "a": 0, "k": 0, "ix": 10 },
"p": {
"a": 1,
"k": [
{
"i": { "x": 0.833, "y": 0.833 },
"o": { "x": 0.167, "y": 0.167 },
"t": 0,
"s": [14, 12.001, 0],
"to": [0, 1.6, 0],
"ti": [0, 0, 0]
},
{
"i": { "x": 0.833, "y": 0.833 },
"o": { "x": 0.167, "y": 0.167 },
"t": 30,
"s": [14, 21.6, 0],
"to": [0, 0, 0],
"ti": [0, 1.6, 0]
},
{ "t": 60, "s": [14, 12.001, 0] }
],
"ix": 2
},
"a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
"s": {
"a": 1,
"k": [
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 0,
"s": [100, 100, 100]
},
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 30,
"s": [100, 20, 100]
},
{ "t": 60, "s": [100, 100, 100] }
],
"ix": 6
}
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ty": "rc",
"d": 1,
"s": { "a": 0, "k": [4.048, 23.999], "ix": 2 },
"p": { "a": 0, "k": [0, 0], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 4 },
"nm": "矩形路径 1",
"mn": "ADBE Vector Shape - Rect",
"hd": false
},
{
"ty": "fl",
"c": { "a": 0, "k": [1, 0.61568627451, 0, 1], "ix": 4 },
"o": { "a": 0, "k": 100, "ix": 5 },
"r": 1,
"bm": 0,
"nm": "填充 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [11.961, -0.001], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "变换"
}
],
"nm": "矩形 1",
"np": 3,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 60,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 2,
"ty": 4,
"nm": "形状图层 3",
"sr": 1,
"ks": {
"o": { "a": 0, "k": 100, "ix": 11 },
"r": { "a": 0, "k": 0, "ix": 10 },
"p": {
"a": 1,
"k": [
{
"i": { "x": 0.833, "y": 0.833 },
"o": { "x": 0.167, "y": 0.167 },
"t": 0,
"s": [14, 12.009, 0],
"to": [0, -0.999, 0],
"ti": [0, 0, 0]
},
{
"i": { "x": 0.833, "y": 0.833 },
"o": { "x": 0.167, "y": 0.167 },
"t": 30,
"s": [14, 6.014, 0],
"to": [0, 0, 0],
"ti": [0, -0.999, 0]
},
{ "t": 60, "s": [14, 12.009, 0] }
],
"ix": 2
},
"a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
"s": {
"a": 1,
"k": [
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 0,
"s": [100, 100, 100]
},
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 30,
"s": [100, 150, 100]
},
{ "t": 60, "s": [100, 100, 100] }
],
"ix": 6
}
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ty": "rc",
"d": 1,
"s": { "a": 0, "k": [3.968, 15.991], "ix": 2 },
"p": { "a": 0, "k": [0, 0], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 4 },
"nm": "矩形路径 1",
"mn": "ADBE Vector Shape - Rect",
"hd": false
},
{
"ty": "fl",
"c": { "a": 0, "k": [1, 0.61568627451, 0, 1], "ix": 4 },
"o": { "a": 0, "k": 100, "ix": 5 },
"r": 1,
"bm": 0,
"nm": "填充 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [4.046, 3.995], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "变换"
}
],
"nm": "矩形 1",
"np": 3,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 60,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 3,
"ty": 4,
"nm": "形状图层 2",
"sr": 1,
"ks": {
"o": { "a": 0, "k": 100, "ix": 11 },
"r": { "a": 0, "k": 0, "ix": 10 },
"p": {
"a": 1,
"k": [
{
"i": { "x": 0.833, "y": 0.833 },
"o": { "x": 0.167, "y": 0.167 },
"t": 0,
"s": [14, 12.02, 0],
"to": [0, 1.398, 0],
"ti": [0, 0, 0]
},
{
"i": { "x": 0.833, "y": 0.833 },
"o": { "x": 0.167, "y": 0.167 },
"t": 30,
"s": [14, 20.406, 0],
"to": [0, 0, 0],
"ti": [0, 1.398, 0]
},
{ "t": 60, "s": [14, 12.02, 0] }
],
"ix": 2
},
"a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
"s": {
"a": 1,
"k": [
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 0,
"s": [100, 100, 100]
},
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 30,
"s": [100, 30, 100]
},
{ "t": 60, "s": [100, 100, 100] }
],
"ix": 6
}
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ty": "rc",
"d": 1,
"s": { "a": 0, "k": [4, 20], "ix": 2 },
"p": { "a": 0, "k": [0, 0], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 4 },
"nm": "矩形路径 1",
"mn": "ADBE Vector Shape - Rect",
"hd": false
},
{
"ty": "fl",
"c": { "a": 0, "k": [1, 0.61568627451, 0, 1], "ix": 4 },
"o": { "a": 0, "k": 100, "ix": 5 },
"r": 1,
"bm": 0,
"nm": "填充 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [-4.039, 1.98], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "变换"
}
],
"nm": "矩形 1",
"np": 3,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 60,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 4,
"ty": 4,
"nm": "形状图层 1",
"sr": 1,
"ks": {
"o": { "a": 0, "k": 100, "ix": 11 },
"r": { "a": 0, "k": 0, "ix": 10 },
"p": {
"a": 1,
"k": [
{
"i": { "x": 0.833, "y": 0.833 },
"o": { "x": 0.167, "y": 0.167 },
"t": 0,
"s": [14.061, 16.825, 0],
"to": [0, -1.794, 0],
"ti": [0, 0.797, 0]
},
{
"i": { "x": 0.833, "y": 0.833 },
"o": { "x": 0.167, "y": 0.167 },
"t": 30,
"s": [14.061, 6.063, 0],
"to": [0, -0.75, 0],
"ti": [0, -1.432, 0]
},
{
"i": { "x": 0.833, "y": 0.833 },
"o": { "x": 0.167, "y": 0.167 },
"t": 59,
"s": [14.061, 16.825, 0],
"to": [0, 0.09, 0],
"ti": [0, -0.059, 0]
},
{ "t": 60, "s": [14.061, 12.042, 0] }
],
"ix": 2
},
"a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
"s": {
"a": 1,
"k": [
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 0,
"s": [100, 60, 100]
},
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 30,
"s": [100, 150, 100]
},
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 59,
"s": [100, 60, 100]
},
{ "t": 60, "s": [100, 100, 100] }
],
"ix": 6
}
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ty": "rc",
"d": 1,
"s": { "a": 0, "k": [4, 12], "ix": 2 },
"p": { "a": 0, "k": [0, 0], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 4 },
"nm": "矩形路径 1",
"mn": "ADBE Vector Shape - Rect",
"hd": false
},
{
"ty": "fl",
"c": { "a": 0, "k": [1, 0.615686297417, 0, 1], "ix": 4 },
"o": { "a": 0, "k": 100, "ix": 5 },
"r": 1,
"bm": 0,
"nm": "填充 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [-12.061, 5.958], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "变换"
}
],
"nm": "矩形 1",
"np": 3,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 60,
"st": 0,
"bm": 0
}
],
"markers": []
}
