共计 5018 个字符,预计需要花费 13 分钟才能阅读完成。
MDN 地址:
https://developer.mozilla.org…
下面为 vue 实现代码
<template>
<div id="Shake">
<van-popup v-model="show">
<div class="ad-box">
<span class="skip-ad" @click="hideAD"> 跳过广告 ({{time}})</span>
<img src="../../../../assets/img/shake/shake_ad.jpg" alt>
</div>
</van-popup>
<div class="shake-page">
<span class="cash-withdrawal-btn"> 提现 </span>
<img
class="shake-img shake-horizontal"
:class="shake?'shake-horizontal-move':''"
src="../../../../assets/img/shake/shake.png"
alt="摇一摇"
@click="shakeImg"
>
</div>
<audio
style="display: none;"
:src="publicDir +'/static/audio/5018.mp3'"ref="musicBox"preload="preload"
controls
></audio>
</div>
</template>
<script>
import {setTimeout} from "timers";
import config from "../../../../utils/config.js";
export default {
name: "Shake",
data() {
return {
time: 5,
show: true,
shake: false,
SHAKE_THRESHOLD: 3000,
last_update: 0,
last_x: 0,
last_y: 0,
last_z: 0,
publicDir: config.publicDir
};
},
mounted() {this.init();
this.countDown();},
methods: {
// 广告倒计时
countDown() {setTimeout(() => {if (this.time < 1) {this.show = false;} else {
this.time--;
this.countDown();}
}, 1000);
},
// 显示广告
showPopup() {this.show = true;},
// 隐藏广告
hideAD() {this.show = false;},
// 开启图片摇动效果
shakeImg() {if (!this.show) {
this.shake = true;
this.$refs.musicBox.play();
window.removeEventListener("devicemotion", this.deviceMotionHandler, false);
setTimeout(() => {
this.shake = false;
this.routerPush("/RedBag");
}, 2000);
}
},
// 路由跳转
routerPush(path, query) {
this.$router.push({
path,
query
});
},
// 初始化摇一摇,添加摇动监听
init() {this.last_update = new Date().getTime();
if (window.DeviceMotionEvent) {
window.addEventListener(
"devicemotion",
this.deviceMotionHandler,
false
);
} else {alert("not support mobile event");
}
},
// 摇一摇事件回调函数
deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if (curTime - this.last_update > 100) {
var diffTime = curTime - this.last_update;
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);
}
44% {transform: translate(-1px, 0) rotate(0);
}
46% {transform: translate(-2px, 0) rotate(0);
}
48% {transform: translate(10px, 0) rotate(0);
}
50% {transform: translate(-8px, 0) rotate(0);
}
52% {transform: translate(-9px, 0) rotate(0);
}
54% {transform: translate(9px, 0) rotate(0);
}
56% {transform: translate(-2px, 0) rotate(0);
}
58% {transform: translate(-5px, 0) rotate(0);
}
60% {transform: translate(2px, 0) rotate(0);
}
62% {transform: translate(-4px, 0) rotate(0);
}
64% {transform: translate(1px, 0) rotate(0);
}
66% {transform: translate(-3px, 0) rotate(0);
}
68% {transform: translate(10px, 0) rotate(0);
}
70% {transform: translate(4px, 0) rotate(0);
}
72% {transform: translate(-6px, 0) rotate(0);
}
74% {transform: translate(-6px, 0) rotate(0);
}
76% {transform: translate(2px, 0) rotate(0);
}
78% {transform: translate(-2px, 0) rotate(0);
}
80% {transform: translate(-6px, 0) rotate(0);
}
82% {transform: translate(-1px, 0) rotate(0);
}
84% {transform: translate(-6px, 0) rotate(0);
}
86% {transform: translate(-5px, 0) rotate(0);
}
88% {transform: translate(-1px, 0) rotate(0);
}
90% {transform: translate(-1px, 0) rotate(0);
}
92% {transform: translate(-1px, 0) rotate(0);
}
94% {transform: translate(-3px, 0) rotate(0);
}
96% {transform: translate(-6px, 0) rotate(0);
}
98% {transform: translate(-6px, 0) rotate(0);
}
0%,
100% {transform: translate(0, 0) rotate(0);
}
}
}
</style>
注意:
iphone 需要在 https 下才可触发监听事件
正文完