vue2使用Lottie

news2024/12/22 19:04:02

文章目录

- 学习链接
- 1.安装依赖
- 2.创建lottie组件
- 3.在相对应的页面应用
- 4.相关data.json
- 5.测试效果

学习链接

原文链接：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":[]}