基础图片,是由一个手部图和一张箭头图而成
代码开箱即用
<template>
<div class="canvas_box" @click="hanldShow">
<div class="hander-icon">
<div class="shou" @animationend="hanldShow"></div>
</div>
</div>
</template>
<script>
let timer = null;
let backgroundBlock = 0; // 当前播放进度
let positionTime = null; // 控制动画
export default {
data() {
return {
point: 0,
isLoading: true,
height: 0,
maxPoint: 4,
isShow: true,
position: {
x: 0,
y: 0,
},
};
},
mounted() {
for (let i = 0; i < this.maxPoint; i++) {
// setTimeout(() => {
this.move(i);
// }, 100);
}
},
methods: {
hanldShow() {
this.isShow = false;
},
move(point) {
if (point === this.point) return;
this.point = point;
const target = point * 20 - 1;
this.movePosition(target > 0 ? target : 0);
},
movePosition(target) {
const height = 240;
let animation = () => {
const tag = target > backgroundBlock ? -1 : 1;
this.position.y += tag * height;
backgroundBlock += -tag * 1;
clearTimeout(positionTime);
if (Math.abs(this.position.y + height * target) > 1) {
positionTime = setTimeout(animation, 60);
}
};
clearTimeout(positionTime);
positionTime = setTimeout(animation, 10);
},
handleStopTimer() {
clearInterval(timer);
timer = null;
},
},
};
</script>
<style lang="scss" scoped>
.hander-icon {
width: r(750);
height: r(680);
border: 1px solid red;
// background: url('https://.png') no-repeat
// center center;
// background-size: 100% auto;
display: flex;
justify-content: center;
align-items: center;
.shou {
width: r(200);
height: r(200);
animation: shou 1.5s linear 120 forwards;
transform-origin: center center;
border: 1px solid;
// background: url('https://.png') no-repeat center center / 100% auto;
}
}
@keyframes shou {
25%,
75% {
transform: translateX(0) rotate(35deg);
}
50% {
transform: translateX(-30%) rotate(20deg);
}
0%,
100% {
transform: translateX(30%) rotate(50deg);
}
}
.canvas_box {
// position: relative;
width: r(750);
height: r(750);
// background: linear-gradient(to bottom, #fbf0dd, #f5e5cc);
border-radius: r(8);
box-sizing: border-box;
position: absolute;
z-index: 10020;
border: 1px solid red;
background-color: navajowhite;
}
</style>