vue 数据可视化大屏 项目 开发中,需要一些底座样式来衬托,样式有了又想着添加一点动画元素让底座更生动。一开始的想法是用ae来实现,不过导出为序列帧动画后图片有5M多,只是一个小图标就有5M的话,就有点过了,于是想着用gsap来实现动画元素。
首先是图标增加了一上下循环往复移动的动画效果。
4个点也增加了向上移动的动画效果,并且在上移的过程中逐渐透明。
菱形背景增加了一个放大缩小的动画。 这样这个底座就生动起来了。
动画演示
实现代码
<template>
<div class="dizuo">
<div class="icon" ref="iconImg">
<img class="iconImg" :src="icon" alt="">
</div>
<div class="lingjing2" ref="lingjing">
</div>
<div class="lingjing">
<div class="dot">
<img class="dot1" ref="dot1" src="./assets/dot1.png" alt="">
<img class="dot2" ref="dot2" src="./assets/dot2.png" alt="">
<img class="dot3" ref="dot3" src="./assets/dot3.png" alt="">
<img class="dot4" ref="dot4" src="./assets/dot4.png" alt="">
</div>
</div>
<div class="dizuoBottom"></div>
</div>
</template>
<script>
import Top from '@/components/top/index.vue'
import WOW from "wow.js";
import gsap from 'gsap'
export default {
name: "home",
components: {},
data() {
return {}
},
props: {
icon: {
type: String,
default() {
return '';
}
}
},
computed: {},
mounted() {
gsap.to(this.$refs.iconImg, {
duration: 2, bottom: '58%', yoyo: true, repeat: -1, delay: 0, onComplete: () => {
console.log('动画完成')
}
})
gsap.to(this.$refs.lingjing, {
duration: 1, transform: 'scale(1.05)', yoyo: true, repeat: -1, delay: 0, onComplete: () => {
console.log('动画完成')
}
})
gsap.to(this.$refs.dot1, {
duration: 3, bottom: '100%', opacity: 0, repeat: -1, delay: 0, onComplete: () => {
console.log('动画完成')
}
})
gsap.to(this.$refs.dot2, {
duration: 3, bottom: '100%', opacity: 0, repeat: -1, delay: 1.5, onComplete: () => {
console.log('动画完成')
}
})
gsap.to(this.$refs.dot3, {
duration: 3, bottom: '100%', opacity: 0, repeat: -1, delay: 2.5, onComplete: () => {
console.log('动画完成')
}
})
gsap.to(this.$refs.dot4, {
duration: 3, bottom: '100%', opacity: 0, repeat: -1, delay: 3.5, onComplete: () => {
console.log('动画完成')
}
})
},
methods: {},
}
</script>
<style lang="scss" scoped>
.dizuo {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
align-content: flex-start;
position: relative;
margin-bottom: 60px;
.icon {
width: 144px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
position: absolute;
bottom: 50%;
z-index: 1000;
}
}
.dizuoBottom {
background: url("./assets/dizuoImg.png") no-repeat;
width: 438px;
height: 198px;
margin-top: -50px;
position: relative;
z-index: 0;
}
.lingjing {
background: url("./assets/lingjing2.png") no-repeat;
width: 246px;
height: 215px;
background-size: 100% 100%;
position: relative;
z-index: 10;
}
.lingjing2 {
position: absolute;
background: url("./assets/lingjing.png") no-repeat;
width: 246px;
height: 188px;
background-size: 100% 100%;
bottom: 41%;
z-index: 9;
}
.dot {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1000;
.dot1 {
position: absolute;
left: 10%;
bottom: 0;
}
.dot2 {
position: absolute;
left: 60%;
bottom: 0%;
}
.dot3 {
position: absolute;
left: 60%;
bottom: 0%;
}
.dot4 {
position: absolute;
left: 90%;
bottom: 0%;
}
}
</style>