Tutorial sobre el uso de HTML5 para realizar la función de sacudir su teléfono

Comentario: La función de batir en el teléfono móvil es buena. Cómo implementarlo

En la Conferencia de Desarrollador de Baidu, introduje otra característica importante de HTML5, que es la orientación de dispositivos, que encapsula el sensor de dirección y el sensor de movimiento subyacente en el envasado de alto nivel y brinda soporte para eventos DOM. Esta característica incluye dos eventos:

1. Orientación de dispositivos: el evento encapsula los datos del sensor de dirección y puede obtener los datos de dirección en el estado estacionario del teléfono móvil, como el ángulo, la orientación, la orientación, etc. del teléfono móvil.

2. Devicemoción: los eventos encapsulan los datos del sensor de movimiento y pueden obtener datos como la aceleración de movimiento en el estado de movimiento del teléfono móvil.

Usándolo podemos lograr fácilmente funciones interesantes como la detección de gravedad y la brújula, lo que será muy útil en los teléfonos móviles. Por ejemplo, el ejemplo de la bola de detección de gravedad en la versión de prueba de Opera H5 se logra monitoreando el evento de corientación de dispositivos de la API de orientación de dispositivos.

De hecho, también puede ayudarnos a realizar una función muy común y de moda en una aplicación móvil en la página web: agite el teléfono móvil.

Primero vi esta función en Photoshake, y luego muchas aplicaciones, incluido WeChat, han agregado esta función.

Si alguna vez ha hecho el desarrollo de Android o iOS, puede estar muy familiarizado con tales características. Pero a continuación, implementaremos esta funcionalidad por primera vez en la web.

¡Comencemos rápidamente!

DeviceMotionEvent devuelve la información relevante del dispositivo sobre aceleración y rotación. Los datos de aceleración contendrán tres ejes: X, Y y Z (esquemáticamente que se muestran en la figura a continuación, el eje X penetra la pantalla del teléfono móvil o el teclado de la computadora portátil horizontalmente, el eje Y ejecuta la pantalla del teléfono móvil o el teclado de la computadora portátil verticalmente, y el Z-Axis es perpendicular a la pantalla del teléfono móvil o el teclado de la computadora portátil). Debido a que algunos dispositivos pueden no tener hardware para excluir el impacto de la gravedad, el evento devuelve dos propiedades, la aceleración incluye la gravedad y la aceleración, que excluyen el impacto de la gravedad.

Use HTML5 para realizar la función de sacudir su teléfono

Monitoremos los eventos de detección de movimiento primero.

[JavaScript]

if (window.devicemotionEvent) {

Window.AdDeventListener ('DeviceMotion', DeviceMotionHandler, falso);

}

[/JavaScript]

Luego obtenga la aceleración que contiene gravedad.

[JavaScript]

function DeviceMotionHandler (eventData) {

Var aceleración = eventData.AccelationInCludeGravity;

}

[/javascript] </p> <p>

Lo siguiente es sobre cómo calculamos el principio de los usuarios sacudiendo sus teléfonos. Los puntos clave a considerar son los siguientes:

1. La mayoría de los usuarios sacuden sus teléfonos en una dirección para sacudir;

2. Los datos de aceleración en tres direcciones definitivamente cambiarán al temblar;

3. No podemos juzgar mal el comportamiento de movimiento normal de los teléfonos móviles. Piénselo, si su teléfono móvil se coloca en su bolsillo, también tendrá cambios en los datos de aceleración al caminar.

En resumen, debemos calcular las aceleraciones en tres direcciones, medirlas a intervalos, examinar su tasa de cambio durante un período de tiempo fijo y necesitamos determinar un umbral para que active la acción.

Necesitamos definir varias variables para registrar los datos de los ejes históricos X, Y y Z y el tiempo del último desencadenante. El código de implementación del método central es el siguiente:

var shake_threshold = xxx;

var last_update = 0;

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

function DeviceMotionHandler (eventData) {

Var aceleración = eventData.AccelationInCludeGravity;

var Curtime = NewDate (). GetTime ();

if ((Curtime - LastUpdate) & gt; 100) {

var difftime = Curtime -last_update;

last_update = Curtime;

x = aceleración.x;

y = aceleración.y;

z = aceleración.z;

VAR SPEED = MATH.ABS (X + Y + Z - LIST_X - LIST_Y - LIST_Z) / DIFFTIME * 10000;

if (speed & gt; shake_threshold) {

alerta ("¡Shaked!");

}

last_x = x;

last_y = y;

last_z = z;

}

}

A partir de esto, hemos completado la función de sacudir el teléfono. ¿No es muy simple?