我要评论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下才可触发监听事件
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论