Facebook在Mobile Web APP方面一直是担当榜样的大哥形像.近日出的新版在iOS上多了个“摇一摇”(Friendshake)寻找附近友邻功能。与这个功能相关的事件早在iOS4.2的时候就被mobile safari支持了,很早就听到做mobile游戏的朋友用上这个事件了,即是DeviceMotionEvent,下面我们就来讲讲这个事件:

DeviceMotionEvent 会在设备发生有意义的摆动(或运动)时产生.事件对象封装有产生的间距值,旋转率,和设备加速度.

加速度的计算方式是重力和用户产生的两个加速度矢量之和.设备是通过 陀螺仪和加速计来区别这两者的.

使用方法如下:

if ((window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
  document.getElementById("dmEvent").innerHTML = "Not supported on your device."
}
function deviceMotionHandler(eventData) {
  // 捕捉重力加速度
  var acceleration = eventData.accelerationIncludingGravity;

  // 打印加速数据
  var rawAcceleration = "[" +  Math.round(acceleration.x) + ", " +
    Math.round(acceleration.y) + ", " + Math.round(acceleration.z) + "]";

  // Z轴,可知设备朝上或者朝下
  var facingUp = -1;
  if (acceleration.z > 0) {
    facingUp = +1;
  }

  // 根据重力通过 acceleration.x|y 转换得到加速值,
  // 运用重力加速度9.81来计算得到一个百分比然后乘以转换角度90
  var tiltLR = Math.round(((acceleration.x) / 9.81) * -90);
  var tiltFB = Math.round(((acceleration.y + 9.81) / 9.81) * 90 * facingUp);

  // 打印加速度的计算结果
  document.getElementById("moAccel").innerHTML = rawAcceleration;
  document.getElementById("moCalcTiltLR").innerHTML = tiltLR;
  document.getElementById("moCalcTiltFB").innerHTML = tiltFB;

  // 将2D和3D的转换应用到图片上
  var rotation = "rotate(" + tiltLR + "deg) rotate3d(1,0,0, " + (tiltFB) + "deg)";
  document.getElementById("imgLogo").style.webkitTransform = rotation;
}

以上是一个简单的实例,具体用法参看DeviceMotionEvent Class Reference
另外,也可以通过deviceorientation事件来实现近似的功能.
更多:

JavaScript “shake” event in Mobile Safari

USING DEVICE ORIENTATION