学习链接

原文链接：lottie在vue中的使用

lottie官网：https://lottiefiles.com/

1.安装依赖

npm install lottie-web

2.创建lottie组件

<template><div :style="style" ref="lavContainer"></div>
</template><script>
import lottie from 'lottie-web';export default {props: {options: {type: Object,required: true},height: Number,width: Number,},data () {return {style: {width: this.width ? `${this.width}px` : '100%',height: this.height ? `${this.height}px` : '100%',overflow: 'hidden',margin: '0 auto'}}},mounted () {this.anim = lottie.loadAnimation({container: this.$refs.lavContainer,renderer: 'svg',loop: this.options.loop !== false,autoplay: this.options.autoplay !== false,animationData: this.options.animationData,rendererSettings: this.options.rendererSettings});this.$emit('animCreated', this.anim)}
}
</script>

3.在相对应的页面应用

<!--* @Author: menxiaojin* @Date: 2023-02-11 17:16:08* @LastEditors: menxiaojin* @LastEditTime: 2023-11-02 14:03:41
--><template><div class="out_box" style="height:2000px"><div class="lottie"><lottie :options="defaultOptions" :height="500" :width="500" v-on:animCreated="handleAnimation"/></div></div>
</template><script type="text/ecmascript-6">
import lottie from './lottie.vue';
import * as animationData  from './data1.json';export default {components:{lottie},data(){return {defaultOptions: {animationData: animationData.default},animationSpeed: 1}},methods:{handleAnimation: function (anim) {this.anim = anim;},},//调用方法mounted() {}}
</script><style lang="scss" scoped>.lottie{width: 1000px;height: 700px;border:1px solid #ff0000;position: fixed;top:0px;right:50px;
}</style>

4.相关data.json

{"v":"5.6.10","fr":30,"ip":0,"op":121,"w":76,"h":65,"nm":"预合成 1","ddd":0,"assets":[{"id":"image_0","w":76,"h":65,"u":"","p":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABBCAYAAAB7CUL1AAAACXBIWXMAAAABAAAAAQBPJcTWAAAAJHpUWHRDcmVhdG9yAAAImXNMyU9KVXBMK0ktUnBNS0tNLikGAEF6Bs5qehXFAAAApklEQVR4nO3QQQ3AIADAQIYIhMy/t2GBvsiSOwVNn7Heb3Bs3g74G8MiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDog3kpQHJBodWGwAAAABJRU5ErkJggg==","e":1},{"id":"image_1","w":76,"h":65,"u":"","p":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABBCAYAAAB7CUL1AAAACXBIWXMAAAABAAAAAQBPJcTWAAAAJHpUWHRDcmVhdG9yAAAImXNMyU9KVXBMK0ktUnBNS0tNLikGAEF6Bs5qehXFAAAApklEQVR4nO3QQQ3AIADAQIYIhMy/t2GBvsiSOwVNn7Heb3Bs3g74G8MiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDIsMiwyLDog3kpQHJBodWGwAAAABJRU5ErkJggg==","e":1}],"layers":[{"ddd":0,"ind":1,"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":[17.83,5.078,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":25.946,"s":[61.777,5.078,0],"to":[3.034,0,0],"ti":[0,-3.034,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":31.042,"s":[67.27,10.571,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":54.904,"s":[60.403,50.398,0],"to":[0,3.034,0],"ti":[3.034,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":59.999,"s":[54.91,55.891,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":85.946,"s":[10.964,55.891,0],"to":[-3.034,0,0],"ti":[0,3.034,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":91.042,"s":[5.47,50.398,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":114.904,"s":[12.337,10.571,0],"to":[0,-3.034,0],"ti":[-3.034,0,0]},{"t":120,"s":[17.83,5.078,0]}],"ix":2},"a":{"a":0,"k":[0.781,23.375,0],"ix":1},"s":{"a":0,"k":[20,100,100],"ix":6}},"ao":1,"ef":[{"ty":5,"nm":"残影","np":7,"mn":"ADBE Echo","ix":1,"en":1,"ef":[{"ty":0,"nm":"残影时间（秒）","mn":"ADBE Echo-0001","ix":1,"v":{"a":0,"k":-0.003,"ix":1}},{"ty":0,"nm":"残影数量","mn":"ADBE Echo-0002","ix":2,"v":{"a":0,"k":160,"ix":2}},{"ty":0,"nm":"起始强度","mn":"ADBE Echo-0003","ix":3,"v":{"a":0,"k":1,"ix":3}},{"ty":0,"nm":"衰减","mn":"ADBE Echo-0004","ix":4,"v":{"a":0,"k":0.94,"ix":4}},{"ty":7,"nm":"残影运算符","mn":"ADBE Echo-0005","ix":5,"v":{"a":0,"k":2,"ix":5}}]}],"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[6.031,-0.625],[-6.031,-0.625],[-6.031,0.625],[6.031,0.625]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.337254901961,0.854901960784,1,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":[0.781,23.375],"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":210,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":2,"nm":"矩形 551 拷贝","refId":"image_0","sr":1,"ks":{"o":{"a":0,"k":70.196,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[33.37,55.609,0],"ix":2},"a":{"a":0,"k":[33.37,55.609,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"a","pt":{"a":0,"k":{"i":[[-3.034,0],[0,0],[0,-3.034],[0,0],[3.034,0],[0,0],[0,3.034],[0,0]],"o":[[0,0],[3.034,0],[0,0],[0,3.034],[0,0],[-3.034,0],[0,0],[0,-3.034]],"v":[[17.83,5.078],[61.777,5.078],[67.27,10.571],[60.403,50.398],[54.91,55.891],[10.964,55.891],[5.47,50.398],[12.337,10.571]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"蒙版 1"}],"sy":[{"c":{"a":0,"k":[0,0.607245802879,0.919844090939,1],"ix":5},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[22]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":30,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[22]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":90,"s":[80]},{"t":120,"s":[20]}],"ix":2},"s":{"a":0,"k":13,"ix":11},"r":{"a":0,"k":50,"ix":12},"sr":{"a":0,"k":1,"ix":9},"ch":{"a":0,"k":0,"ix":10},"bm":{"a":0,"k":1,"ix":1},"no":{"a":0,"k":0,"ix":3},"j":{"a":0,"k":0,"ix":13},"ty":4,"nm":"内发光"},{"c":{"a":0,"k":[0,0.732358157635,1,1],"ix":2},"s":{"a":0,"k":1,"ix":3},"ty":0,"nm":"描边"}],"ip":0,"op":210,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":2,"nm":"矩形 551","refId":"image_1","sr":1,"ks":{"o":{"a":0,"k":40,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[38,32.5,0],"ix":2},"a":{"a":0,"k":[38,32.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"a","pt":{"a":0,"k":{"i":[[-3.034,0],[0,0],[0,-3.034],[0,0],[3.034,0],[0,0],[0,3.034],[0,0]],"o":[[0,0],[3.034,0],[0,0],[0,3.034],[0,0],[-3.034,0],[0,0],[0,-3.034]],"v":[[21.313,8.561],[65.26,8.561],[70.753,14.054],[63.887,53.881],[58.393,59.374],[14.447,59.374],[8.953,53.881],[15.82,14.054]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"蒙版 1"}],"sy":[{"c":{"a":0,"k":[0,0.607245802879,0.919844090939,1],"ix":5},"o":{"a":0,"k":22,"ix":2},"s":{"a":0,"k":9,"ix":11},"r":{"a":0,"k":50,"ix":12},"sr":{"a":0,"k":1,"ix":9},"ch":{"a":0,"k":0,"ix":10},"bm":{"a":0,"k":1,"ix":1},"no":{"a":0,"k":0,"ix":3},"j":{"a":0,"k":0,"ix":13},"ty":4,"nm":"内发光"},{"c":{"a":0,"k":[0,0.607245802879,0.919844090939,1],"ix":2},"s":{"a":0,"k":1,"ix":3},"ty":0,"nm":"描边"}],"ip":0,"op":210,"st":0,"bm":0}],"markers":[]}

5.测试效果