Geräteausrichtung und Bewegung

Pete LePage

Bewegungs- und Ausrichtungsereignisse des Geräts ermöglichen Zugriff auf das integrierte Beschleunigungsmesser, Gyroskop und Kompass in Mobilgeräten.

Diese Ereignisse können für viele Zwecke verwendet werden: im Gaming-Bereich, um beispielsweise die Richtung oder Handlung einer Figur. In Verbindung mit der Standortbestimmung können sie eine genauere detaillierte Routenführung zu erstellen oder Informationen an einem bestimmten Ort suchen.

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 Ausrichtungsereignisse reagieren können.

Welches Ziel ist erreicht?

Um die von den Geräteausrichtungs- und Bewegungsereignissen zurückgegebenen Daten zu verwenden, ist es wichtig, die angegebenen Werte zu verstehen.

Earth-Koordinaten-Frame

Der Koordinatenrahmen für die Erde, der durch die Werte X, Y und Z beschrieben wird, ist ausgerichtet. basierend auf der Schwerkraft und der standardmäßigen magnetischen Ausrichtung.

Koordinaten-Frame des Geräts

</ph> <ph type="x-smartling-placeholder">

Der Koordinaten-Frame des Geräts, der durch die Werte x, y und z beschrieben wird, ist ausgerichtet. basierend auf der Mitte des Geräts.

Die Ausrichtung auf einem Smartphone oder Tablet basiert auf der üblichen Ausrichtung des Bildschirms. Bei Smartphones und Tablets sind sie geräteabhängig. im Porträtmodus. Für Desktop-Computer oder Laptops ist die Ausrichtung in Bezug auf die Tastatur berücksichtigt werden.

Rotationsdaten

Rotationsdaten werden als Eulerwinkel zurückgegeben. gibt die Anzahl der Abweichungsgrade zwischen den Gerätekoordinaten zurück und den Koordinatenrahmen für die Erde.

Alpha

</ph> <ph type="x-smartling-placeholder">

Die Drehung um die z-Achse. Der Wert für alpha beträgt 0°, wenn oben im ist das Gerät direkt nach Norden ausgerichtet. Wenn das Gerät gegen den Uhrzeigersinn gedreht wird, steigt der Wert alpha an.

Beta

</ph> <ph type="x-smartling-placeholder">

Die Drehung um die x-Achse. Der Wert für beta beträgt 0°, wenn oben und der Unterseite des Geräts mit gleichem Abstand von der Erdoberfläche entfernt sind. Der Wert nimmt zu, da die Oberseite des Geräts zur Erdoberfläche neigt.

Gamma

</ph> <ph type="x-smartling-placeholder">

Die Drehung um die Y-Achse. Der Wert für gamma beträgt 0°, wenn links und Die rechten Ränder des Geräts haben denselben Abstand zur Erdoberfläche. Der Wert nimmt zu, da die rechte Seite zur Erdoberfläche hin geneigt ist.

Ausrichtung des Geräts

Das Geräteausrichtungsereignis gibt Rotationsdaten zurück, die angeben, wie viel das Gerät mit der Vorderseite nach hinten, seitlich geneigt und, falls das Smartphone oder der Laptop verfügt über einen Kompass, also die Richtung, in die das Gerät zeigt.

Nur sparsam verwenden. Testen Sie, um Unterstützung zu erhalten. Aktualisiere die Benutzeroberfläche nicht bei jedem Ausrichtungsereignis. synchronisieren Sie ihn stattdessen mit requestAnimationFrame.

Wann werden Geräteausrichtungsereignisse verwendet?

Es gibt mehrere Anwendungsfälle für Geräteausrichtungsereignisse. Beispiele:

• Aktualisieren Sie eine Karte, 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.

Unterstützung überprü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 sich ändert Ausrichtung. Sie gibt Daten über den Unterschied zwischen dem Gerät in Position in Bezug auf den Earth-Koordinatenrahmen:

Das Ereignis gibt in der Regel drei Attribute zurück: alpha, beta und gamma In Safari Mobile wird ein zusätzlicher Parameter webkitCompassHeading wird mit der Kompassausrichtung zurückgegeben.

Gerätebewegung

Das Geräteausrichtungsereignis gibt Rotationsdaten zurück, die angeben, wie viel das Gerät mit der Vorderseite nach hinten, seitlich geneigt und, falls das Smartphone oder der Laptop verfügt über einen Kompass, also die Richtung, in die das Gerät zeigt.

Verwende die Bewegung des Geräts, wenn die aktuelle Bewegung des Geräts erforderlich ist. rotationRate wird in °/s angegeben. acceleration und accelerationWithGravity werden in m/s² angegeben. Beachten Sie die Unterschiede zwischen den Browserimplementierungen.

Wann sollten Bewegungsereignisse des Geräts 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, müssen Sie zuerst prüfen, ob die Ereignisse Folgendes sind: die im Browser unterstützt werden. Hängen Sie dann einen Event-Listener an window an. Objekt, das devicemotion-Ereignisse überwacht.

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 Drehung (in °/Sekunde) und Beschleunigung (in m/Sekunde²) des Geräts zu einem bestimmten Zeitpunkt. Einige Geräte haben nicht die erforderliche Hardware um die Wirkung der Schwerkraft auszuschließen.

Das Ereignis gibt vier Eigenschaften zurück: accelerationIncludingGravity, acceleration ohne die Auswirkungen von Schwerkraft, rotationRate und interval.

Sehen wir uns zum Beispiel ein Smartphone an, das auf einem flachen Tisch liegt und dessen Display nach oben zeigen.

Wenn das Smartphone aber so gehalten wird, dass es senkrecht zur und war direkt für den Betrachter sichtbar:

Beispiel: Maximale Beschleunigung eines Objekts berechnen

Eine Möglichkeit, Bewegungsereignisse des Geräts zu nutzen, besteht darin, die maximale Beschleunigung zu berechnen eines Objekts. Wie hoch ist etwa die maximale Beschleunigung einer Person 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;
}

Nachdem Sie auf die Schaltfläche Los werden die Nutzenden aufgefordert, zu springen. Während dieser Zeit werden auf der Seite die maximalen und minimalen Werte für die Beschleunigung gespeichert. und teilt dem Nutzer die maximale Beschleunigung mit.

Feedback