Através de informações on -line e minha própria compilação, escrevi uma introdução à função HTML Shake e a usei como um backup técnico.
Pontos -chave do conhecimento
1. DeviceMotionEvent
Este é um evento de detecção de gravidade suportado pelo HTML5. Para a documentação, consulte: http://w3c.github.io/deviceorientation/spec-source-orientation.html
Introdução ao evento:
O dispositivo de dispositivo fornece as informações de direção física do dispositivo, expressas como o ângulo de rotação de uma série de sistemas de coordenadas locais.
O Devticemotion fornece informações de aceleração para o dispositivo, expresso como as coordenadas do Cardi definidas no sistema de coordenadas no dispositivo. Ele também fornece a taxa de rotação do dispositivo no sistema de coordenadas. Se viável, o evento deve fornecer informações de aceleração no centro de gravidade do dispositivo.
O CompassneedScalibration é usado para notificar o site para calibrar os eventos acima usando informações da bússola.
2. Introdução ao evento
window.addeventListener ("DeviceRientation", function (event) {// Process Event.alpha, event.beta e event.gamma}, true);
{alfa: 90, beta: 0, gama: 0};Este é o parâmetro retornado pelo evento de dispositivo. Para obter a bússola apontando, você pode simplesmente usar 360 graus para menos alfa. Se for paralelo à superfície horizontal, sua bússola apontou para (360 - alfa). Se o usuário segurar o dispositivo, a tela estará em um plano vertical e a parte superior da tela aponta para cima. O valor da versão beta é 90, alfa e gama não estão relacionados. O dispositivo portátil do usuário enfrenta o ângulo alfa, a tela está em uma tela vertical e a parte superior da tela aponta para a direita, e suas informações de direção são as seguintes
{alfa: 270- alfa, beta: 0, gama: 90};Registre um evento de receptor para DeviceMotion:
A cópia do código é a seguinte: window.addeventListener ("devticemotion", function (event) {// processamento event.accelation, event.accelerationincludegravity, // event.rotationRate e event.interval}, true);
Coloque o dispositivo na parte superior do veículo com a tela em um plano vertical com o topo voltado para cima e voltado para a parte traseira do veículo. O veículo viaja a uma velocidade de V e vira para a direita com um raio r. O dispositivo registra a situação em que a aceleração e a aceleração que não estão na grava está na posição X, e o dispositivo também registra o valor negativo do rotation rate.gamma:
{Aceleração: {x: v^2/r, y: 0, z: 0}, aceleração recomendadagravidade: {x: v^2/r, y: 0, z: 9.81}, rotationrate: {alfa: 0, beta: 0, gama: -v/r*180/Pi}};Implementação funcional
if (window.devicemoTionEvent) {window.addeventListener ('DeviceMotion', yaoyiyao, false); } var velocidade = 30; // velocidade var x = y = z = lastx = lasty = lastz = 0; função yaoyiyao (eventData) {var aceleração = eventData.accelationincludedGravity; x = aceleração.x; y = aceleração.y; z = aceleração.z; if (math.abs (x-lastx)> velocidade || math.abs (y-lasty)> velocidade || math.abs (z-lastz)> speed) {// simples alerta de código de gatilho Shake (1); } lastx = x; lasty = y; lastz = z; }Primeiro, determine se o navegador suporta este evento.
Yaoyiyao é usado para detectar se o telefone celular está tremendo. Especificamente, é para obter os dados móveis do telefone celular e armazená -los em uma variável externa. Quando o evento de agitação for acionado novamente na próxima vez, determine se a última coordenada de agitação e a coordenada de agitação atual estão em uma variedade de mobilização frequente: math.abs (x-lastx)> velocidade || math.abs (y-lasty)> velocidade || math.abs (z-lastz)> velocidade
Basicamente, se essa condição for atendida, o telefone estará em um estado de agitação e adicione o código de agitação que você deseja executar na instrução IF.
O exposto acima é a idéia de implementar a função HTML5 Shake, e espero que seja útil para o aprendizado de todos.