A través de la información en línea y mi propia compilación, escribí una introducción a la función HTML Shake y la usé como copia de seguridad técnica.
Puntos clave del conocimiento
1. DeviceMotionEvent
Este es un evento de detección de gravedad compatible con HTML5. Para la documentación, consulte: http://w3c.github.io/deviceorientation/spec-source-orientation.html
Introducción al evento:
El dispositivo de la dispositivos proporciona la información de dirección física del dispositivo, expresada como el ángulo de rotación de una serie de sistemas de coordenadas locales.
DeviceMotion proporciona información de aceleración para el dispositivo, expresada como las coordenadas Cardi definidas en el sistema de coordenadas en el dispositivo. También proporciona la velocidad de rotación del dispositivo en el sistema de coordenadas. Si es posible, el evento debe proporcionar información de aceleración en el centro de gravedad del dispositivo.
CompassNeedScalibration se utiliza para notificar al sitio web para calibrar los eventos anteriores utilizando la información de la brújula.
2. Introducción al evento
Window.adDeventListener ("DeviceIrientation", function (event) {// Process Event.alpha, event.beta y event.gamma}, true);
{alfa: 90, beta: 0, gamma: 0};Este es el parámetro devuelto por el evento de corientación de dispositivos. Para obtener el apuntado de la brújula, simplemente puede usar 360 grados para menos alfa. Si es paralelo a la superficie horizontal, su brújula apunta a (360 - alfa). Si el usuario sostiene el dispositivo, la pantalla está en un plano vertical y la parte superior de la pantalla apunta hacia arriba. El valor de Beta es 90, el alfa y el gamma no están relacionados. El dispositivo portátil del usuario se enfrenta al ángulo alfa, la pantalla está en una pantalla vertical y la parte superior de la pantalla apunta a la derecha, y su información de dirección es la siguiente
{alfa: 270- alfa, beta: 0, gamma: 90};Registre un receptor para el evento DeviceMotion:
La copia del código es la siguiente: Window.AdDeventListener ("DeviCemotion", function (event) {// procesamiento event.aceleration, event.accelationIncludeGravity, // event.RotationRate y event.INTERVAL}, true);
Coloque el dispositivo en la parte superior del vehículo con la pantalla en un avión vertical con la parte superior hacia arriba y hacia la parte trasera del vehículo. El vehículo viaja a una velocidad de V y gira hacia la derecha con un radio r. El dispositivo registra la situación en la que la aceleración y la aceleración incluyen gravedad están en la posición X, y el dispositivo también registra el valor negativo de rotación.
{Aceleración: {x: v^2/r, y: 0, z: 0}, aceleración includedgravity: {x: v^2/r, y: 0, z: 9.81}, RotationRate: {Alpha: 0, beta: 0, gamma: -v/r*180/pi}};Implementación funcional
if (window.deviceMotionEvent) {window.addeventListener ('DeviceMotion', yaoyiyao, falso); } var velocidad = 30; // velocidad var x = y = z = lastx = lasty = lastz = 0; function yaoyiyao (eventData) {var aceleración = eventData.AccelationInCludedGravity; x = aceleración.x; y = aceleración.y; z = aceleración.z; if (math.abs (x-lastx)> velocidad || math.abs (y-lasty)> velocidad || math.abs (z-latz)> velocidad) {// alerta de código de activación de batido simple (1); } lastx = x; dury = y; LastZ = Z; }Primero, determine si el navegador admite este evento.
Yaoyiyao se usa para detectar si el teléfono móvil está temblando. Específicamente, es obtener los datos móviles del teléfono móvil y almacenarlos en una variable externa. Cuando el evento de agitación se active nuevamente la próxima vez, determine si la última coordenada de sacudida y la coordenada de agitación actual están en una gama de movilización frecuente: math.abs (x-lastx)> velocidad || math.abs (y-lasty)> velocidad || math.abs (z-lastz)> velocidad> velocidad>
Básicamente, si se cumple esta condición, el teléfono está en un estado tembloroso y agregue el código de agitación que desea ejecutar en la instrucción IF.
Lo anterior es la idea de implementar la función HTML5 Shake, y espero que sea útil para el aprendizaje de todos.