this.last_update = curTime;
var x = 0,
y = 0,
z = 0;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed =
(Math.abs(x + y + z - this.last_x - this.last_y - this.last_z) /
diffTime) *
10000;
if (Number(speed) > Number(this.SHAKE_THRESHOLD)) {
// 判断为摇一摇动作
this.shakeImg();
}
this.last_x = x;
this.last_y = y;
this.last_z = z;
}
}
}
};
</script>
<style lang="less">
#Shake {
.ad-box {
width: 100vw;
height: 100vh;
img {
width: 100%;
height: 100%;
}
}
.skip-ad {
position: fixed;
top: 20px;
right: 20px;
color: white;
background-color: rgba(0, 0, 0, 0.2);
padding: 10px 20px;
border-radius: 10px;
}
.shake-page {
width: 100vw;
height: 100vh;
background-image: url("../../../../assets/img/shake/shake_bg.jpg");
background-size: 100% 100%;
padding-top: 0.1px;
.shake-img {
display: block;
width: 469px;
height: auto;
margin: auto;
margin-top: 350px;
pointer-events: auto;
}
}
.cash-withdrawal-btn {
color: white;
position: fixed;
border: 1px solid #eee;
padding: 5px 40px;
border-radius: 25px;
top: 30px;
right: 20px;
}
.shake-horizontal-move {
display: inherit;
transform-origin: center center;
animation-play-state: running;
animation-name: shake-horizontal;
animation-duration: 100ms;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes shake-horizontal {
2% {
transform: translate(-7px, 0) rotate(0);
}
4% {
transform: translate(-5px, 0) rotate(0);
}
6% {
transform: translate(4px, 0) rotate(0);
}
8% {
transform: translate(-4px, 0) rotate(0);
}
10% {
transform: translate(-6px, 0) rotate(0);
}
12% {
transform: translate(2px, 0) rotate(0);
}
14% {
transform: translate(-5px, 0) rotate(0);
}
16% {
transform: translate(-3px, 0) rotate(0);
}
18% {
transform: translate(2px, 0) rotate(0);
}
20% {
transform: translate(3px, 0) rotate(0);
}
22% {
transform: translate(-2px, 0) rotate(0);
}
24% {
transform: translate(-3px, 0) rotate(0);
}
26% {
transform: translate(-9px, 0) rotate(0);
}
28% {
transform: translate(2px, 0) rotate(0);
}
30% {
transform: translate(7px, 0) rotate(0);
}
32% {
transform: translate(2px, 0) rotate(0);
}
34% {
transform: translate(0px, 0) rotate(0);
}
36% {
transform: translate(-1px, 0) rotate(0);
}
38% {
transform: translate(6px, 0) rotate(0);
}
40% {
transform: translate(-7px, 0) rotate(0);
}
42% {
transform: translate(0px, 0) rotate(0);
