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

在活动页面的时候,经常会需要实现手机摇一摇功能。用h5怎样来实现呢?我们来看看摇一摇的底层事件。

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;
  }
}

Happy coding 🙂

发表评论

电子邮件地址不会被公开。 必填项已用*标注