Tutorial zur Verwendung von HTML5, um die Funktion des Schüttelns Ihres Telefons zu erkennen

Kommentar: Die Shake -Funktion auf dem Mobiltelefon ist gut. Wie man es implementiert

Auf der Baidu Developer Conference habe ich ein weiteres wichtiges Merkmal von HTML5 eingeführt, nämlich die Geräteorientierung, die den zugrunde liegenden Richtungssensor und den Bewegungssensor in hochrangigen Verpackungen zusammenfasst und Unterstützung für DOM-Ereignisse bietet. Diese Funktion enthält zwei Veranstaltungen:

1. Geräteorientierung: Das Ereignis umfasst die Richtungssensordaten und kann die Richtungsdaten im stationären Zustand des Mobiltelefons wie Winkel, Ausrichtung, Orientierung usw. des Mobiltelefons erhalten.

2. Devicemotion: Ereignisse verkapseln Bewegungssensordaten und können Daten wie Bewegungsbeschleunigung im Bewegungszustand des Mobiltelefons erhalten.

Mit der Verwendung können wir leicht interessante Funktionen wie Gravity Sensing und Kompass erzielen, die auf Mobiltelefonen sehr nützlich sein werden. Beispielsweise wird das Beispiel für Schwerkraft -Erfassungskugel in der Opera H5 -Testversion durch Überwachung des Geräte -Ereignisses der Geräteorientierungs -API erreicht.

Tatsächlich kann es uns auch helfen, eine sehr häufige und modische Funktion in einer mobilen Anwendung auf der Webseite zu erkennen: das Handy schütteln.

Ich habe diese Funktion zum ersten Mal in Photoshake gesehen, und später viele Anwendungen, einschließlich WeChat, haben diese Funktion hinzugefügt.

Wenn Sie jemals eine Android- oder iOS -Entwicklung gemacht haben, sind Sie mit solchen Funktionen möglicherweise sehr vertraut. Im Folgenden werden wir diese Funktionalität jedoch zum ersten Mal im Web implementieren.

Fangen wir schnell an!

DevicemotionEvent gibt die relevanten Informationen des Geräts über Beschleunigung und Rotation zurück. Die Beschleunigungsdaten enthalten drei Achsen: x, y und z (in der folgenden Abbildung schematisch angezeigt, die X-Achse dringt horizontal in den Mobiltelefonbildschirm oder die Laptop-Tastatur durch, die y-Achse führt den mobilen Bildschirm oder die Laptop-Tastatur vertikal aus, und die Z-Achse ist senkrecht zum mobilen Tastatur oder Laptop-Tastatur oder Laptop-Tastatur). Da einige Geräte möglicherweise keine Hardware haben, um die Auswirkungen der Schwerkraft auszuschließen, gibt das Ereignis zwei Eigenschaften zurück: Beschleunigungsklinische Schwerkraft und Beschleunigung, die die Auswirkungen der Schwerkraft ausschließen.

Verwenden Sie HTML5, um die Funktion des Schüttelns Ihres Telefons zu erkennen

Lassen Sie uns zunächst Bewegungsemerkennungsereignisse überwachen.

[JavaScript]

if (window.devicemotionEvent) {

window.addeventListener ('Devicemotion', DevicemotionHandler, False);

}

[/JavaScript]

Erhalten Sie dann die Beschleunigung mit Schwerkraft.

[JavaScript]

Funktion devicemotionHandler (eventData) {

var Acceleration = eventData.AccelerationIncludeGravity;

}

[/javaScript] </p> <p>

Im Folgenden geht es darum, wie wir das Prinzip der Benutzer berechnen, die ihre Telefone schütteln. Die wichtigsten Punkte sind wie folgt:

1. Die meisten Benutzer schütteln ihre Telefone in eine Richtung, um zu schütteln.

2. Die Beschleunigungsdaten in drei Richtungen werden sich beim Schütteln definitiv ändern.

3. Wir können das normale Bewegungsverhalten von Mobiltelefonen nicht falsch beraten. Denken Sie darüber nach, wenn Ihr Mobiltelefon in Ihre Tasche gelegt wird, haben sich auch Änderungen der Beschleunigungsdaten beim Gehen.

Zusammenfassend sollten wir die Beschleunigungen in drei Richtungen berechnen, sie in Abständen messen, ihre Änderungsrate über einen festen Zeitraum untersuchen und einen Schwellenwert für sie ermitteln, um die Aktion auszulösen.

Wir müssen mehrere Variablen definieren, um die Daten der historischen X-, y- und z -Achsen und der Zeit des letzten Auslösers aufzuzeichnen. Der Core -Methode -Implementierungscode lautet wie folgt:

var Shake_threshold = xxx;

var last_update = 0;

var x, y, z, last_x, last_y, last_z;

Funktion devicemotionHandler (eventData) {

var Acceleration = eventData.AccelerationIncludeGravity;

var curtime = newDate (). Gettime ();

if ((curtime - lastUpdate) & gt; 100) {

var diffime = curtime -last_update;

last_update = curtime;

x = Beschleunigung.x;

y = Beschleunigung.y;

z = Beschleunigung.z;

var speed = math.abs (x + y + z - last_x - last_y - last_z) / Diffftime * 10000;

if (Speed ​​& gt; Shake_threshold) {

Alarm ("Shaked!");

}

last_x = x;

last_y = y;

last_z = z;

}

}

Daraus haben wir die Funktion des Schüttelns des Telefons abgeschlossen. Ist es nicht sehr einfach?