摇一摇事件封装了设备的运动传感器

Posted 2021-09-11 dituicyqz

微信活动页面经常有“摇一摇，拿好礼”，还有拼多多摇现金，摇一摇功能也非常常见。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
   }           
  }
 })
}
复制代码