Ejemplo de realizar el efecto del movimiento ocular basado en el giroscopio HTML5

Recientemente, cuando utilicé la aplicación OFO Little Yellow Car, descubrí que el barrido anterior a continuación se convirtió en un pequeño hombre amarillo con los ojos, y me sentí bastante interesante.

No es difícil ver por el efecto que se logra el evento de giroscopio.

Echemos un vistazo a algunos conceptos del evento Gyroscope en HTML5.

El evento de giroscopio es deviceorientation , que obtiene principalmente alpha , beta , gamma en el evento.

Cuando el dispositivo móvil se coloca horizontalmente, el ángulo de rotación alrededor del eje Z es de 0 grados a 360 grados.

Cuando el dispositivo móvil se coloca horizontalmente, el ángulo de rotación alrededor del eje X, el valor es de -180 grados a 180 grados.

Cuando la operación se coloca horizontalmente, el ángulo de rotación alrededor del eje Z es el valor de -90 grados a 90 grados.

Aquí, solo necesitas usar beta y gamma.

Descomprima el APK y obtenga el material ocular:

 <! = No> <title> documento </title> <style> #box {positivo: relacionado: 300px; Cubierta; Arriba: 90px; Glass {IMAGÍAS DE BRANGUACIÓN: URL (Glass/Glass.png); = Box> <div id = face> </div> <div id = eyeleft> </div> <div id = eyeright> </div> <div id = vidrio> </div> <div id = log> < /div> </div> <script> 'use estrict';/** Autor: Wang Leping* Fecha: 2017.7.17*/var eyeleftPosition = {inicio: [70, 78], final: [100, 110]} ; : (EyLeftPosition.end [1] -emeleftPosition [1]) / 2 + EyLeftPosition [1]}; [0], y: (EyerightPosition.end [1] -eyerightPosition.Start [1]) / 2 + EyerightPosition.Start [1]}; ); style.left = eyLeftCenterPosition.x + gamma / 90 * r + 'px'; / 180 * R + 'PX'; document.Queryselector ('Body').

Efecto final

Lo anterior es todo el contenido de este artículo.