Gli eventi relativi al movimento e all'orientamento del dispositivo forniscono l'accesso all'accelerometro, al giroscopio e alla bussola integrati nei dispositivi mobili.
Questi eventi possono essere utilizzati per molti scopi; nei giochi, ad esempio, per controllare la direzione o l'azione di un personaggio. Se utilizzati con la geolocalizzazione, possono contribuire a creare una navigazione passo passo più accurata o fornire informazioni su una località specifica.
Riepilogo
- Rileva il lato del dispositivo rivolto verso l'alto e la sua rotazione.
- Scopri quando e come rispondere agli eventi di movimento e orientamento.
Quale parte è rivolta verso l\'alto?
Per utilizzare i dati restituiti dagli eventi di movimento e di orientamento del dispositivo, è importante comprendere i valori forniti.
Sistema di riferimento delle coordinate terrestri
Il sistema di coordinate della Terra, descritto dai valori X, Y e Z, è allineato in base alla gravità e all'orientamento magnetico standard.
| Sistema di coordinate | |
|---|---|
X |
Rappresenta la direzione est-ovest (dove est è positivo). |
Y |
Rappresenta la direzione nord-sud (dove nord è positivo). |
Z |
Rappresenta la direzione verso l'alto, perpendicolare al suolo (dove l'alto è positivo). |
Riquadro di coordinate del dispositivo
Il frame di coordinate del dispositivo, descritto dai valori x, y e z, è allineato in base al centro del dispositivo.
| Sistema di coordinate | |
|---|---|
X |
Nel piano dello schermo, positivo verso destra. |
Y |
Nel piano dello schermo, positivo verso l'alto. |
Z |
Perpendicolare allo schermo o alla tastiera, positivo se si allontana. |
Su uno smartphone o un tablet, l'orientamento del dispositivo si basa sull'orientamento tipico dello schermo. Per smartphone e tablet, si basa sul fatto che il dispositivo sia in modalità Ritratto. Per i computer desktop o laptop, l'orientamento viene considerato in relazione alla tastiera.
Dati sulla rotazione
I dati di rotazione vengono restituiti come angolo di Eulero, che rappresenta il numero di gradi di differenza tra il sistema di coordinate del dispositivo e il sistema di coordinate della Terra.
Alpha
La rotazione attorno all'asse z. Il valore alpha è 0° quando la parte superiore del dispositivo è rivolta direttamente a nord. Quando il dispositivo viene ruotato in senso antiorario,
il valore alpha aumenta.
Beta
La rotazione attorno all'asse x. Il valore beta è 0° quando la parte superiore e inferiore del dispositivo sono equidistanti dalla superficie della Terra. Il valore aumenta man mano che la parte superiore del dispositivo viene inclinata verso la superficie terrestre.
Gamma
La rotazione attorno all'asse Y. Il valore gamma è 0° quando i bordi sinistro e
destro del dispositivo sono equidistanti dalla superficie della Terra. Il valore aumenta man mano che il lato destro si inclina verso la superficie della Terra.
Orientamento del dispositivo
L'evento di orientamento del dispositivo restituisce i dati di rotazione, che includono la quantità di inclinazione del dispositivo in avanti e all'indietro, da un lato all'altro e, se lo smartphone o il laptop ha una bussola, la direzione in cui è rivolto il dispositivo.
Utilizza con parsimonia.
Testare l'assistenza.
Non aggiornare l'interfaccia utente in ogni evento di orientamento, ma sincronizza con requestAnimationFrame.
Quando utilizzare gli eventi di orientamento del dispositivo
Esistono diversi utilizzi per gli eventi di orientamento del dispositivo. Ecco alcuni esempi:
- Aggiornare una mappa man mano che l'utente si sposta.
- Modifiche sottili all'interfaccia utente, ad esempio l'aggiunta di effetti di parallasse.
- Se combinata con la geolocalizzazione, può essere utilizzata per la navigazione passo passo.
Controlla se è disponibile assistenza e ascolta gli eventi
Per ascoltare DeviceOrientationEvent, controlla innanzitutto se il browser supporta gli eventi. Quindi, collega un listener di eventi all'oggetto window che monitora gli eventi deviceorientation.
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
Gestire gli eventi di orientamento del dispositivo
L'evento di orientamento del dispositivo viene attivato quando il dispositivo si sposta o cambia orientamento. Restituisce i dati sulla differenza tra il dispositivo nella sua posizione corrente rispetto al sistema di riferimento di coordinate terrestri.
In genere l'evento restituisce tre proprietà: alpha,
beta e gamma. Su Safari mobile, viene restituito un parametro aggiuntivo
webkitCompassHeading
con la direzione della bussola.
Movimento del dispositivo
L'evento di orientamento del dispositivo restituisce i dati di rotazione, che includono la quantità di inclinazione del dispositivo in avanti e all'indietro, da un lato all'altro e, se lo smartphone o il laptop ha una bussola, la direzione in cui è rivolto il dispositivo.
Utilizza il movimento del dispositivo quando è necessario il movimento corrente del dispositivo.
rotationRate viene fornito in °/sec.
acceleration e accelerationWithGravity vengono forniti in m/sec2.
Tieni presente le differenze tra le implementazioni dei browser.
Quando utilizzare gli eventi relativi al movimento del dispositivo
Esistono diversi utilizzi per gli eventi di movimento del dispositivo. Ecco alcuni esempi:
- Movimento di scuotimento per aggiornare i dati.
- Nei giochi, per far saltare o muovere i personaggi.
- Per le app per la salute e l'attività fisica.
Verifica la presenza di assistenza e ascolta gli eventi
Per ascoltare DeviceMotionEvent, controlla innanzitutto se gli eventi sono supportati nel browser. Quindi, collega un listener di eventi all'window
oggetto che ascolta gli eventi devicemotion.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
Gestire gli eventi di movimento del dispositivo
L'evento relativo al movimento del dispositivo viene attivato a intervalli regolari e restituisce i dati relativi alla rotazione (in °/secondo) e all'accelerazione (in m/secondo2) del dispositivo in quel momento. Alcuni dispositivi non dispongono dell'hardware necessario per escludere l'effetto della gravità.
L'evento restituisce quattro proprietà,
accelerationIncludingGravity,
acceleration, che escludono gli effetti della gravità, rotationRate e interval.
Ad esempio, diamo un'occhiata a uno smartphone appoggiato su un tavolo piatto, con lo schermo rivolto verso l'alto.
| Stato | Rotazione | Accelerazione (m/s2) | Accelerazione con gravità (m/s2) |
|---|---|---|---|
| Non in movimento | [0, 0, 0] | [0, 0, 0] | [0, 0, 9,8] |
| Movimento verso l'alto | [0, 0, 0] | [0, 0, 5] | [0, 0, 14.81] |
| Spostamento solo verso destra | [0, 0, 0] | [3, 0, 0] | [3, 0, 9,81] |
| Spostamento verso l'alto e verso destra | [0, 0, 0] | [5, 0, 5] | [5, 0, 14.81] |
Al contrario, se lo smartphone fosse stato tenuto in modo che lo schermo fosse perpendicolare al suolo ed era direttamente visibile allo spettatore:
| Stato | Rotazione | Accelerazione (m/s2) | Accelerazione con gravità (m/s2) |
|---|---|---|---|
| Non in movimento | [0, 0, 0] | [0, 0, 0] | [0, 9,81, 0] |
| Movimento verso l'alto | [0, 0, 0] | [0, 5, 0] | [0, 14,81, 0] |
| Spostamento solo verso destra | [0, 0, 0] | [3, 0, 0] | [3, 9,81, 0] |
| Spostamento verso l'alto e verso destra | [0, 0, 0] | [5, 5, 0] | [5, 14,81, 0] |
Esempio: calcolo dell'accelerazione massima di un oggetto
Un modo per utilizzare gli eventi relativi al movimento del dispositivo è calcolare l'accelerazione massima di un oggetto. Ad esempio, qual è l'accelerazione massima di una persona che salta?
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;
}
Dopo aver toccato il pulsante Vai!, all'utente viene chiesto di saltare. Durante questo periodo, la pagina memorizza i valori di accelerazione massima (e minima) e, al termine del salto, comunica all'utente l'accelerazione massima.