Bewegungs- und Ausrichtungsereignisse von Geräten bieten 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. um die Richtung oder Aktion eines Charakters zu steuern. In Kombination mit der Standortbestimmung können sie dazu beitragen, eine genauere Routenführung zu erstellen oder Informationen zu einem bestimmten Standort bereitzustellen.
Zusammenfassung
- Erkennt, welche Seite des Geräts oben ist und wie es sich dreht.
- Hier erfahren Sie, wann und wie Sie auf Bewegungs- und Ausrichtungsereignisse reagieren sollten.
Welches Ende ist angekommen?
Damit Sie die Daten verwenden können, die von der Geräteausrichtung und von Bewegungsereignissen zurückgegeben werden, ist es wichtig, die angegebenen Werte zu verstehen.
Erdkoordinatenrahmen
Der Rahmen der Erdkoordinaten, der durch die Werte X, Y und Z beschrieben wird, wird basierend auf der Schwerkraft und der standardmäßigen magnetischen Ausrichtung 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ärtsrichtung dar, senkrecht zum Boden (wobei oben positiv ist). |
Gerätekoordinatenrahmen
Der durch die Werte x, y und z beschriebene Gerätekoordinatenrahmen wird basierend auf der Gerätemitte ausgerichtet.
| Koordinatensystem | |
|---|---|
X |
In der Ebene des Bildschirms nach rechts positiv. |
Y |
in der Bildschirmebene positiv nach oben zeigen. |
Z |
Das Bild ist senkrecht zum Bildschirm oder zur Tastatur, und es wird in die Richtung weggestreckt. |
Auf einem Smartphone oder Tablet basiert die Ausrichtung des Geräts auf der typischen Ausrichtung des Bildschirms. Bei Smartphones und Tablets gilt: das Gerät im Hochformat. Bei Desktop-Computern oder Laptops bezieht sich die Ausrichtung auf die Tastatur.
Rotationsdaten
Rotationsdaten werden als Euler-Winkel zurückgegeben, der die Anzahl der Differenzgrade zwischen dem Gerätekoordinatenframe und dem Earth-Koordinatenframe darstellt.
Alpha
Die Drehung um die z-Achse. Der Wert für alpha beträgt 0°, wenn die Oberseite des Geräts direkt nach Norden gerichtet ist. Wenn das Gerät gegen den Uhrzeigersinn gedreht wird, erhöht sich der Wert für alpha.
Beta
Die Rotation um die x-Achse. Der Wert für beta beträgt 0°, wenn die Ober- und Unterseite des Geräts den gleichen Abstand zur Erdoberfläche hat. Der Wert erhöht sich, wenn die Oberseite des Geräts in Richtung Erdoberfläche geneigt wird.
Gamma
Die Drehung um die y-Achse. Der Wert für gamma beträgt 0°, wenn der linke und der rechte Rand des Geräts den gleichen Abstand zur Erdoberfläche haben. Der Wert erhöht sich, wenn die rechte Seite in Richtung Erdoberfläche geneigt wird.
Ausrichtung des Geräts
Das Ereignis zur Geräteausrichtung gibt Rotationsdaten zurück, die Aufschluss darüber geben, wie weit das Gerät von vorne und hinten geneigt ist und wie stark das Smartphone oder Laptop einen Kompass hat.
Verwenden Sie sie sparsam.
Testen Sie, um Unterstützung zu erhalten.
Aktualisiere die Benutzeroberfläche nicht bei jedem Ausrichtungsereignis, sondern synchronisiere stattdessen mit requestAnimationFrame.
Wann Geräteausrichtungsereignisse verwendet werden sollten
Es gibt verschiedene Anwendungsfälle für Geräteausrichtungsereignisse. Beispiele:
- Karte aktualisieren, während sich der Nutzer bewegt.
- Dezente Anpassungen der Benutzeroberfläche, z. B. mit Parallaxe-Effekten
- In Kombination mit der Standortbestimmung kann das Tool für die detaillierte Routenführung verwendet werden.
Support prüfen und auf Ereignisse warten
Um auf DeviceOrientationEvent zu warten, prüfen Sie zuerst, ob der Browser die Ereignisse unterstützt. Hängen Sie dann einen Event-Listener an das Objekt window an, das deviceorientation-Ereignisse überwacht.
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
Geräteausrichtungsereignisse verarbeiten
Das Geräteausrichtungsereignis wird ausgelöst, wenn das Gerät bewegt oder seine Ausrichtung ändert. Es gibt Daten zur Differenz zwischen dem Gerät an seiner aktuellen Position in Bezug auf den Erdkoordinatenframe zurück.
Das Ereignis gibt normalerweise drei Attribute zurück: alpha, beta und gamma. In Safari für Mobilgeräte wird der zusätzliche Parameter webkitCompassHeading mit der Kompassausrichtung zurückgegeben.
Bewegung des Geräts
Das Ereignis zur Geräteausrichtung gibt Rotationsdaten zurück, die Aufschluss darüber geben, wie weit das Gerät von vorne und hinten geneigt ist und wie stark das Smartphone oder Laptop einen Kompass hat.
Gerätebewegungen verwenden, wenn die aktuelle Bewegung des Geräts benötigt wird.
rotationRate wird in °/Sek. angegeben. acceleration und accelerationWithGravity werden in m/Sek.2 angegeben.
Berücksichtigen Sie die Unterschiede zwischen den Browserimplementierungen.
Wann werden Bewegungsereignisse auf Geräten verwendet?
Bewegungsereignisse von Geräten können zu verschiedenen Zwecken eingesetzt werden. Beispiele:
- Schüttelgeste zum Aktualisieren der Daten.
- In Spielen dazu bringen, Charaktere zu springen oder sich 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. Hängen Sie dann einen Event-Listener an das Objekt window an, das devicemotion-Ereignisse überwacht.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
Bewegungsereignisse von Geräten verarbeiten
Das Gerätebewegungsereignis wird in einem regelmäßigen Intervall 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 die Wirkung der Schwerkraft auszuschließen.
Das Ereignis gibt vier Eigenschaften zurück: accelerationIncludingGravity, acceleration, die die Auswirkungen der Schwerkraft ausschließen, rotationRate und interval.
Sehen wir uns zum Beispiel ein Smartphone an, das auf einem flachen Tisch liegt und das Display nach oben zeigt.
| Status | Rotation | Beschleunigung (m/s2) | Beschleunigung mit Schwerkraft (m/s2) |
|---|---|---|---|
| Nicht bewegt | [0, 0, 0] | [0, 0, 0] | [0, 0, 9,8] |
| Sich zum Himmel bewegen | [0, 0, 0] | [0, 0, 5] | [0, 0, 14,81] |
| Bewegt sich nur nach rechts | [0, 0, 0] | [3, 0, 0] | [3, 0, 9,81] |
| Nach oben und nach rechts bewegen | [0, 0, 0] | [5, 0, 5] | [5; 0; 14,81] |
Wenn dagegen das Smartphone so gehalten würde, dass der Bildschirm senkrecht zum Boden war und der Betrachter direkt sehen konnte:
| Status | Rotation | Beschleunigung (m/s2) | Beschleunigung mit Schwerkraft (m/s2) |
|---|---|---|---|
| Nicht bewegt | [0, 0, 0] | [0, 0, 0] | [0, 9,81, 0] |
| Sich zum Himmel bewegen | [0, 0, 0] | [0, 5, 0] | [0, 14,81, 0] |
| Bewegt sich nur nach rechts | [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ätebewegungen zu nutzen, besteht darin, die maximale Beschleunigung eines Objekts zu berechnen. Was ist zum Beispiel die maximale Beschleunigung bei einem Springen?
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;
}
Nach dem Tippen auf die Schaltfläche „Los“ wird der Nutzer 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.