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 ist und wie es gedreht wird.
- Hier erfahren Sie, wann und wie Sie auf Bewegungs- und Orientierungsereignisse reagieren können.
Welches Ende ist oben?
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.
Erdkoordinatensystem
Der Erdkoordinatenrahmen, der durch die Werte X, Y und Z beschrieben wird, ist anhand der Schwerkraft und der Standardmagnetfeldorientierung ausgerichtet.
| Koordinatensystem | |
|---|---|
X |
Stellt die Ost-West-Richtung dar (wobei Ost 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 Gerätekoordinatenrahmen, der durch die Werte x, y und z beschrieben wird, ist anhand der 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 nach außen gerichtet. |
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 Computern oder Laptops wird die Ausrichtung in Bezug auf die Tastatur berücksichtigt.
Rotationsdaten
Die Drehungsdaten werden als Eulerwinkel zurückgegeben, der die Anzahl der Grad der Differenz zwischen dem Gerätekoordinatensystem und dem Erdkoordinatensystem 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, steigt der Wert von 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 von gamma ist 0°, wenn die linken und rechten Ränder des Geräts gleich weit von der Erdoberfläche entfernt sind. Der Wert steigt, wenn die rechte Seite zur Erdoberfläche geneigt ist.
Ausrichtung des Geräts
Das Ereignis „deviceOrientation“ gibt Drehungsdaten zurück, darunter, wie stark das Gerät nach vorne oder hinten und 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 sie sparsam.
Testen Sie den Support.
Aktualisieren Sie die Benutzeroberfläche nicht bei jedem Ausrichtungsereignis, sondern synchronisieren Sie sie 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.
- Subtile Änderungen an der Benutzeroberfläche, z. B. das Hinzufügen von Parallaxeneffekten.
- In Kombination mit der Standortbestimmung kann es für die detaillierte Routenführung verwendet werden.
Support prüfen und auf Ereignisse warten
Wenn Sie auf DeviceOrientationEvent warten möchten, prüfen Sie zuerst, ob der Browser die Ereignisse unterstützt. Fügen Sie dem window-Objekt dann einen Event-Listener hinzu, der auf deviceorientation-Ereignisse wartet.
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
Geräteausrichtungsereignisse verarbeiten
Das Ereignis „deviceOrientation“ wird ausgelöst, wenn sich das Gerät bewegt oder die Ausrichtung ändert. Es gibt Daten zur Differenz zwischen dem Gerät an seiner aktuellen Position in Bezug auf den Erdkoordinatenrahmen zurück.
Das Ereignis gibt in der Regel drei Properties zurück: alpha, beta und gamma. In der mobilen Safari-Version wird mit dem Kompass-Steuersatz ein zusätzlicher Parameter webkitCompassHeading zurückgegeben.
Gerätebewegung
Das Ereignis „deviceOrientation“ gibt Drehungsdaten zurück, darunter, wie stark das Gerät nach vorne oder hinten geneigt ist, wie stark es nach links oder rechts geneigt ist und, sofern 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 Browserimplementierungen.
Wann sollten Ereignisse für Gerätebewegungen verwendet werden?
Es gibt mehrere Anwendungsfälle für Gerätebewegungsereignisse. Beispiele:
- Daten durch Schütteln aktualisieren
- In Spielen, um Charaktere zum Springen oder Bewegen zu bewegen.
- Für Gesundheits- und Fitness-Apps
Support 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. Fügen Sie dem window-Objekt dann einen Event-Listener hinzu, der auf devicemotion-Ereignisse wartet.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
Gerätebewegungsereignisse verarbeiten
Das Ereignis „Gerätebewegung“ wird in regelmäßigen Intervallen ausgelöst und gibt Daten zur Drehung (in °/Sekunde) und Beschleunigung (in m/Sekunde2) des Geräts in diesem Moment 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 (ohne Gravitationseffekte), rotationRate und interval.
Sehen wir uns beispielsweise ein Smartphone an, das auf einem flachen Tisch liegt und dessen Display nach oben zeigt.
| Status | Rotation | Beschleunigung (m/s2) | Beschleunigung durch die Schwerkraft (m/s2) |
|---|---|---|---|
| Nicht bewegt | [0, 0, 0] | [0, 0, 0] | [0, 0, 9.8] |
| 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 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 bewegt | [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 rechts verschoben | [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 teilt dem Nutzer nach dem Sprung seine maximale Beschleunigung mit.