Ereignisse zur Bewegung und Ausrichtung von Geräten ermöglichen den Zugriff auf den integrierten Beschleunigungsmesser, das Gyroskop und den Kompass in Mobilgeräten.
Diese Ereignisse können für viele Zwecke verwendet werden, z. B. in Spielen, um die Richtung oder Aktion einer Figur zu steuern. In Kombination mit der Standortbestimmung können sie dazu beitragen, eine genauere detaillierte Routenführung zu erstellen oder Informationen zu einem bestimmten Ort bereitzustellen.
Zusammenfassung
- Erkennt, welche Seite des Geräts oben ist und wie sich das Gerät dreht.
- Hier erfahren Sie, wann und wie Sie auf Bewegungs- und Ausrichtungsereignisse reagieren können.
Welches Ende ist oben?
Wenn Sie die von den Ereignissen zur Geräteausrichtung und ‑bewegung zurückgegebenen Daten verwenden möchten, müssen Sie die bereitgestellten Werte verstehen.
Erdkoordinatensystem
Das Erdkoordinatensystem, das durch die Werte X, Y und Z beschrieben wird, wird anhand der Schwerkraft und der magnetischen Standardausrichtung ausgerichtet.
| Koordinatensystem | |
|---|---|
X |
Stellt die Ost-West-Richtung dar (wobei Osten positiv ist). |
Y |
Stellt die Nord-Süd-Richtung dar (wobei Norden positiv ist). |
Z |
Stellt die Aufwärts-Abwärts-Richtung senkrecht zum Boden dar (wobei „aufwärts“ positiv ist). |
Gerätekoordinatensystem
Das Gerätekoordinatensystem, das durch die Werte x, y und z beschrieben wird, ist am Mittelpunkt des Geräts ausgerichtet.
| Koordinatensystem | |
|---|---|
X |
In der Ebene des Bildschirms, positiv nach rechts. |
Y |
In der Ebene des Bildschirms, positiv nach oben. |
Z |
Senkrecht zum Bildschirm oder zur Tastatur, wobei die positiven Werte vom Bildschirm oder der Tastatur weg zeigen. |
Auf einem Smartphone oder Tablet basiert die Ausrichtung des Geräts auf der typischen Ausrichtung des Bildschirms. Bei Smartphones und Tablets wird davon ausgegangen, dass sich das Gerät im Hochformat befindet. Bei Desktop- oder Laptop-Computern wird die Ausrichtung in Bezug auf die Tastatur betrachtet.
Rotationsdaten
Rotationsdaten werden als Eulerwinkel zurückgegeben, der die Anzahl der Gradunterschiede zwischen dem Gerätekoordinatensystem und dem Erdkoordinatensystem darstellt.
Alpha
Die Drehung um die Z-Achse. Der Wert alpha ist 0°, wenn die Oberseite des Geräts direkt nach Norden zeigt. Wenn das Gerät gegen den Uhrzeigersinn gedreht wird, erhöht sich der alpha-Wert.
Beta
Die Rotation um die X-Achse. Der Wert beta ist 0°, wenn die Ober- und Unterseite des Geräts gleich weit von der Erdoberfläche entfernt sind. Der Wert steigt, wenn die Oberseite des Geräts in Richtung der Erdoberfläche geneigt wird.
Gamma
Die Drehung um die Y-Achse. Der Wert von gamma ist 0°, wenn der linke und der rechte Rand des Geräts gleich weit von der Erdoberfläche entfernt sind. Der Wert steigt, wenn die rechte Seite in Richtung der Erdoberfläche geneigt wird.
Ausrichtung des Geräts
Das Ereignis „deviceorientation“ gibt Rotationsdaten zurück, die angeben, wie stark das Gerät nach vorne und hinten sowie zur Seite geneigt ist. Wenn das Smartphone oder der Laptop einen Kompass hat, wird auch die Richtung angegeben, in die das Gerät zeigt.
Mit Bedacht verwenden.
Testen Sie, ob die Funktion unterstützt wird.
Aktualisiere die Benutzeroberfläche nicht bei jedem Ausrichtungsereignis, sondern synchronisiere sie mit requestAnimationFrame.
Wann sollten Ereignisse zur Geräteausrichtung verwendet werden?
Es gibt mehrere Verwendungsmöglichkeiten für Ereignisse zur Geräteausrichtung. Beispiele:
- Karte aktualisieren, wenn sich der Nutzer bewegt
- Dezente UI-Anpassungen, z. B. Parallax-Effekte
- In Kombination mit der Standortbestimmung kann die detaillierte Routenführung verwendet werden.
Unterstützung prüfen und auf Ereignisse warten
Wenn Sie auf DeviceOrientationEvent warten möchten, prüfen Sie zuerst, ob der Browser die Ereignisse unterstützt. Hängen Sie dann einen Event-Listener an das window-Objekt an, der auf deviceorientation-Ereignisse wartet.
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
Ereignisse zur Geräteausrichtung verarbeiten
Das Ereignis „deviceorientation“ wird ausgelöst, wenn sich das Gerät bewegt oder seine Ausrichtung ändert. Sie gibt Daten zur Differenz zwischen dem Gerät in seiner aktuellen Position und dem Erdkoordinatensystem zurück.
Das Ereignis gibt in der Regel drei Properties zurück: alpha, beta und gamma. In Mobile Safari wird mit der Kompassrichtung ein zusätzlicher Parameter webkitCompassHeading zurückgegeben.
Gerätebewegung
Das Ereignis „deviceorientation“ gibt Rotationsdaten zurück, die angeben, wie stark das Gerät nach vorne und hinten sowie zur Seite geneigt ist. Wenn das Smartphone oder der Laptop einen Kompass hat, wird auch die Richtung angegeben, in die das Gerät zeigt.
Verwenden Sie die Gerätebewegung, wenn die aktuelle Bewegung des Geräts benötigt wird.
rotationRate wird in °/s angegeben.
acceleration und accelerationWithGravity werden in m/s2 angegeben.
Beachten Sie die Unterschiede zwischen Browserimplementierungen.
Wann sollten Gerätebewegungsereignisse verwendet werden?
Es gibt mehrere Verwendungsmöglichkeiten für Gerätebewegungsereignisse. Beispiele:
- Schüttelbewegung zum Aktualisieren der Daten.
- In Spielen, um Figuren springen oder sich bewegen zu lassen.
- Für Gesundheits- und Fitness-Apps.
Unterstützung prüfen und auf Ereignisse warten
Wenn Sie auf DeviceMotionEvent warten möchten, prüfen Sie zuerst, ob die Ereignisse im Browser unterstützt werden. Anschließend wird ein Event-Listener an das window-Objekt angehängt, der auf devicemotion-Ereignisse wartet.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
Gerätebewegungsereignisse verarbeiten
Das Ereignis „device motion“ wird in regelmäßigen Abständen ausgelöst und gibt Daten zur Rotation (in °/Sekunde) und Beschleunigung (in m/Sekunde2) des Geräts zu diesem Zeitpunkt zurück. Einige Geräte haben nicht die Hardware, um den Effekt der Schwerkraft auszuschließen.
Das Ereignis gibt vier Attribute zurück: accelerationIncludingGravity, acceleration (ohne die Auswirkungen der Schwerkraft), rotationRate und interval.
Sehen wir uns zum Beispiel ein Smartphone an, das mit dem Display nach oben auf einem flachen Tisch liegt.
| Bundesland | Rotation | Beschleunigung (m/s2) | Beschleunigung mit Schwerkraft (m/s2) |
|---|---|---|---|
| Keine Bewegung | [0, 0, 0] | [0, 0, 0] | [0, 0, 9.8] |
| Bewegung nach oben in Richtung Himmel | [0, 0, 0] | [0, 0, 5] | [0, 0, 14.81] |
| Nur nach rechts bewegen | [0, 0, 0] | [3, 0, 0] | [3, 0, 9.81] |
| Nach oben rechts verschieben | [0, 0, 0] | [5, 0, 5] | [5, 0, 14.81] |
Wenn das Smartphone dagegen so gehalten wird, dass das Display senkrecht zum Boden und für den Betrachter direkt sichtbar ist:
| Bundesland | Rotation | Beschleunigung (m/s2) | Beschleunigung mit Schwerkraft (m/s2) |
|---|---|---|---|
| Keine Bewegung | [0, 0, 0] | [0, 0, 0] | [0, 9.81, 0] |
| Bewegung nach oben in Richtung Himmel | [0, 0, 0] | [0, 5, 0] | [0, 14.81, 0] |
| Nur nach rechts bewegen | [0, 0, 0] | [3, 0, 0] | [3, 9.81, 0] |
| Nach oben rechts verschieben | [0, 0, 0] | [5, 5, 0] | [5, 14.81, 0] |
Beispiel: Maximale Beschleunigung eines Objekts berechnen
Eine Möglichkeit, Gerätebewegungsereignisse zu verwenden, besteht darin, die maximale Beschleunigung eines Objekts zu berechnen. Beispiel: Wie hoch ist die maximale Beschleunigung einer springenden Person?
if (evt.acceleration.x > jumpMax.x) {
jumpMax.x = evt.acceleration.x;
}
if (evt.acceleration.y > jumpMax.y) {
jumpMax.y = evt.acceleration.y;
}
if (evt.acceleration.z > jumpMax.z) {
jumpMax.z = evt.acceleration.z;
}
Nachdem der Nutzer auf die Schaltfläche „Los!“ getippt hat, wird er aufgefordert, zu springen. Während dieser Zeit speichert die Seite die maximalen (und minimalen) Beschleunigungswerte und teilt dem Nutzer nach dem Sprung die maximale Beschleunigung mit.