Gli eventi di movimento e 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 posizione specifica.
Riepilogo
- Rileva quale lato del dispositivo è rivolto verso l'alto e come sta ruotando il dispositivo.
- Scopri quando e come rispondere agli eventi di movimento e orientamento.
Qual è il lato superiore?
Per utilizzare i dati restituiti dagli eventi di orientamento e movimento del dispositivo, è importante comprendere i valori forniti.
Sistema di coordinate della Terra
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 il nord è positivo). |
Z |
Rappresenta la direzione su-giù, perpendicolare al suolo (dove su è positivo). |
Frame di coordinate del dispositivo
Il sistema 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 a destra. |
Y |
Nel piano dello schermo, positivo verso l'alto. |
Z |
Perpendicolare allo schermo o alla tastiera, con valori positivi che si estendono verso l'esterno. |
Su uno smartphone o un tablet, l'orientamento del dispositivo si basa sull'orientamento tipico dello schermo. Per smartphone e tablet, si basa sul dispositivo in modalità Ritratto. Per i computer desktop o laptop, l'orientamento viene considerato in relazione alla tastiera.
Dati di 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 quello della Terra.
Alpha
La rotazione attorno all'asse Z. Il valore alpha è 0° quando la parte superiore
del dispositivo è rivolta direttamente verso 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 quella 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 quando il lato destro viene inclinato verso la superficie della Terra.
Orientamento del dispositivo
L'evento di orientamento del dispositivo restituisce i dati di rotazione, che includono l'inclinazione del dispositivo in avanti e indietro, da un lato all'altro e, se lo smartphone o il laptop ha una bussola, la direzione verso cui è rivolto il dispositivo.
Utilizza questa categoria con attenzione.
Testare il supporto.
Non aggiornare la UI a ogni evento di orientamento, ma sincronizzala con requestAnimationFrame.
Quando utilizzare gli eventi di orientamento del dispositivo
Esistono diversi utilizzi per gli eventi di orientamento del dispositivo. Alcuni esempi sono:
- Aggiorna una mappa mentre l'utente si sposta.
- Piccole modifiche alla UI, ad esempio l'aggiunta di effetti di parallasse.
- In combinazione con la geolocalizzazione, può essere utilizzato per la navigazione passo passo.
Verifica il supporto e ascolta gli eventi
Per ascoltare DeviceOrientationEvent, controlla innanzitutto se il browser supporta gli eventi. Poi, collega un listener di eventi all'oggetto window che ascolta gli eventi deviceorientation.
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
Gestisci 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 attuale rispetto al sistema di coordinate della Terra.
In genere, l'evento restituisce tre proprietà: alpha,
beta e gamma. Su Safari per dispositivi mobili, 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 l'inclinazione del dispositivo in avanti e indietro, da un lato all'altro e, se lo smartphone o il laptop ha una bussola, la direzione verso cui è rivolto il dispositivo.
Utilizza il movimento del dispositivo quando è necessario il movimento corrente del dispositivo.
rotationRate è fornito in °/sec.
acceleration e accelerationWithGravity sono forniti in m/sec2.
Tieni presente le differenze tra le implementazioni dei browser.
Quando utilizzare gli eventi di movimento del dispositivo
Esistono diversi utilizzi per gli eventi di movimento del dispositivo. Alcuni esempi sono:
- Scuotimento per aggiornare i dati.
- Nei giochi, per far saltare o muovere i personaggi.
- Per le app per la salute e il fitness.
Verifica il supporto e ascolta gli eventi
Per ascoltare DeviceMotionEvent, controlla innanzitutto se gli eventi sono supportati nel browser. Poi, collega un listener di eventi all'oggetto window che ascolta gli eventi devicemotion.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
Gestisci gli eventi di movimento del dispositivo
L'evento di movimento del dispositivo viene attivato a intervalli regolari e restituisce i dati sulla rotazione (in °/secondo) e sull'accelerazione (in m/secondo2) del dispositivo in quel momento. Alcuni dispositivi non dispongono dell'hardware per escludere l'effetto della gravità.
L'evento restituisce quattro proprietà:
accelerationIncludingGravity,
acceleration, che esclude gli effetti della
gravità, rotationRate e interval.
Ad esempio, prendiamo uno smartphone appoggiato su un tavolo piatto con lo schermo rivolto verso l'alto.
| Stato | Rotazione | Accelerazione (m/s2) | Accelerazione con gravità (m/s2) |
|---|---|---|---|
| Attività troppo breve | [0, 0, 0] | [0, 0, 0] | [0, 0, 9.8] |
| Spostamento verso l'alto, verso il cielo | [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 a destra | [0, 0, 0] | [5, 0, 5] | [5, 0, 14.81] |
Al contrario, se lo smartphone viene tenuto in modo che lo schermo sia perpendicolare al suolo e sia direttamente visibile allo spettatore:
| Stato | Rotazione | Accelerazione (m/s2) | Accelerazione con gravità (m/s2) |
|---|---|---|---|
| Attività troppo breve | [0, 0, 0] | [0, 0, 0] | [0, 9.81, 0] |
| Spostamento verso l'alto, verso il cielo | [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 a 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 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!, l'utente deve saltare. Durante questo periodo, la pagina memorizza i valori di accelerazione massima (e minima) e, dopo il salto, comunica all'utente l'accelerazione massima.