Os eventos de orientação e movimentação do dispositivo dão acesso ao acelerômetro, giroscópio e bússola em dispositivos móveis.
Esses eventos podem ser usados para várias finalidades: nos jogos, por exemplo, para controlar a direção ou ação de um personagem. Quando usados com geolocalização, eles podem ajudam a criar uma navegação guiada mais precisa ou a fornecer informações sobre um local específico.
Resumo
- Detecta que lado do dispositivo está para cima e como ele está girando.
- Saiba quando e como responder a eventos de orientação e movimento.
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 coordenadas da Terra, descrito pelos valores X, Y e Z, está 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 o valor superior é positivo). |
Frame de coordenada do dispositivo
O frame de coordenadas do dispositivo, descrito pelos valores x, y e z, está 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 teclado, extensão positiva embora. |
Em um telefone ou tablet, a orientação do dispositivo é baseada orientação da tela. Em smartphones e tablets, ele é baseado no dispositivo no modo retrato. Para computadores desktop ou laptop, a orientação é considerados em relação ao teclado.
Dados de rotação
Os dados de rotação são retornados como um ângulo de Euler, que representa o número de graus de diferença entre a coordenada do dispositivo e o de coordenadas da Terra.
Alfa
A rotação em torno do eixo z. O valor de alpha é 0° quando a parte superior
o dispositivo estiver apontado diretamente para o norte. Como 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 superior e
inferior do dispositivo estejam equidistantes da superfície terrestre. O valor
aumenta conforme o topo do dispositivo é inclinado em direção à superfície terrestre.
Gama
A rotação em torno do eixo Y. O valor de gamma é 0° quando a esquerda e
as extremidades direitas do dispositivo estão equidistantes da superfície terrestre. O valor
aumenta conforme 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, lado a lado e, se o telefone ou laptop tiver uma bússola, a direção para o qual o dispositivo está voltado.
Use com moderação.
Teste o suporte.
Não atualize a interface em cada evento de orientação. 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.
- Ajustes sutis de interface do usuário, por exemplo, adicionando efeitos de paralaxe.
- Combinado com geolocalização, pode ser usado para navegação guiada.
Buscar suporte e ouvir eventos
Para detectar DeviceOrientationEvent, primeiro confira 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 orientação. retorna dados sobre a diferença entre o dispositivo no sua posição atual em relação ao Frame de coordenada terrestre.
O evento normalmente retorna três propriedades: alpha,
beta e gamma. No Mobile Safari, um parâmetro adicional
webkitCompassHeading
será retornada com o título da bússola.
Movimentaçã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, lado a lado e, se o telefone ou laptop tiver uma bússola, a direção para o qual o dispositivo está voltado.
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.
- Nos jogos, para fazer os personagens pularem ou se moverem.
- Para apps de saúde e fitness.
Buscar suporte e ouvir eventos
Para detectar DeviceMotionEvent, primeiro confira se os eventos estão
compatíveis com o navegador. Em seguida, anexe um listener de eventos ao window
que detecta eventos devicemotion.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
Processar os eventos de movimentação do dispositivo
O evento de movimento do dispositivo é disparado em um intervalo regular e retorna dados sobre o rotação (em °/segundo) e 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 de
gravidade, rotationRate e interval.
Por exemplo, vamos dar uma olhada em um celular, apoiado em uma mesa plana, com tela voltada para cima.
| Estado | Rotação | Aceleração (m/s2) | Aceleração com gravidade (m/s2) |
|---|---|---|---|
| Não está se movendo | [0, 0, 0] | [0, 0, 0] | [0, 0, 9,8] |
| Movendo 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 à e estava diretamente visível para o espectador:
| Estado | Rotação | Aceleração (m/s2) | Aceleração com gravidade (m/s2) |
|---|---|---|---|
| Não está se movendo | [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] |
| Movendo 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 "Ir! o usuário é solicitado a pular. Durante esse período, a página armazena os valores de aceleração máximo (e mínimo) e, após o jump, informa ao usuário a aceleração máxima.