Mit Gerätebewegungs- und ‑orientierungsereignissen können Sie auf den integrierten Beschleunigungsmesser, das Gyroskop und den Kompass von Mobilgeräten zugreifen.
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, genauere detaillierte Navigationsanweisungen zu erstellen oder Informationen zu einem bestimmten Ort bereitzustellen.
Zusammenfassung
- Erkennt, welche Seite des Geräts oben liegt und wie sich das Gerät dreht.
- Hier erfahren Sie, wann und wie Sie auf Bewegungs- und Orientierungsereignisse reagieren können.
Welches Ziel ist erreicht?
Wenn Sie die Daten verwenden möchten, die von den Geräteausrichtungs- und Bewegungsereignissen zurückgegeben werden, ist es wichtig, die angegebenen Werte zu verstehen.
Earth-Koordinaten-Frame
Der Erdkoordinatenrahmen, der durch die Werte X, Y und Z beschrieben wird, ist anhand der Schwerkraft und der Standardmagnetfeldorientierung ausgerichtet.
| Koordinatensystem | |
|---|---|
X |
Die Ost-West-Richtung, wobei Osten positiv ist. |
Y |
Stellt die Nord-Süd-Richtung dar (wobei Norden positiv ist). |
Z |
Stellt die Auf-/Ab-Richtung dar, senkrecht zum Boden (wobei „oben“ positiv ist). |
Gerätekoordinatensystem
Der Koordinaten-Frame des Geräts, der durch die Werte x, y und z beschrieben wird, ist auf die Mitte 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, positiv herausragen. |
Auf einem Smartphone oder Tablet richtet sich die Geräteausrichtung nach der üblichen Ausrichtung des Displays. Bei Smartphones und Tablets muss das Gerät im Hochformat gehalten werden. Bei Desktop-Computern oder Laptops wird die Ausrichtung in Bezug auf die Tastatur berücksichtigt.
Rotationsdaten
Rotationsdaten werden als Eulerwinkel zurückgegeben, der die Anzahl der Abweichungsgrade zwischen dem Gerätekoordinatenframe und dem Earth-Koordinatenframe darstellt.
Alpha
Die Drehung um die Z‑Achse. Der Wert für alpha ist 0°, wenn die Oberseite des Geräts genau nach Norden zeigt. Wenn das Gerät gegen den Uhrzeigersinn gedreht wird, erhöht sich der Wert für alpha.
Beta
Die Drehung um die x-Achse. Der Wert für beta ist 0°, wenn sich die Ober- und Unterseite des Geräts gleich weit von der Erdoberfläche entfernt befinden. Der Wert steigt, wenn die Oberseite des Geräts zur Erdoberfläche geneigt wird.
Gamma
Die Drehung um die Y-Achse. Der Wert für gamma ist 0°, wenn die linken und rechten Ränder des Geräts gleich weit von der Erdoberfläche entfernt sind. Der Wert erhöht sich, wenn die rechte Seite zur Erdoberfläche hin geneigt ist.
Ausrichtung des Geräts
Das Geräteausrichtungsereignis gibt Rotationsdaten zurück, die angeben, wie stark sich das Gerät von vorn nach hinten geneigt und wenn das Smartphone oder der Laptop einen Kompass hat, in welche Richtung das Gerät zeigt.
Verwenden Sie sie sparsam.
Testen Sie, um Unterstützung zu erhalten.
Aktualisiere die Benutzeroberfläche nicht bei jedem Ausrichtungsereignis. Synchronisiere stattdessen mit requestAnimationFrame.
Wann sollten Ereignisse zur Geräteausrichtung verwendet werden?
Es gibt mehrere Anwendungsfälle für Ereignisse zur Geräteausrichtung. Beispiele:
- Eine Karte wird aktualisiert, während sich der Nutzer bewegt.
- Kleine Anpassungen der Benutzeroberfläche, zum Beispiel das Hinzufügen von Parallaxe-Effekten
- In Kombination mit der Standortbestimmung kann es für die detaillierte Routenführung verwendet werden.
Support prüfen und auf Ereignisse warten
Prüfen Sie zuerst, ob der Browser die Ereignisse unterstützt, um auf DeviceOrientationEvent zu warten. Fügen Sie dann einen Event-Listener an das window-Objekt an, das auf deviceorientation-Ereignisse wartet.
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
Geräteausrichtungsereignisse verarbeiten
Das Geräteausrichtungsereignis wird ausgelöst, wenn sich das Gerät bewegt oder die Ausrichtung ändert. Sie gibt Daten über die Differenz zwischen dem Gerät in seiner aktuellen Position in Bezug auf den Earth-Koordinaten-Frame zurück.
Das Ereignis gibt in der Regel drei Properties zurück: alpha, beta und gamma. In Mobile Safari wird der zusätzliche Parameter webkitCompassHeading mit der Kompassausrichtung zurückgegeben.
Gerätebewegung
Das Geräteausrichtungsereignis gibt Rotationsdaten zurück, die angeben, wie stark sich das Gerät von vorn nach hinten geneigt und wenn das Smartphone oder der Laptop einen Kompass hat, in welche Richtung 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 den Browserimplementierungen.
Wann sollten Ereignisse zur Gerätebewegung verwendet werden?
Es gibt mehrere Anwendungsfälle für Gerätebewegungsereignisse. Beispiele:
- Schüttelgeste zum Aktualisieren der Daten
- In Spielen, um Figuren zu springen oder sich zu bewegen.
- Für Gesundheits- und Fitness-Apps
Unterstützung überprüfen und auf Ereignisse warten
Wenn Sie auf DeviceMotionEvent warten möchten, prüfen Sie zuerst, ob die Ereignisse im Browser unterstützt werden. Fügen Sie dem window-Objekt dann einen Listener hinzu, der auf devicemotion-Ereignisse wartet.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
Gerätebewegungsereignisse verarbeiten
Das Bewegungsereignis des Geräts wird in einem regelmäßigen Intervall ausgelöst und gibt Daten über die Drehung (in °/Sekunde) und Beschleunigung (in m/Sekunde2) des Geräts zu diesem Zeitpunkt zurück. Einige Geräte haben nicht die Hardware, um die Auswirkungen der Schwerkraft zu berücksichtigen.
Das Ereignis gibt vier Eigenschaften zurück, accelerationIncludingGravity, acceleration, bei denen die Auswirkungen der Schwerkraft, rotationRate und interval ausgeschlossen sind.
Sehen wir uns zum Beispiel ein Smartphone an, das auf einem flachen Tisch mit dem Display nach oben liegt.
| Status | Rotation | Beschleunigung (m/s2) | Beschleunigung durch die Schwerkraft (m/s2) |
|---|---|---|---|
| Nicht bewegen | [0, 0, 0] | [0, 0, 0] | [0, 0, 9.8] |
| Aufwärts zum Himmel | [0, 0, 0] | [0, 0, 5] | [0, 0, 14,81] |
| Wird nur nach rechts verschoben | [0, 0, 0] | [3, 0, 0] | [3, 0, 9.81] |
| Nach oben und rechts verschoben | [0, 0, 0] | [5, 0, 5] | [5, 0, 14.81] |
Wenn das Smartphone hingegen so gehalten wird, dass das Display senkrecht zum Boden und direkt für den Betrachter sichtbar ist, gilt Folgendes:
| Status | Rotation | Beschleunigung (m/s2) | Beschleunigung durch die Schwerkraft (m/s2) |
|---|---|---|---|
| Nicht bewegen | [0, 0, 0] | [0, 0, 0] | [0, 9.81, 0] |
| 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 und nach rechts bewegen | [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. Wie hoch ist beispielsweise 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 nach dem Sprung teilt sie dem Nutzer die maximale Beschleunigung mit.