Gli eventi di movimento e di orientamento del dispositivo forniscono l'accesso allo accelerometro, giroscopio e bussola nei dispositivi mobili.
Questi eventi possono essere usati per vari scopi: nei giochi, ad esempio per controllare la direzione o l'azione di un personaggio. Se utilizzati con la geolocalizzazione, possono aiutano a creare una navigazione passo passo più precisa o a fornire informazioni di una località specifica.
Riepilogo
- Rileva il lato del dispositivo rivolto verso l'alto e il modo in cui il dispositivo sta ruotando.
- Scopri quando e come rispondere agli eventi di movimento e di orientamento.
Qual è il punto giusto?
Per utilizzare i dati restituiti dall'orientamento del dispositivo e dagli eventi di movimento, è importante comprendere i valori forniti.
Cornice coordinate di Earth
Il riquadro delle 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 è positiva). |
Y |
Rappresenta la direzione nord-sud (dove il nord è positivo). |
Z |
Rappresenta la direzione verso il basso, perpendicolare al suolo (dove più in alto è positivo). |
Riquadro 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 di distanza. |
Su uno smartphone o un tablet, l'orientamento del dispositivo è basato sul tipico l'orientamento dello schermo. Per smartphone e tablet, si basa sul dispositivo in modalità verticale. Per i computer desktop o laptop, l'orientamento è 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 la coordinata del dispositivo frame e il frame delle coordinate di Earth.
Alpha
La rotazione attorno all'asse z. Il valore alpha è 0° quando la parte superiore di
Il dispositivo è rivolto direttamente verso nord. Mentre il dispositivo viene ruotato in senso antiorario,
il valore di alpha aumenta.
Beta
La rotazione attorno all'asse x. Il valore di beta è 0° quando le righe superiori e
parte inferiore del dispositivo sono equidistanti dalla superficie della Terra. Il valore
aumenta quando la parte superiore del dispositivo si trova in direzione della superficie della Terra.
Gamma
La rotazione attorno all'asse y. Il valore di gamma è 0° quando i valori di sinistra e
i bordi destri del dispositivo sono equidistanti dalla superficie della Terra. Il valore
aumenta quando 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 quanto il dispositivo è appoggiato da una parte all'altra; inoltre, se lo smartphone o il laptop ha una bussola, la direzione in cui è rivolto il dispositivo.
Utilizzalo con parsimonia.
Testa l'assistenza.
Non aggiornare l'interfaccia utente 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 in base ai movimenti dell'utente.
- Lievi cambiamenti all'interfaccia utente, ad esempio con l'aggiunta di effetti di parallasse.
- Se combinata con la geolocalizzazione, può essere utilizzata per la navigazione passo passo.
Verificare l'assistenza e rimanere in ascolto degli eventi
Per rimanere in ascolto di 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. orientamento. Restituisce i dati sulla differenza tra il dispositivo in la sua posizione corrente rispetto Frame di coordinate della Terra.
In genere l'evento restituisce tre proprietà: alpha,
beta e gamma. In Safari per dispositivi mobili, un parametro aggiuntivo
webkitCompassHeading
viene restituito con l'intestazione della bussola.
Movimento del dispositivo
L'evento di orientamento del dispositivo restituisce i dati di rotazione, che includono quanto il dispositivo è appoggiato da una parte all'altra; inoltre, se lo smartphone o il laptop ha una bussola, la direzione in cui è rivolto il dispositivo.
Utilizza il movimento del dispositivo per quando è necessario il movimento attuale del dispositivo.
Il valore rotationRate è fornito in °/sec.
acceleration e accelerationWithGravity sono forniti in m/sec2.
Fai attenzione alle differenze tra le implementazioni dei browser.
Quando utilizzare gli eventi di movimento del dispositivo
Gli eventi di movimento dei dispositivi possono essere utilizzati in diversi modi. Ecco alcuni esempi:
- Scuoti il gesto per aggiornare i dati.
- Nei giochi, per far saltare o muovere i personaggi.
- Per app per la salute e l'attività fisica.
Verificare l'assistenza e rimanere in ascolto degli eventi
Per rimanere in ascolto di DeviceMotionEvent, verifica innanzitutto se gli eventi sono
supportate nel browser. Quindi, allega un listener di eventi a window
che rimane in ascolto di devicemotion eventi.
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 sull' rotazione (in °/secondo) e accelerazione (in m/secondo)2 dal 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 di
gravità, rotationRate e interval.
Ad esempio, diamo un'occhiata a un telefono, appoggiato su un tavolo piatto, con 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] |
| Salire verso il cielo | [0, 0, 0] | [0, 0, 5] | [0, 0, 14,81] |
| Spostandoti solo a destra | [0, 0, 0] | [3, 0, 0] | [3, 0, 9,81] |
| Spostandoti verso l'alto e verso destra | [0, 0, 0] | [5, 0, 5] | [5, 0, 14.81] |
Al contrario, se lo smartphone fosse tenuto in mano in modo che lo schermo sia perpendicolare al al suolo ed era 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] |
| Salire verso il cielo | [0, 0, 0] | [0, 5, 0] | [0; 14,81; 0] |
| Spostandoti solo a destra | [0, 0, 0] | [3, 0, 0] | [3; 9,81; 0] |
| Spostandoti 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 di movimento del dispositivo è calcolare l'accelerazione massima di un oggetto. Ad esempio, qual è l'accelerazione massima di una persona di salto?
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, nella pagina vengono memorizzati i valori di accelerazione massimi (e minimi) e, dopo il di accelerazione, indica all'utente la massima accelerazione.