用 HTML5 实现手机微信摇一摇的功能

在做活动页面的时候，经常会需要实现手机微信摇一摇功能。用 HTML5 怎样来实现呢？我们来看看摇一摇的底层事件。

API

HTML5 的一个重要特性：DeviceOrientation，他将底层的方向传感器和运动传感器进行了高级封装，提供 DOM 事件支持。DeviceOrientation 这个特性包括两种事件：

deviceOrientation：封装方向传感器数据的事件，可以获取手机静止状态下的方向数据，如手机的方位、角度、朝向。
deviceMotion：封装运动传感器数据的事件，获取手机运动状态下的运动加速度等数据

DeviceMotionEvent 返回设备有关于加速度和旋转的相关信息，加速度包含 x、y、z 的数据。该事件有两个属性：

accelerationIncludingGravity（含重力的加速度）和 acceleration（排除重力的加速度）摇一摇就是针对三个方向的加速度进行计算，间隔测量他们，考察它们在固定时间内的变化率，为它定义一个阈值来确定触发动作。

// 监听运动传感事件
if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler, false);
}
// 获取含重力的加速度
function deviceMotionHandler(eventData) {
  var acceleration = eventData.accelerationIncludingGravity;
}

代码实现

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

完整代码记录下：

//运动事件监听
if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler, false);
}

/* 获取加速度信息通过监听上一步获取到的 x, y, z 值在一定时间范围内的变化率，进行设备是否有进行晃动的判断。
而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。*/
var SHAKE_THRESHOLD = 4000;
var last_update = 0;
var x, y, z, last_x = 0,
  last_y = 0,
  last_z = 0;

function deviceMotionHandler(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
    }
    last_x = x;
    last_y = y;
    last_z = z;
  }
}

注意事项

数值相反
使用 acceleration 时，IOS 下数值和安卓的数值刚好相反：
Android：向左移动，x 轴得到一个速度值为 20；向右移动，x 轴得到一个速度值为 -20
IOS：向左移动，x 轴得到一个速度值为 -20；向右移动，x 轴得到一个速度值为 20
HTTPS 限制
在 IOS 11(包括目前的一些安卓机) 之后，如果想要在页面中使用陀螺仪相关的一些事件，必须使用 HTTPS 协议。
权限限制
在 IOS 12.2 之后，用户可以在手机的设置功能中关闭掉“动作与方向访问”。目前为止，开发人员有没有有效的办法直接获取到这一状态。
Happy coding！?