Os eventos de movimento e orientação do dispositivo fornecem acesso ao acelerômetro, giroscópio e bússola integrados em dispositivos móveis.
Esses eventos podem ser usados para muitas finalidades. Em jogos, por exemplo, para controlar a direção ou ação de um personagem. Quando usados com a geolocalização, eles podem ajudar a criar uma navegação passo a passo mais precisa ou fornecer informações sobre um local específico.
Resumo
- Detecta qual lado do dispositivo está para cima e como ele está girando.
- Saiba quando e como responder a eventos de movimento e orientação.
Qual lado está para cima?
Para usar os dados retornados pelos eventos de orientação e movimento do dispositivo, é importante entender os valores fornecidos.
Sistema de coordenadas da Terra
O sistema de coordenadas da Terra, descrito pelos valores X, Y e Z, é alinhado
com base na gravidade e na orientação magnética padrão.
| Sistema de coordenadas | |
|---|---|
X |
Representa a direção leste-oeste (em que o leste é positivo). |
Y |
Representa a direção norte-sul (em que o norte é positivo). |
Z |
Representa a direção para cima e para baixo, perpendicular ao solo (em que para cima é positivo). |
Frame de coordenadas do dispositivo
O frame de coordenadas do dispositivo, descrito pelos valores x, y e z, é alinhado
com base no centro do dispositivo.
| Sistema de coordenadas | |
|---|---|
X |
No plano da tela, positivo para a direita. |
Y |
No plano da tela, positivo em direção ao topo. |
Z |
Perpendicular à tela ou ao teclado, positivo se afastando. |
Em um smartphone ou tablet, a orientação do dispositivo é baseada na orientação típica da tela. Para smartphones e tablets, é baseado no dispositivo estar no modo retrato. Para computadores desktop ou laptops, a orientação é considerada em relação ao teclado.
Dados de rotação
Os dados de rotação são retornados como um ângulo de Euler, representando o número de graus de diferença entre o frame de coordenadas do dispositivo e o frame de coordenadas da Terra.
Alfa
A rotação em torno do eixo z. O valor de alpha é 0° quando a parte de cima
do dispositivo está apontada diretamente para o norte. À medida que o dispositivo é girado no sentido anti-horário,
o valor de alpha aumenta.
Beta
A rotação em torno do eixo x. O valor de beta é 0° quando a parte de cima e a parte de baixo do dispositivo estão equidistantes da superfície da Terra. O valor
aumenta à medida que a parte de cima do dispositivo é inclinada em direção à superfície da Terra.
Gama
A rotação em torno do eixo y. O valor de gamma é 0° quando as bordas esquerda e
direita do dispositivo estão equidistantes da superfície da Terra. O valor
aumenta à medida que o lado direito é inclinado em direção à superfície da Terra.
Orientação do dispositivo
O evento de orientação do dispositivo retorna dados de rotação, que incluem o quanto o dispositivo está inclinado de frente para trás, de lado para lado e, se o smartphone ou laptop tiver uma bússola, a direção para a qual o dispositivo está voltado.
Use com moderação.
Teste o suporte.
Não atualize a interface em todos os eventos de orientação. Em vez disso, sincronize com requestAnimationFrame.
Quando usar eventos de orientação do dispositivo
Há vários usos para eventos de orientação do dispositivo. Os exemplos incluem:
- Atualize um mapa conforme o usuário se move.
- Ajustes sutis na interface, por exemplo, adicionar efeitos de paralaxe.
- Combinado com a geolocalização, pode ser usado para navegação guiada.
Verificar o suporte e detectar eventos
Para detectar DeviceOrientationEvent, primeiro verifique se o navegador oferece suporte aos eventos. Em seguida, anexe um listener de eventos ao objeto window que detecta eventos deviceorientation.
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
Processar os eventos de orientação do dispositivo
O evento de orientação do dispositivo é acionado quando o dispositivo se move ou muda de orientação. Ele retorna dados sobre a diferença entre o dispositivo na posição atual em relação ao marco de coordenadas da Terra.
O evento geralmente retorna três propriedades: alpha,
beta e gamma. No Safari para dispositivos móveis, um parâmetro adicional
webkitCompassHeading
é retornado com a direção da bússola.
Movimento do dispositivo
O evento de orientação do dispositivo retorna dados de rotação, que incluem o quanto o dispositivo está inclinado de frente para trás, de lado para lado e, se o smartphone ou laptop tiver uma bússola, a direção para a qual o dispositivo está voltado.
Use o movimento do dispositivo quando o movimento atual do dispositivo for necessário.
O rotationRate é fornecido em °/s.
acceleration e accelerationWithGravity são fornecidos em m/s2.
Fique atento às diferenças entre as implementações do navegador.
Quando usar eventos de movimento do dispositivo
Há vários usos para os eventos de movimento do dispositivo. Os exemplos incluem:
- Agite o dispositivo para atualizar os dados.
- Em jogos, para fazer com que os personagens pulem ou se movam.
- Para apps de saúde e fitness.
Verificar o suporte e detectar eventos
Para detectar DeviceMotionEvent, primeiro verifique se os eventos são
compatíveis com o navegador. Em seguida, anexe um listener de eventos ao objeto window
que detecta eventos devicemotion.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
Processar os eventos de movimento do dispositivo
O evento de movimento do dispositivo é acionado em um intervalo regular e retorna dados sobre a rotação (em °/segundo) e a aceleração (em m/segundo2) do dispositivo, naquele momento. Alguns dispositivos não têm o hardware para excluir o efeito da gravidade.
O evento retorna quatro propriedades,
accelerationIncludingGravity,
acceleration, que exclui os efeitos da
gravidade, rotationRate e interval.
Por exemplo, vamos analisar um smartphone, que está sobre uma mesa plana, com a tela voltada para cima.
| Estado | Rotação | Aceleração (m/s2) | Aceleração com gravidade (m/s2) |
|---|---|---|---|
| Nenhum movimento detectado | [0, 0, 0] | [0, 0, 0] | [0, 0, 9,8] |
| Movimento para cima em direção ao céu | [0, 0, 0] | [0, 0, 5] | [0, 0, 14,81] |
| Mover apenas para a direita | [0, 0, 0] | [3, 0, 0] | [3, 0, 9,81] |
| Movendo para cima e para a direita | [0, 0, 0] | [5, 0, 5] | [5, 0, 14.81] |
Por outro lado, se o smartphone fosse segurado de modo que a tela ficasse perpendicular ao chão e fosse diretamente visível para o espectador:
| Estado | Rotação | Aceleração (m/s2) | Aceleração com gravidade (m/s2) |
|---|---|---|---|
| Nenhum movimento detectado | [0, 0, 0] | [0, 0, 0] | [0, 9,81, 0] |
| Movimento para cima em direção ao céu | [0, 0, 0] | [0, 5, 0] | [0, 14,81, 0] |
| Mover apenas para a direita | [0, 0, 0] | [3, 0, 0] | [3, 9,81, 0] |
| Movendo para cima e para a direita | [0, 0, 0] | [5, 5, 0] | [5, 14,81, 0] |
Exemplo: calcular a aceleração máxima de um objeto
Uma maneira de usar eventos de movimento do dispositivo é calcular a aceleração máxima de um objeto. Por exemplo, qual é a aceleração máxima de uma pessoa pulando?
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;
}
Depois de tocar no botão "Go!", o usuário é instruído a pular. Durante esse tempo, a página armazena os valores de aceleração máximos (e mínimos) e, após o salto, informa ao usuário a aceleração máxima.