HTML5のshakeDeviceMotionEventイベント

devicemotion について

html5 は、ジャイロスコープ、コンパス、加速度計など、デバイスの物理的な方向と動きに関する情報を取得するためのいくつかの新しい DOM イベントを提供します。

最初の DOM イベントは **deviceorientation** で、ローカル座標系の一連の回転角度として表現される、デバイスの物理的な方向情報を提供します。

2 番目の DOM イベントは **devicemotion** で、デバイスの加速度情報を提供します。これは、デバイス上で定義された座標系のカルディ座標として表されます。また、座標系におけるデバイスの回転速度も提供します。

3 番目の DOM イベントは **compassneedcalibration** で、コンパス情報を使用して上記のイベントを調整するように Web サイトに通知するために使用されます。

原理

開発者は、さまざまな内蔵センサーから変更されていないセンシングデータを取得し、デバイスのさまざまな動きや角度の変化を観察または応答します。これらのセンサーには、ジャイロスコープ、加速度計、磁力計 (コンパス) が含まれます。加速度計とジャイロスコープのデータは、iOS デバイスの 3 つの方向軸に沿った位置を表します。iPhone が垂直に置かれている場合、X 方向はデバイスの左 (負) から右 (正) です。デバイスの底部 (-) から上部 (+) まで、Z 方向はデバイスの背面 (-) から前面 (+) まで画面に垂直です。

DeviceMotionEvent は、デバイスに意味のあるスイング (または動き) があるときに生成されます。イベント オブジェクトには、生成されたピッチ値、回転速度、デバイスの加速度がカプセル化されます。

加速度は、ユーザーによって生成された 2 つの加速度ベクトルによって計算されます。デバイスはジャイロスコープと加速度計を使用してこの 2 つを区別します

DeviceMotion を通じてデバイスの動作ステータスを判断すると、Web ページ上で「シェイク」インタラクティブ効果を実現できます。

イベントモニタリング

if ((window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
  document.getElementById("dmEvent").innerHTML = "Not supported on your device."
}

重力加速度をキャプチャ

var acceleration = eventData.accelerationIncludingGravity;

デモを振る

var SHAKE_THRESHOLD = 800;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;       
function deviceMotionHandler(eventData) {        
  var acceleration =eventData.accelerationIncludingGravity;
  var curTime = new Date().getTime();       
  if ((curTime - last_update)> 300) {                
      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("shaked!");
      }
      last_x = x;
      last_y = y;
      last_z = z;
    }
}

また栗~

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) (1,0,0, " + (tiltFB) + "deg)";
  document.getElementById("imgLogo").style.webkitTransform = rotation;
}