HTML5 shakeDeviceMotionEvent 이벤트

devicemotion 정보

html5는 자이로스코프, 나침반, 가속도계를 포함하여 장치의 물리적 방향과 움직임에 대한 정보를 얻기 위한 몇 가지 새로운 DOM 이벤트를 제공합니다.

첫 번째 DOM 이벤트는 **deviceorientation**으로, 로컬 좌표계의 일련의 회전 각도로 표현되는 장치의 물리적 방향 정보를 제공합니다.

두 번째 DOM 이벤트는 devicemotion으로, 장치에 정의된 좌표계의 카디드 좌표로 표현되는 장치의 가속도 정보를 제공합니다. 또한 좌표계에서 장치의 회전 속도를 제공합니다.

세 번째 DOM 이벤트는 **compassneedscalibration**이며, 위 이벤트를 교정하기 위해 나침반 정보를 사용하도록 웹사이트에 알리는 데 사용됩니다.

원리

개발자는 내장된 다양한 센서로부터 수정되지 않은 센싱 데이터를 얻어 기기의 다양한 움직임과 각도 변화를 관찰하거나 반응합니다. 이러한 센서에는 자이로스코프, 가속도계, 자력계(나침반)가 포함됩니다. 가속도계 및 자이로스코프 데이터는 iOS 기기의 세 방향 축을 따른 위치를 설명합니다. 수직으로 배치된 iPhone의 경우 X 방향은 기기의 왼쪽(음수)에서 오른쪽(양수) 방향이며 Y 방향은 다음과 같습니다. 기기의 하단(-)에서 상단(+)까지, Z 방향은 기기의 후면(-)에서 전면(+)까지 화면과 수직입니다.

DeviceMotionEvent는 장치에 의미 있는 스윙(또는 움직임)이 있을 때 생성됩니다. 이벤트 객체는 생성된 피치 값, 회전 속도 및 장치 가속도를 캡슐화합니다.

가속도는 중력과 사용자가 생성한 두 가속도 벡터의 합입니다.

DeviceMotion을 통해 장치의 동작 상태를 판단하면 웹페이지에서 이를 실현하는 데 도움이 됩니다. "흔들기" 대화형 효과 .

이벤트 모니터링

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