要实现的效果
![要实现的效果](https://i-blog.csdnimg.cn/blog_migrate/5d826d1b5ffbdc8336069eb7e4cb3aa8.png)
- lottie安装
npm install lottie-web
- 在页面上引用
import lottie from 'lottie-web';
- 最终效果
![最终效果](https://i-blog.csdnimg.cn/blog_migrate/26d646f18eda8960515571d324dae195.gif)
- 资源文件
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地址