Beispiel für die Erkennung der Auswirkung der Augenbewegung basierend auf dem HTML5 -Gyroskop

Als ich die Ofo Little Yellow Car App benutzte, stellte ich fest, dass das vorherige Fegering unten ein kleiner gelber Mann mit Augen wurde, und es fühlte sich sehr interessant an.

Es ist nicht schwer aus der Auswirkung, dass das Gyroskopereignis erreicht wird.

Schauen wir uns einige Konzepte des Gyroscope -Ereignisses in HTML5 an.

Das Gyroscope -Ereignis ist deviceorientation , die hauptsächlich alpha , beta , gamma im Ereignis erhält.

Wenn das mobile Gerät horizontal platziert wird, beträgt der Drehwinkel um die Z -Achse 0 Grad bis 360 Grad.

Wenn das mobile Gerät horizontal platziert wird, der Drehwinkel um die x -Achse ist, beträgt der Wert -180 bis 180 Grad.

Wenn die Operation horizontal platziert wird, ist der Drehwinkel um die Z -Achse der Wert von -90 bis 90 Grad.

Hier müssen Sie nur Beta und Gamma verwenden.

Entpacken Sie die APK und holen Sie sich das Augenmaterial:

 <! = No> <title> document </title> <style> #box {positiv: verwandt: 300px; Cover; Top: 90px; Glass {Hintergrund-Images: BILDER (BILDERSCHAFTEN). = Box> <div id = face> </div> <div id = eyeleft> </div> <div id = eyeright> </div> <div id = glass> </div> <div id = log> < /div> </div> <script> 'Strict';/** Autor: Wang Leping* Datum: 2017.7.17*/var eyeleftposition = {Start: [70, 78], Ende: [100, 110]} ; Var myerightposition = {start: [150, 78], Ende: [190, 110]}; : (Eyeleftposition.end [1] -Emeleftposition [1]) / 2 + eyeleftposition [1]}; [0], Y: (EyerightPosition.end [1] -EyerightPosition.Start [1]) / 2 + EyerightPosition.Start [1]}; ); style.left = eyeleftCenterPosition.x + gamma / 90 * r + 'px'; / 180 * r + 'px'; document.querySelector ('Body').

Endgültiger Effekt

Das oben genannte ist der Inhalt dieses Artikels.