您现在的位置是：网站首页> 编程资料编程资料

基于html5 DeviceOrientation 实现微信摇一摇功能HTML5仿手机微信摇一摇游戏特效源码基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)

2023-10-14 528人已围观

简介微信摇一摇添加好久，很多朋友都在玩，那么基于html5 DeviceOrientation 如何实现微信摇一摇功能的呢？下面由小编把详细内容分享给大家，供大家参考。

在HTML5中，DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间，通过改时间可以获取设备的运动状态、加速度等数据（另还有deviceOrientation事件提供了设备角度、朝向等信息）。

而通过DeviceMotion对设备运动状态的判断，则可以帮助我们在网页上就实现“摇一摇”的交互效果。

运动事件监听

复制代码

代码如下:

if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
alert('你的手机太差了，买个新的吧。');
}

获取加速度信息

“摇一摇”的动作既“一定时间内设备了一定距离”，因此通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，即可进行设备是否有进行晃动的判断。而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。

复制代码

代码如下:

效果如图所示：