DDR爱好者之家 Design By 杰米
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下才可触发监听事件
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月01日
2024年11月01日
- 英雄联盟s14四强赛在哪举办 英雄联盟s14半决赛举办地点一览
- 《三国志8重制版》全女将一览
- 《英雄联盟》Faker第七次晋级决赛
- 《历史时代3》下载方法
- EchoVocalEnsemble-Innocence(2024)[WAV]
- BuceadorVoltio-Satelite(2024)[24-48]FLAC
- VilmPribyl-SmetanaDalibor(2024)[24Bit-WAV]
- 高通骁龙8至尊版亮相:性能领先A18 Pro达到40%,更有多项首发
- 2024骁龙峰会:自研Oryon CPU登陆手机、汽车丨骁龙8至尊版、骁龙至尊版汽车平台
- 稀有度拉满!首款小马宝莉背卡引爆网络热梗
- 群星《全糖少爷1 影视原声带》[320K/MP3][98.36MB]
- 群星《全糖少爷1 影视原声带》[FLAC/分轨][420.97MB]
- 群星《老家伙 电视原声带》[320K/MP3][71.23MB]
- 林忆莲.1987-灰色【SONY】【WAV+CUE】
- 黎明.1995-天地豪情·一生最爱就是你【宝丽金】【WAV+CUE】