Durch Online -Informationen und meine eigene Zusammenstellung schrieb ich eine Einführung in die HTML Shake -Funktion und verwendete sie als technische Sicherung.
Schlüsselpunkte des Wissens
1. DevicemotionEvent
Dies ist ein von HTML5 unterstütztes Gravity -Sensing -Ereignis. Die Dokumentation finden Sie unter: http://w3c.github.io/deviceorientation/spec-source-orientation.html
Ereigniseinführung:
Die Geräteorientierung liefert die physischen Richtungsinformationen des Geräts, ausgedrückt als Rotationswinkel einer Reihe lokaler Koordinatensysteme.
Devicemotion bietet Beschleunigungsinformationen für das Gerät, ausgedrückt als die im Koordinatensystem auf dem Gerät definierten Cardi -Koordinaten. Es liefert auch die Rotationsrate des Geräts im Koordinatensystem. Bei machbarem Machbar sollte die Veranstaltung Beschleunigungsinformationen im Schwerpunkt des Geräts bereitstellen.
Die Kompassnutzungsscalibrierung wird verwendet, um die Website zu benachrichtigen, um die oben genannten Ereignisse mithilfe von Kompassinformationen zu kalibrieren.
2. Einführung in die Veranstaltung
window.adDeVentListener ("Deviceorientation", Funktion (Ereignis) {// process event.alpha, event.beta und event.gamma}, true);
{Alpha: 90, Beta: 0, Gamma: 0};Dies ist der Parameter, der vom Geräteereignis zurückgegeben wird. Um den Kompass zu erhalten, können Sie einfach 360 Grad bis abzüglich Alpha verwenden. Wenn es parallel zur horizontalen Oberfläche ist, zeigt der Kompass auf (360 - Alpha). Wenn der Benutzer das Gerät hält, befindet sich der Bildschirm in einer vertikalen Ebene und oben auf den Bildschirmpunkten nach oben. Der Wert von Beta beträgt 90, Alpha und Gamma sind nicht verwandt. Das Handheld -Gerät des Benutzers steht vor dem Alpha -Winkel, der Bildschirm befindet
{Alpha: 270- Alpha, Beta: 0, Gamma: 90};Registrieren Sie einen Empfänger für Devicemotion -Event:
Die Codekopie lautet wie folgt: window.adDeVentListener ("Devicemotion", Funktion (Ereignis) {// Verarbeitungsereignis.Acceleration, Event.AccelerationIncludeGravity, // Event.RotationRate und Event.interval}, true);
Legen Sie das Gerät mit dem Bildschirm in einer vertikalen Ebene mit der oberen Seite nach oben und der Rückseite des Fahrzeugs auf den Bildschirm. Das Fahrzeug fährt mit einer Geschwindigkeit von V und dreht sich mit einem Radius r nach rechts. Das Gerät zeichnet die Situation auf, in der Beschleunigung und Beschleunigung angeklagt wurden, und das Gerät zeichnet auch den negativen Wert von RotationRate.gamma auf:
{Beschleunigung: {x: v^2/r, y: 0, z: 0}, AccelerationIncludedgravity: {x: v^2/r, y: 0, z: 9.81}, rotationrate: {alpha: meta: 0, gamma: -v/r*180/pi}}};Funktionale Implementierung
if (window.devicemotionEvent) {window.addeventListener ('Devicemotion', yaoyiyao, falsch); } var speed = 30; // Speed var x = y = z = lastx = lasty = lastz = 0; Funktion yaoyiyao (EventData) {var Acceleration = eventData.AccelerationIncludedGravity; x = Beschleunigung.x; y = Beschleunigung.y; z = Beschleunigung.z; if (math.abs (x-lastx)> Geschwindigkeit || math.abs (y-lasty)> Geschwindigkeit || math.abs (z-lastz)> Geschwindigkeit) {// Einfache Shake-Trigger-Code-Alarm (1); } lastx = x; lasty = y; lastz = z; }Stellen Sie zunächst fest, ob der Browser dieses Ereignis unterstützt.
Yaoyiyao wird verwendet, um festzustellen, ob das Mobiltelefon zittert. Insbesondere soll die mobilen Daten des Mobiltelefons erhalten und in einer externen Variablen gespeichert werden. Wenn das Shaking-Ereignis beim nächsten Mal erneut ausgelöst wird, stellen Sie fest, ob sich die letzte Schüttelkoordinate und die aktuelle Schüttelkoordinate in einem Bereich der häufigen Mobilisierung befinden: math.abs (x-lastx)> Geschwindigkeit || math.abs (y-lasty)> Geschwindigkeit || math.abs (Z-Lastz)> Geschwindigkeit
Wenn diese Bedingung erfüllt ist, befindet sich das Telefon im Grunde genommen in einem Schüttelzustand und fügen Sie den Schüttelcode hinzu, den Sie in die IF -Anweisung ausführen möchten.
Die oben genannte Idee ist die Idee, die HTML5 -Shake -Funktion implementieren zu können, und ich hoffe, dass es für das Lernen aller hilfreich sein wird.