免费AI编程助手
在我们使用微信的时不少人会使用微信中摇一摇的功能通过匹配同时在摇一摇的用户进行聊天，那么大家知道这个是怎么实现的吗？那么今天我们就来看看“在html5中是怎么手机摇一摇事件的呢？”这个问题吧！
MDN地址：
https://developer.mozilla.org/zh-CN/docs/Web/API/DeviceMotionEvent/DeviceMotionEvent
下面为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下才可触发监听事件
那么在这么长的一串代码就是有关于“在html5中是怎么手机摇一摇事件的呢？”这个问题的实现方法，那么希望本文的全部内容对大家有所帮助，更多的相关内容都可以在W3Cschool中进行学习。
