Os eventos de orientação e movimentação do dispositivo oferecem acesso ao acelerômetro, giroscópio e bússola integrados em dispositivos móveis.
Esses eventos podem ser usados para muitos fins. Em jogos, por exemplo, para controlar a direção ou a ação de um personagem. Quando usados com a geolocalização, eles podem ajudar a criar uma navegação curva a curva mais precisa ou fornecer informações sobre um local específico.
Resumo
- Detectar que lado do dispositivo está virado para cima e como o dispositivo está girando.
- Saiba quando e como responder a eventos de orientação e movimentação.
Qual lado está para cima?
Para usar os dados retornados pelos eventos de orientação e movimentação do dispositivo, é importante entender os valores fornecidos.
Frame de coordenada terrestre
O frame de coordenada terrestre, 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 (onde o leste é positivo). |
Y |
Representa a direção norte-sul (onde o norte é positivo). |
Z |
Representa a direção para cima e para baixo, perpendicular ao solo (onde para cima é positivo). |
Frame de coordenada do dispositivo
O frame de coordenada 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 estendendo para longe. |
Em um smartphone ou tablet, a orientação do dispositivo é baseada na orientação típica da tela. Para smartphones e tablets, ela é baseada no dispositivo estando no modo retrato. Para computadores desktop ou laptop, 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 superior
do dispositivo está apontada diretamente para o norte. Conforme 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 superior e
inferior do dispositivo estão equidistantes da superfície da Terra. O valor
aumenta conforme a parte superior do dispositivo é inclinada em direção à superfície terrestre.
Gama
A rotação em torno do eixo Y. O valor de gamma é 0° quando as extremidades esquerda e
direita do dispositivo estão equidistantes da superfície da Terra. O valor
aumenta conforme o lado direito do dispositivo é inclinado em direção à superfície terrestre.
Orientação do dispositivo
O evento de orientação do dispositivo retorna dados de rotação, incluindo quanto o dispositivo está inclinando de frente para trás, lado a lado e, se o telefone ou laptop tiver uma bússola, a direção do dispositivo.
Use com moderação.
Teste por suporte.
Não atualize a interface do usuário em cada evento de orientação. Em vez disso, sincronize com requestAnimationFrame.
Quando usar eventos de orientação do dispositivo
Existem diversos usos para os eventos de orientação do dispositivo. Os exemplos incluem:
- Atualizar um mapa conforme o usuário se movimenta.
- Melhorias sutis na interface, por exemplo, adicionar efeitos de paralaxe.
- Combinados com a geolocalização, podem ser usados para navegação por giro.
Busque suporte e ouça os eventos
Para detectar DeviceOrientationEvent, primeiro verifique se o navegador oferece suporte aos eventos. Em seguida, anexe um listener de eventos ao objeto window para detectar 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 sistema de coordenadas da Terra.
O evento geralmente retorna três propriedades: alpha,
beta e gamma. No Mobile Safari, 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, incluindo quanto o dispositivo está inclinando de frente para trás, lado a lado e, se o telefone ou laptop tiver uma bússola, a direção do dispositivo.
Use a movimentação do dispositivo quando a movimentação atual do dispositivo for necessária.
rotationRate é fornecido em °/s.
acceleration e accelerationWithGravity são fornecidos em m/s2.
Preste atenção às diferenças entre as implementações do navegador.
Quando usar eventos de movimentação do dispositivo
Existem diversos usos para os eventos de movimentação do dispositivo. Os exemplos incluem:
- O gesto de balançar para atualizar dados.
- Em jogos, para fazer o personagem pular ou se mover.
- Para apps de saúde e fitness.
Busque suporte e ouça os eventos
Para detectar DeviceMotionEvent, primeiro verifique se o navegador oferece suporte
aos eventos. Em seguida, anexe um listener de eventos ao objeto window
para detectar eventos devicemotion.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
Processar os eventos de movimento do dispositivo
O evento de movimentação do dispositivo é acionado em um intervalo regular e retorna dados sobre a rotação (em °/segundo) e aceleração (em m/segundo2) do dispositivo, naquele momento específico. 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 deixado sobre uma mesa plana, com a tela virada 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 telefone fosse segurado com a tela perpendicular ao chão e diretamente visível para quem olha:
| 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 forma de usar eventos de movimentação do dispositivo é calculando 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áximo (e mínimo) e, após o salto, informa ao usuário a aceleração máxima.