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
![Ilustração do sistema de coordenadas do dispositivo](https://web.dev/static/articles/device-orientation/image/illustration-device-coor-9952f2421cc29.png?authuser=19&hl=pt)
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
![Ilustração de Alfa no sistema de coordenadas do dispositivo](https://web.dev/static/articles/device-orientation/image/illustration-alpha-the-9a77d8ab9d7af.png?authuser=19&hl=pt)
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
![ilustração do sistema de coordenadas do dispositivo](https://web.dev/static/articles/device-orientation/image/illustration-device-coor-b7e152c8a2b6d.png?authuser=19&hl=pt)
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
![ilustração do sistema de coordenadas do dispositivo](https://web.dev/static/articles/device-orientation/image/illustration-device-coor-0377d10426e9c.png?authuser=19&hl=pt)
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.