Mobile Shake

JavaScript

JavaScript 中提供了 devicemotion 事件,可以用于监听设备各个方向上受到的力(加速度)。有了这个事件,就可以用于判断当前用户是否在进行类似“摇一摇”之类的操作,方便开发基于特定交互的一些功能。

具体来说,devicemotion 事件会提供 accelerationIncludingGravity 数据,作为一个对象分别提供 xyz 三个方向上的加速度。通过不同时间点上加速度值的不同,就可以判断当前用户是否在进行摇晃手机的操作了。

使用 devicemotion 的示例代码如下:

function handler(event) {
  const { x, y, z } = event.accelerationIncludingGravity;
  // do stuff here
}
window.addEventListener('devicemotion', handler);

判断是否在摇晃手机,简单来说,只需要判断当前的各方向加速度之差,是否有至少两个超过了给定的阈值。shake.js 中就使用了这样的方法来判断当前用户是否在摇晃手机,具体的代码可以参考源码

devicemotion 更多的信息,可以参考 MDN