Gli eventi di movimento e orientamento del dispositivo consentono di accedere all'accelerometro, al giroscopio e alla bussola integrati nei dispositivi mobili.
Questi eventi possono essere utilizzati per vari scopi, ad esempio nei giochi per controllare la direzione o l'azione di un personaggio. Se utilizzati insieme alla geolocalizzazione, possono contribuire a creare una navigazione passo passo più precisa o a fornire informazioni su una località specifica.
Riepilogo
- Rileva il lato del dispositivo sollevato e la modalità di rotazione del dispositivo.
- Scopri quando e come rispondere agli eventi di movimento e orientamento.
Quale lato è?
Per utilizzare i dati restituiti dall'orientamento del dispositivo e dagli eventi di movimento, è importante comprendere i valori forniti.
Riquadro delle coordinate Earth
Il frame delle coordinate terrestri, 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 il nord è positivo). |
Z |
Rappresenta la direzione verso l'alto, perpendicolare al suolo (dove in alto è un valore positivo). |
Frame delle coordinate del dispositivo
Il frame delle 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, con estensione positiva. |
Su smartphone o tablet, l'orientamento del dispositivo si basa sull'orientamento tipico dello schermo. Per smartphone e tablet, è basata sul fatto che il dispositivo è in modalità verticale. Per i computer desktop e laptop, l'orientamento viene considerato in relazione alla tastiera.
Dati rotazione
I dati di rotazione vengono restituiti come un angolo di Eulero, che rappresenta il numero di gradi di differenza tra il frame di coordinate del dispositivo e quello delle coordinate Earth.
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 della Terra.
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 viene inclinato verso la superficie della Terra.
Orientamento del dispositivo
L'evento di orientamento del dispositivo restituisce i dati sulla rotazione, che includono quanto è inclinato sul dispositivo da un lato all'altro e da un lato all'altro e, se lo smartphone o il laptop è dotato di una bussola, dalla direzione in cui è rivolto il dispositivo.
Usa il dispositivo con parsimonia.
Testa l'assistenza.
Non aggiornare la UI a ogni evento di orientamento; sincronizza invece con requestAnimationFrame.
Quando utilizzare gli eventi di orientamento del dispositivo
Gli eventi di orientamento del dispositivo possono essere utilizzati in diversi modi. Ecco alcuni esempi:
- Aggiorna una mappa mentre l'utente si sposta.
- Piccole modifiche all'interfaccia utente, ad esempio l'aggiunta di effetti di parallasse.
- Combinata con la geolocalizzazione, può essere utilizzata per la navigazione passo passo.
Verifica l'assistenza e ascolta gli eventi
Per ascoltare DeviceOrientationEvent, verifica innanzitutto se il browser supporta gli eventi. Quindi, collega un listener di eventi all'oggetto window in ascolto degli 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 l'orientamento. Restituisce dati sulla differenza tra il dispositivo nella sua posizione attuale rispetto al frame delle coordinate Earth.
In genere, l'evento restituisce tre proprietà: alpha, beta e gamma. In Safari per dispositivi mobili, viene restituito un parametro aggiuntivo webkitCompassHeading con l'intestazione della bussola.
Movimento del dispositivo
L'evento di orientamento del dispositivo restituisce i dati sulla rotazione, che includono quanto è inclinato sul dispositivo da un lato all'altro e da un lato all'altro e, se lo smartphone o il laptop è dotato di una bussola, dalla direzione in cui è rivolto il dispositivo.
Usa il movimento del dispositivo per quando è necessario il movimento corrente del dispositivo.
rotationRate è fornito in °/sec.
acceleration e accelerationWithGravity sono forniti in m/sec2.
Fai attenzione alle differenze tra le implementazioni del browser.
Quando utilizzare gli eventi di movimento del dispositivo
Gli eventi di movimento del dispositivo possono essere utilizzati in diversi modi. Ecco alcuni esempi:
- Scuoti per aggiornare i dati.
- Nei giochi, per far saltare o muovere i personaggi.
- Per app per la salute e l'attività fisica.
Verifica l'assistenza e ascolta gli eventi
Per ascoltare DeviceMotionEvent, verifica innanzitutto se gli eventi sono supportati nel browser. Quindi collega un listener di eventi all'oggetto window in ascolto degli eventi devicemotion.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
Gestire gli eventi di movimento del dispositivo
L'evento di movimento del dispositivo si attiva a intervalli regolari e restituisce i dati sulla rotazione (in °/secondo) e sull'accelerazione (in m/secondo2) del dispositivo in quel momento specifico. 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 un telefono sdraiato 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 il cielo | [0, 0, 0] | [0, 0, 5] | [0, 0, 14,81] |
| Spostamento solo a destra | [0, 0, 0] | [3, 0, 0] | [3, 0, 9,81] |
| Spostarsi in alto e a destra | [0, 0, 0] | [5, 0, 5] | [5, 0, 14,81] |
Al contrario, se il telefono fosse tenuto in modo che lo schermo fosse perpendicolare al suolo ed fosse 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 il cielo | [0, 0, 0] | [0, 5, 0] | [0, 14,81, 0] |
| Spostamento solo a destra | [0, 0, 0] | [3, 0, 0] | [3, 9,81, 0] |
| Spostarsi in alto e a destra | [0, 0, 0] | [5, 5, 0] | [5, 14,81, 0] |
Esempio: calcolo dell'accelerazione massima di un oggetto
Un modo per usare gli eventi di 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 l'annuncio. Durante questo periodo, la pagina memorizza i valori di accelerazione massimi (e minimi) e, dopo il salto, indica all'utente la sua accelerazione massima.