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.展示图
