Los eventos de movimiento y orientación del dispositivo proporcionan acceso a la acelerómetro, giroscopio y brújula en dispositivos móviles.
Estos eventos se pueden usar para muchos propósitos: en los videojuegos, por ejemplo, para controlar la dirección o acción de un personaje. Cuando se usan con la ubicación geográfica, pueden ayudar a crear una navegación paso a paso más precisa o proporcionar información sobre una ubicación específica.
Resumen
- Detecta qué lado del dispositivo está hacia arriba y cómo rota el dispositivo.
- Descubre cuándo y cómo responder a eventos de movimiento y orientación.
¿Qué extremo está orientado hacia arriba?
Para usar los datos que devuelven los eventos de movimiento y orientación del dispositivo, haz lo siguiente: es importante comprender los valores proporcionados.
Marco de coordenadas de la Tierra
El marco de coordenadas de la Tierra, descrito por los valores X, Y y Z, está alineado
según la gravedad y la orientación magnética estándar.
| Sistema de coordenadas | |
|---|---|
X |
Representa la dirección de este a oeste (donde el este es positivo). |
Y |
Representa la dirección de norte a sur (donde el norte es positivo). |
Z |
Representa la dirección de arriba abajo, en posición perpendicular al suelo (donde lo hacia arriba es positivo). |
Marco de coordenadas del dispositivo
El marco de coordenadas del dispositivo, que se describe por los valores x, y y z, está alineado
según el centro del dispositivo.
| Sistema de coordenadas | |
|---|---|
X |
En el plano de la pantalla, positivo hacia la derecha. |
Y |
En el plano de la pantalla, positivo hacia arriba. |
Z |
Perpendicular a la pantalla o al teclado, con extensión positiva de distancia. |
En un teléfono o tablet, la orientación del dispositivo se basa en la típica orientación de la pantalla. Para teléfonos y tablets, se basa en el dispositivo. estén en modo vertical. En el caso de las computadoras de escritorio o laptops, la orientación es considerada en relación con el teclado.
Datos de rotación
Los datos de rotación se muestran como un ángulo de Euler. que representa el número de grados de diferencia entre las coordenadas del dispositivo y el marco de coordenadas de la Tierra.
Alfa
Es la rotación alrededor del eje z. El valor de alpha es 0° cuando la parte superior de
que el dispositivo apunte directamente hacia el norte. A medida que el dispositivo se rota en sentido contrario a las manecillas del reloj,
aumenta el valor de alpha.
Beta
Es la rotación alrededor del eje x. El valor de beta es 0° cuando las columnas
inferior del dispositivo se encuentran a la misma distancia de la superficie de la Tierra. El valor
aumenta a medida que la parte superior del dispositivo se apunta hacia la superficie de la Tierra.
Gamma
Es la rotación alrededor del eje y. El valor de gamma es 0° cuando la izquierda y
los bordes derechos del dispositivo se encuentran
a la misma distancia de la superficie de la Tierra. El valor
aumenta a medida que la parte derecha se inclina hacia la superficie de la Tierra.
Orientación del dispositivo
El evento de orientación del dispositivo devuelve datos de rotación, que incluyen la cantidad esté inclinado de adelante hacia atrás, de lado a lado y, si el teléfono o la laptop tiene una brújula, la dirección hacia la que está orientado el dispositivo.
Úsalo con moderación.
Prueba la compatibilidad.
No actualices la IU en cada evento de orientación. en su lugar, sincronizar con requestAnimationFrame.
Cuándo usar eventos de orientación del dispositivo
Los eventos de orientación del dispositivo se pueden usar de diferentes maneras. Algunos ejemplos son los siguientes:
- Actualizar un mapa a medida que el usuario se desplaza
- Realizar pequeños ajustes en la IU; por ejemplo, agregar efectos de paralaje
- Combinado con la ubicación geográfica, se puede utilizar para la navegación paso a paso.
Cómo verificar la asistencia y escuchar eventos
Para escuchar DeviceOrientationEvent, primero verifica si el navegador admite los eventos. Luego, adjunta un objeto de escucha de eventos al objeto window que escucha eventos deviceorientation.
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
Cómo controlar los eventos de orientación del dispositivo
El evento de orientación del dispositivo se activa cuando el dispositivo se mueve o cambia. orientación. Muestra datos sobre la diferencia entre el dispositivo en su posición actual en relación con Marco de coordenadas de la Tierra.
Por lo general, el evento muestra tres propiedades: alpha,
beta y gamma. En Mobile Safari, un parámetro adicional
webkitCompassHeading
se devuelve con la orientación según la brújula.
Movimiento del dispositivo
El evento de orientación del dispositivo devuelve datos de rotación, que incluyen la cantidad esté inclinado de adelante hacia atrás, de lado a lado y, si el teléfono o la laptop tiene una brújula, la dirección hacia la que está orientado el dispositivo.
Usa la función Movimiento del dispositivo cuando necesites el movimiento actual.
rotationRate se indica en °/s.
acceleration y accelerationWithGravity se proporcionan en m/s2.
Ten en cuenta las diferencias entre las implementaciones en navegadores.
Cuándo usar los eventos de movimiento del dispositivo
Los eventos de movimiento del dispositivo tienen varios usos. Algunos ejemplos son los siguientes:
- Gesto de sacudir para actualizar los datos
- En los juegos, para hacer que los personajes salten o se muevan.
- Para apps de salud y fitness.
Cómo verificar la asistencia y escuchar eventos
Para escuchar DeviceMotionEvent, primero verifica si los eventos se
compatibles con el navegador. Luego, adjunta un objeto de escucha de eventos a window.
objeto que escucha eventos devicemotion.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
Cómo controlar los eventos de movimiento del dispositivo
El evento de movimiento del dispositivo se activa a intervalos regulares y devuelve datos sobre el rotación (en °/segundo) y aceleración (en m/segundo2) del dispositivo en ese momento. Algunos dispositivos no tienen el hardware correcto para excluir el efecto de la gravedad.
El evento devuelve cuatro propiedades:
accelerationIncludingGravity:
acceleration, que excluye los efectos de
gravedad, rotationRate y interval.
Por ejemplo, miremos un teléfono apoyado sobre una mesa plana, con su la pantalla hacia arriba.
| Estado | Rotación | Aceleración (m/s2) | Aceleración con gravedad (m/s2) |
|---|---|---|---|
| Sin movimiento | [0, 0, 0] | [0, 0, 0] | [0, 0, 9.8] |
| Subiendo hacia el cielo | [0, 0, 0] | [0, 0, 5] | [0, 0, 14.81] |
| Moverse solo hacia la derecha | [0, 0, 0] | [3, 0, 0] | [3, 0, 9.81] |
| Moverse hacia arriba y hacia la derecha | [0, 0, 0] | [5, 0, 5] | [5, 0, 14.81] |
Por el contrario, si el teléfono se sostiene de manera que la pantalla quede perpendicular al y fuera directamente visible para el espectador:
| Estado | Rotación | Aceleración (m/s2) | Aceleración con gravedad (m/s2) |
|---|---|---|---|
| Sin movimiento | [0, 0, 0] | [0, 0, 0] | [0, 9.81, 0] |
| Subiendo hacia el cielo | [0, 0, 0] | [0, 5, 0] | [0, 14.81, 0] |
| Moverse solo hacia la derecha | [0, 0, 0] | [3, 0, 0] | [3, 9.81, 0] |
| Moverse hacia arriba y hacia la derecha | [0, 0, 0] | [5, 5, 0] | [5, 14.81, 0] |
Ejemplo: Cómo calcular la aceleración máxima de un objeto
Una forma de usar los eventos de movimiento del dispositivo es calcular la aceleración máxima de un objeto. Por ejemplo, ¿cuál es la aceleración máxima de una persona saltando?
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;
}
Después de presionar Go! , se le indica al usuario que salte. Durante ese tiempo, la página almacena los valores de aceleración máximos (y mínimos) y, luego de le indica al usuario su aceleración máxima.