Implementierung von Javascript-HTML5-Shake-Funktion_Javascript-Fähigkeiten

Anhand der Informationen im Internet und meiner eigenen Zusammenstellung habe ich eine Einführung in die HTML-Shake-Funktion zur technischen Sicherung geschrieben.
Wichtige Wissenspunkte

1. DeviceMotionEvent
Dies ist ein von HTML5 unterstütztes Schwerkrafterfassungsereignis. Die Dokumentation finden Sie unter: http://w3c.github.io/deviceorientation/spec-source-orientation.html
Veranstaltungseinführung:
Geräteausrichtung Stellt die Informationen zur physischen Ausrichtung des Geräts bereit, ausgedrückt als eine Reihe von Drehwinkeln des lokalen Koordinatensystems.
devicemotion Stellt Beschleunigungsinformationen für das Gerät bereit, ausgedrückt als Cardi-Koordinaten im auf dem Gerät definierten Koordinatensystem. Außerdem wird die Rotationsrate des Geräts im Koordinatensystem angezeigt. Wenn möglich, sollte das Ereignis Beschleunigungsinformationen im Schwerpunkt des Geräts liefern.
compassneedskalibration wird verwendet, um die Website zu benachrichtigen, das oben genannte Ereignis mithilfe von Kompassinformationen zu kalibrieren.

2. Veranstaltungseinführung
window.addEventListener("deviceorientation",function(event){// handle event.alpha, event.beta und event.gamma},true);

{alpha:90,
 beta:0,
 gamma:0}; 

Dies ist der Parameter, der vom Ereignis „deviceorientation“ zurückgegeben wird. Um die Kompassrichtung zu erhalten, können Sie einfach 360 Grad minus Alpha verwenden. Wenn es parallel zu einer horizontalen Fläche ist, ist seine Kompassrichtung (360 - Alpha). Wenn der Benutzer das Gerät hält, befindet sich der Bildschirm in einer vertikalen Ebene, wobei die Oberkante des Bildschirms nach oben zeigt. Der Beta-Wert beträgt 90 und Alpha hat nichts mit Gamma zu tun. Der Benutzer hält das Gerät und blickt in den Alpha-Winkel. Der Bildschirm befindet sich in einem vertikalen Bildschirm und die Richtungsinformationen sind wie folgt:

{alpha:270- alpha,
 beta:0,
 gamma:90}; 

Registrieren Sie einen Devicemotion-Ereignisempfänger:

Code kopieren Der Code lautet wie folgt:

window.addEventListener("devicemotion",function(event){// Prozessereignis. Beschleunigung, event.accelerationInclusionGravity, // event.rotationRate und event.interval},true);

Platzieren Sie das Gerät so auf dem Fahrzeug, dass sich der Bildschirm auf einer vertikalen Ebene befindet, die Oberseite nach oben zeigt und zum Heck des Fahrzeugs zeigt. Das Fahrzeug fährt mit der Geschwindigkeit v und dreht mit dem Radius r nach rechts. Das Gerät zeichnet Beschleunigung und Beschleunigung an Position x auf, einschließlich Schwerkraft, und das Gerät zeichnet auch den negativen Wert von rotationRate.gamma auf:

{acceleration:{x: v^2/r, y:0, z:0},
 accelerationIncludingGravity:{x: v^2/r, y:0, z:9.81},
 rotationRate:{alpha:0, beta:0, gamma:-v/r*180/pi}}; 

Funktionsimplementierung

if(window.DeviceMotionEvent){
 window.addEventListener('devicemotion', YaoYiYao,false);
 }
 var speed =30;//speed
 var x = y = z = lastX = lastY = lastZ =0;
 function YaoYiYao(eventData){
 var acceleration =eventData.accelerationIncludingGravity;
 x = acceleration.x;
 y = acceleration.y;
 z = acceleration.z;
 if(Math.abs(x-lastX)> speed ||Math.abs(y-lastY)> speed ||Math.abs(z-lastZ)> speed){
 //简单的摇一摇触发代码
 alert(1);
 }
 lastX = x;
 lastY = y;
 lastZ = z;
 } 

Stellen Sie zunächst fest, ob der Browser dieses Ereignis unterstützt.
YaoYiYao wird verwendet, um zu erkennen, ob das Mobiltelefon geschüttelt wird. Insbesondere werden die Bewegungsdaten des Mobiltelefons abgerufen und in einer externen Variablen gespeichert. Wenn das Schüttelereignis das nächste Mal ausgelöst wird, werden die letzten Schüttelkoordinaten und die aktuellen Schüttelkoordinaten ermittelt sind in der gleichen Position. Häufig mobilisierter Bereich: Math.abs(x-lastX)> speed ||Math.abs(z-lastZ)> speed Wenn diese Bedingung erfüllt ist, bedeutet dies im Grunde, dass sich das Telefon in einem Schüttelzustand befindet. Fügen Sie einfach den Schüttelcode hinzu, den Sie in der if-Anweisung ausführen möchten.

Das Obige ist die Implementierungsidee der HTML5-Shake-Funktion. Ich hoffe, dass sie für das Lernen aller hilfreich sein wird.