vue数据大屏开发中，为了给页面增加一些动画元素，所以使用ae给页面增加一些动效。效果是重叠的两个卡片向两侧平移部分达到部分重叠的效果。

卡片动画效果

使用

/**
* @Author: 858834013@qq.com
* @Name: lottie
* @Date: 2022-08-13
* @Desc: lottie封装
*/
<template>
  <div ref="lottie" class="lottie">

  </div>
</template>

<script>
import lottie from 'lottie-web'

export default {
  props: {
    width: {
      type: Number,
      value: 100
    },
    status: {
      type: Boolean,
      value: false
    },
    canvasId: {
      type: String,
      default: 'canvasId'
    },
    height: {
      type: Number,
      value: 100
    },
    renderer: {
      type: String,
      value: 'svg'
    },
    path: {
      type: String | Object,
      observer: function observer() {
        this.init();
      }
    }
  },
  mounted() {
    this.intLottie();
  },
  data() {
    return {}
  },
  methods: {
    intLottie() {
      // 渲染主图按钮动画
      let lottieBox = lottie.loadAnimation({
        container: this.$refs.lottie, // 包含动画的dom元素
        renderer: this.renderer, // 渲染出来的是什么格式
        loop: true, // 循环播放
        autoplay: true, // 自动播放
        animationData: this.path
      });
    },
    destory: function destory() {
      if (this.lottie) {
        this.lottie.destroy();
        this.lottie = null;
      }
    }
  },
  onUnload() {
    this.destory();
  }
}
</script>

<style>
.lottie {
  width: 100%;
  height: 100%;
}
</style>

资源下载

链接: 资源下载 提取码: 2mp5