VUE3.0使用lottie实现动画

要实现的效果

• lottie安装
  npm install lottie-web
• 在页面上引用
  import lottie from 'lottie-web';
• 最终效果
  
• 资源文件
  https://download.csdn.net/download/rui754220732/86400254
• 源码实现

<template>
  <div style="background-color: #4d4d4d; height: 100vh">
    <button class="show-btn" @click="animateShow">显示</button>
    <div v-show="lottieShow" @click="lottieShow = false">
      <div class="diamond-center">
        <div id="diamond-animate">
          <img class="coin-img" src="@/assets/img/img_dia_coins.svg" alt="">
          <p class="diamond-num">+200</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import lottie from 'lottie-web';
import {ref} from 'vue'
import diamondAnimateData from '@/assets/lottie/diamond.json'

const lottieObj = ref(null)
const lottieShow = ref(false)

const animateShow = () => {
  lottieShow.value = true
  if (!lottieObj.value) {
    let element = document.getElementById('diamond-animate')
    lottieObj.value = lottie.loadAnimation({
      container: element,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: diamondAnimateData, // base64的直接使用，无需转换json图片地址
    });
  }
}
</script>

<style lang="scss" scoped>
.show-btn {
  width: 180px;
  height: 40px;
  border: none;
  background-color: #0088ff;
  border-radius: 16px;
  font-size: 22px;
  color: #FFFFFF;
}

.diamond-center {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;

  #diamond-animate {
    width: 268px;
    height: 268px;
    position: relative;
  }
}

.coin-img {
  width: 268px;
  height: 268px;
  position: absolute;
  z-index: 666;
}

.diamond-num {
  position: absolute;
  left: 104px;
  top: 164px;
  font-size: 26px;
  font-weight: bold;
  color: #FFE851;
  line-height: 31px;
  z-index: 667;
}
</style>

lottie

lottie的GITHUB地址
lottie-web的GITHUB地址