HTML5-ShakeDeviceMotionEvent-Ereignis

Über devicemotion

html5 bietet mehrere neue DOM-Ereignisse, um Informationen über die physische Richtung und Bewegung des Geräts zu erhalten, darunter: Gyroskop, Kompass und Beschleunigungsmesser.

Das erste DOM-Ereignis ist **deviceorientation**, das die Informationen zur physischen Ausrichtung des Geräts bereitstellt, ausgedrückt als eine Reihe von Drehwinkeln des lokalen Koordinatensystems.

Das zweite DOM-Ereignis ist devicemotion, das Beschleunigungsinformationen für das Gerät bereitstellt, ausgedrückt als Cardi-Koordinaten im auf dem Gerät definierten Koordinatensystem. Außerdem wird die Rotationsrate des Geräts im Koordinatensystem angegeben.

Das dritte DOM-Ereignis ist **compassneedslibration**, das verwendet wird, um die Website zu benachrichtigen, Kompassinformationen zur Kalibrierung des oben genannten Ereignisses zu verwenden.

Prinzip

Entwickler erhalten unveränderte Sensordaten von verschiedenen eingebauten Sensoren und beobachten oder reagieren auf verschiedene Bewegungen und Winkeländerungen des Geräts. Zu diesen Sensoren gehören Gyroskope, Beschleunigungsmesser und Magnetometer (Kompasse). Die Beschleunigungsmesser- und Gyroskopdaten beschreiben die Position entlang der drei Richtungsachsen des iOS-Geräts. Bei einem vertikal platzierten iPhone verläuft die X-Richtung von links (negativ) nach rechts (positiv) des Geräts und die Y-Richtung ist von der Unterseite (-) des Geräts nach oben ( ), während die Z-Richtung senkrecht zum Bildschirm von der Rückseite (-) des Geräts nach vorne ( ) verläuft.

DeviceMotionEvent wird generiert, wenn das Gerät einen sinnvollen Schwung (oder eine Bewegung) ausführt. Das Ereignisobjekt kapselt den generierten Pitch-Wert, die Rotationsrate und die Beschleunigung des Geräts Die Summe zweier vom Benutzer erzeugter Beschleunigungsvektoren. Das Gerät unterscheidet die beiden durch Gyroskop und Beschleunigungsmesser. Die Beurteilung des Bewegungsstatus des Geräts durch DeviceMotion kann uns dabei helfen, den interaktiven Effekt „Shake“ zu erkennen .

Ereignisüberwachung

Erfassung der Schwerkraftbeschleunigung

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

Schütteln Sie die Demo

var acceleration = eventData.accelerationIncludingGravity;

Noch eine Kastanie~

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