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 muitas finalidades. Em jogos, por exemplo, para controlar a direção ou a ação de um personagem. Quando usados com geolocalização, eles podem ajudar a criar uma navegação guiada 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.
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 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 as partes de cima e
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 terrestre.
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 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 o quanto o dispositivo está inclinando de frente para trás, lado a lado e, se o smartphone ou laptop tiver uma bússola, qual é a direção do dispositivo.
Use com moderação.
Teste o suporte.
Não atualize a interface em cada evento de orientação. Em vez disso, sincronize com requestAnimationFrame.
Quando usar eventos de orientação do dispositivo
Existem vários usos para 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 é disparado 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 Safari para dispositivos móveis, um parâmetro adicional webkitCompassHeading é retornado com a direção da bússola.
Movimentaçã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 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.
Esteja ciente das diferenças entre as implementações do navegador.
Quando usar eventos de movimento do dispositivo
Existem vários usos para os eventos de movimento do dispositivo. Os exemplos incluem:
- Gesto de agitar para atualizar dados.
- Em jogos, para fazer o personagem pular ou se mover.
- Para apps de saúde e fitness.
Buscar suporte e ouvir eventos
Para detectar DeviceMotionEvent, primeiro confira se os eventos têm
suporte no navegador. 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 a 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 excluem 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] |
| Movendo 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] |
| Movendo 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] |
Amostra: calcular a aceleração máxima de um objeto
Uma maneira de usar eventos de movimento 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 pulo, informa ao usuário a aceleração máxima.