Heim > Web-Frontend > H5-Tutorial > Hauptteil

HTML5-ShakeDeviceMotionEvent-Ereignis

大家讲道理
Freigeben: 2016-11-07 11:54:38
Original
1238 Leute haben es durchsucht

Ü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."
}
Nach dem Login kopieren
Schütteln Sie die Demo

var acceleration = eventData.accelerationIncludingGravity;
Nach dem Login kopieren
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;
    }
}
Nach dem Login kopieren

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage