最近在做一个2.5效果的 数据可视化大屏 其中有一个效果是一个水罐页面上升,里面带有一个小风扇要一直旋转。
实现思路
风扇旋转我们可以通过css来实现。
页面上升我们可以通过gsap补间动画来实现。
演示实例
实现代码
<template>
<div class="shuixiang">
<img class="fengshan" src="./assets/fengshan.png" alt="">
<img class="yemian" ref="yemian" src="./assets/yemian.png" alt="">
</div>
</template>
<script>
import gsap from 'gsap'
export default {
components: {},
data() {
return {}
},
watch: {},
mounted() {
this.getRun()
},
methods: {
getRun() {
gsap.to(this.$refs.yemian, {
duration: 3, bottom: '70%', delay: 0, onComplete: () => {
console.log('动画完成')
}
})
}
},
}
</script>
<style lang="scss" scoped>
.shuixiang {
background: url("./assets/shuixiang.png") no-repeat;
width: 145px;
height: 282px;
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.yemian {
width: 83px;
height: 51px;
position: absolute;
bottom: 20%;
}
.fengshan {
width: 34px;
height: 35px;
position: absolute;
z-index: 1;
top: 37%;
animation: rotate 6s linear infinite;
}
}
@keyframes rotate {
0% {
transform: rotateZ(0deg); /*从0度开始*/
}
100% {
transform: rotateZ(360deg); /*360度结束*/
}
}
</style>