摇一摇——类似微信摇一摇功能

微信活动页面经常有“摇一摇,拿好礼”,还有拼多多摇现金,摇一摇功能也非常常见。HTML5 提供的 devicemotion 事件封装了设备的运动传感器,提供设备的加速度,还提供设备自转速率。对设备运动状态进行判断,就可以实现“摇一摇”效果。

devicemotion 监听手机加速度变化的事件:

acceleration - 加速度
accelerationIncludingGravity - 重力加速度
rotationRate - 旋转速度
interval - 获取的时间间隔
摇一摇代码示例:

var shake_threshold = 4000; //放一移动的干扰,设置一个临界值
/* 使用之前先检查浏览器是否支持 */
if(window.DeviceMotionEvent){
/* 添加事件 */
window.addEventListener('devicemotion',function(eventData){
var acceleration =eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime-last_update)> 10) {
var diffTime = curTime -last_update;
last_update = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;
if (speed > SHAKE_THRESHOLD) {
alert("摇一摇成功了!"); // Do something
}
}
})
}

posted @ 2022-11-24 16:45  漫步火星  阅读(59)  评论(0编辑  收藏  举报