基础图片，是由一个手部图和一张箭头图而成
代码开箱即用
<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>
