Tutorial sobre o uso do HTML5 para realizar a função de agitar o telefone

Comentário: A função Shake no telefone celular é boa. Como implementá -lo

Na conferência de desenvolvedores do Baidu, introduzi outra característica importante do HTML5, que é uma orientação para dispositivos, que encapsula o sensor de direção subjacente e o sensor de movimento na embalagem de alto nível e fornece suporte para eventos DOM. Este recurso inclui dois eventos:

1. Devissionário: o evento encapsula os dados do sensor de direção e pode obter os dados de direção no estado estacionário do telefone celular, como ângulo, orientação, orientação etc. do telefone celular.

2. DeviceMotion: Eventos encapsulam dados do sensor de movimento e podem obter dados como aceleração de movimento no estado de movimento do telefone celular.

Usando, podemos facilmente obter funções interessantes, como sensor de gravidade e bússola, que serão muito úteis em telefones celulares. Por exemplo, o exemplo da bola de detecção de gravidade na versão de avaliação da Opera H5 é alcançada monitorando o evento de dispositivo da API de dispositivo de dispositivo.

De fato, também pode nos ajudar a realizar uma função muito comum e elegante em um aplicativo móvel na página da web: agite o telefone celular.

Vi essa função pela primeira vez no Photoshake e, posteriormente, muitos aplicativos, incluindo o WeChat, adicionaram essa função.

Se você já fez o desenvolvimento do Android ou do iOS, pode estar muito familiarizado com esses recursos. Mas abaixo, implementaremos essa funcionalidade pela primeira vez na web.

Vamos começar rapidamente!

DevticemoTionEvent retorna as informações relevantes do dispositivo sobre aceleração e rotação. Os dados de aceleração conterão três eixos: x, y e z (esquematicamente mostrados na figura abaixo, o eixo x penetra na tela do telefone móvel ou no teclado laptop horizontalmente, o eixo y execute a tela do telefone móvel ou o teclado para laptop). Como alguns dispositivos podem não ter hardware para excluir o impacto da gravidade, o evento retorna duas propriedades, acelerar a gravidade e a aceleração, o que exclui o impacto da gravidade.

Use o HTML5 para perceber a função de sacudir seu telefone

Vamos monitorar os eventos de detecção de movimento primeiro.

[JavaScript]

if (window.devicemoTionEvent) {

Window.AddeventListener ('DeviceMotion', DevticemoTionHandler, False);

}

[/JavaScript]

Em seguida, obtenha a aceleração que contém gravidade.

[JavaScript]

função devticemotionHandler (eventData) {

var aceleração = eventData.accelationincludeGravity;

}

[/javascript] </p> <p>

A seguir, é como calculamos o princípio dos usuários agitando seus telefones. Os pontos -chave a serem considerados são os seguintes:

1. A maioria dos usuários sacode seus telefones em uma direção para agitar;

2. Os dados de aceleração em três direções definitivamente mudarão ao tremer;

3. Não podemos julgar mal o comportamento normal do movimento dos telefones celulares. Pense nisso, se o seu telefone celular for colocado no seu bolso, ele também terá alterações nos dados de aceleração ao caminhar.

Em resumo, devemos calcular as acelerações em três direções, medi -las em intervalos, examinar sua taxa de alteração durante um período fixo e precisar determinar um limite para acionar a ação.

Precisamos definir várias variáveis ​​para registrar os dados dos eixos históricos x, y e z e o tempo do último gatilho. O código de implementação do método principal é o seguinte:

var shake_threshold = xxx;

var last_update = 0;

var x, y, z, last_x, last_y, last_z;

função devticemotionHandler (eventData) {

var aceleração = eventData.accelationincludeGravity;

var croTime = newDate (). getTime ();

if ((curtime - lastUpdate) & gt; 100) {

var diffTime = curtime -Last_Update;

last_update = curtime;

x = aceleração.x;

y = aceleração.y;

z = aceleração.z;

var speed = math.abs (x + y + z - last_x - last_y - last_z) / difftime * 10000;

if (speed & gt; shake_threshold) {

alerta ("Shaked!");

}

last_x = x;

last_y = y;

last_z = z;

}

}

A partir disso, concluímos a função de agitar o telefone. Não é muito simples?