Erfahren Sie in diesem Artikel, wie wir einfach das In-Browser-Gyroskop und den Beschleunigungssensor für den Website-Header verwendet haben JS Republik (unter Handy natürlich) danke an Gyro.js.

Kleine Erinnerung

 
Bevor wir mit den Erläuterungen zu ihrer Verwendung im Browser beginnen, werfen wir einen kurzen Blick darauf, was diese Sensoren sind.
Ihr Handy verwendet die Gyroskop Um seine Orientierung im Raum zu kennen, wird diese Orientierung nach Alpha, Beta und Gamma ausgedrückt, drei Drehwinkel in Grad um die Z-, X- und Y-Achse.Beschleunigungsmesser wird verwendet, um die Bewegungen Ihres Telefons in Metern/Sekunde² zu messen (Beschleunigungsmessung). Kombiniert können diese beiden Sensoren daher die Beschleunigungen der Drehungen des Geräts messen.
 
 

Fall (nicht so) einfach

In HTML5 gibt es zwei APIs zum Abrufen von Messwerten dieser Sensoren: die deviceorientation API und die devicemotion API . Erstere ermittelt die Ausrichtung des Telefons (Alpha, Beta, Gamma), letztere zusätzlich die Bewegungsbeschleunigung. Anfänglich lassen sich alle notwendigen Informationen mit wenigen Zeilen JavaScript abrufen:

window.addEventListener('devicemotion', (eventData) => {
    console.log(`
        Angle Alpha : ${eventData.rotationRate.alpha}
        Angle Beta : ${eventData.rotationRate.beta}
        Angle Gamma : ${eventData.rotationRate.gamma}
        Accélération en X : ${eventData.accelerationIncludingGravity.x}
        Accélération en Y : ${eventData.accelerationIncludingGravity.Y}
        Accélération en Z : ${eventData.accelerationIncludingGravity.Z}
    `);
}, false);

Angesichts der Einfachheit der API erscheint es daher nicht notwendig, irgendeine Bibliothek zu verwenden! Nun, so einfach ist es nicht, denn seine Verwendung erfordert einige Feinheiten, die nicht auf den ersten Blick ersichtlich sind.
Die erste und wahrscheinlich wichtigste ist die Kalibrierung. In der Tat findet der „neutrale“ Zustand Ihrer Sensoren statt, wenn das Telefon stationär ist und flach auf einer horizontalen Oberfläche platziert wird. Die meiste Zeit verwenden Sie Ihr Telefon jedoch im Hochformat, mehr oder weniger mit Blick auf Ihr Gesicht. Es ist daher notwendig, eine Kalibrierung durchzuführen, um zu berücksichtigen, dass die „neutrale“ Position diejenige ist, die das Telefon beim Laden der Seite hat, und der naive Ansatz wäre, einfach eine Subtraktion wie folgt vorzunehmen:

let initialOrientation = null;
window.addEventListener('devicemotion', (eventData) => {
    const r = eventData.rotationRate;
    initialOrientation = initialOrientation || Object.assign({}, r); // first time
    console.log(`
        Angle calibré Alpha : ${r.alpha - initialOrientation.alpha }
        Angle calibré Beta : ${r.beta - initialOrientation.beta}
        Angle calibré Gamma : ${r.gamma -initialOrientation.gamma}
    `);
}, false);

Aber wie gesagt @yvt im Problem Beim Gyro.js-Projekt ist dieser Ansatz falsch!
Er erklärt, dass die Euler-Winkel verwendet, um die Ausrichtung des Telefons anzugeben, können nicht kombiniert werden, wenn sie durch eine einfache Addition oder Subtraktion auf zwei verschiedene Achsen wirken. Und wenn wir diese Manipulation durchführen möchten, ist eine elegante Möglichkeit, dies zu tun, die Verwendung von Quaternionen. Ich lasse Sie die Implementierung der Kalibrierung für die weniger Mathematischen genießen: Führen Sie die Pull-Anfrage zusammen
Gyro.js verwaltet für Sie auch die Anwesenheitserkennung von HTML5-APIs und fügt darüber eine „Pull“-API hinzu, mit der Sie bei Bedarf die letzten bekannten Messungen von den Sensoren abrufen können. Sehr praktische Sache, wenn Sie die verwenden AnfrageAnimationFrame wie wir in der Fortsetzung.

Verwenden von Gyro.js

Gyro.js ist eher ein Skript als eine Bibliothek und wurde von Tom Gallacher entwickelt ; das Hilfsprogramm umfasst nur wenige Methoden und Eigenschaften:

• gyro.frequency = 500 // Periodizität, mit der das Skript den Event-Callback aufruft
• gyro.getOrientation() // gibt die aktuellen Messungen zurück
• gyro.calibrate() // die zurückgegebenen Messungen kalibrieren
• gyro.startTracking(function(o){…}) // starte den periodischen Aufruf des Event-Callbacks
• gyro.stopTracking() // stoppt den periodischen Aufruf des Event-Callbacks
• gyro.hasFeature('devicemotion') // prüft, ob der Browser MozOrientation, Devicemotion oder DeviceOrientation unterstützt
• gyro.getFeatures() // gibt die APIs dieser unterstützten Sensoren zurück

Nach diversen Versuchen erzielten wir die besten Ergebnisse, indem wir nicht den periodischen Callback der Gyro.js-API, sondern ` requestAnimationFrame` verwendeten . Dies ermöglicht eine flüssige Verknüpfung der Bewegung mit der Ausrichtung des Telefons. Eine vereinfachte Implementierung dieses Konzepts sieht folgendermaßen aus:

gyro.stopTracking(); // Stop periodic calls
gyro.calibrate(); // Calibrate measurement during the page loading
const speed = 0.01; // A arbitrary speed ...
let lastTimestamp = null;
const refresh = function(timestamp) {
    if (lastTimestamp !== null) { // execute only if timestamp is valued
        const delay = timestamp - lastTimestamp; // duration since the last call
        const o = gyro.getOrientation(); // retrieves the last measures
        const step = speed * delay;
        // Apply step on the background-position in our example, but
        // you can use directly the angles for a CSS rotation property
        // for instance.
    }
    lastTimestamp = timestamp; // save current timestamp for the next call
    window.requestAnimationFrame(refresh); // call for the next refresh (max 60 times per seconde)
};
window.requestAnimationFrame(refresh); // first call

Ich empfehle dringend, die zurückgegebenen Messungen aufzurunden, da sie sich ständig erheblich ändern.
auch wenn das Telefon steht. Dadurch werden unerwünschte Wackel- oder Bewegungseffekte vermieden.

Das Endergebnis sieht so aus: