Implementieren Sie die WeChat-Shake-Funktion basierend auf den Tutorialfähigkeiten von html5 DeviceOrientation_html5

In HTML5 kapselt das von der DeviceOrientation-Funktion bereitgestellte DeviceMotion-Ereignis die Zeit des Bewegungssensors des Geräts. Durch Ändern der Zeit können Sie den Bewegungsstatus, die Beschleunigung und andere Daten des Geräts abrufen (es gibt auch ein DeviceOrientation-Ereignis, das den Gerätewinkel bereitstellt). Orientierung und andere Informationen).

Die Bestimmung des Bewegungsstatus des Geräts über DeviceMotion kann uns dabei helfen, den interaktiven „Shake“-Effekt auf der Webseite zu erzielen.

Überwachung von Bewegungsereignissen

Code kopieren

Der Code lautet wie folgt:

if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
warning('Ihr Telefon ist schrecklich, kaufen Sie ein neues.');
}

Beschleunigungsinformationen abrufen

Die Aktion „Schütteln“ bedeutet, dass sich das Gerät innerhalb eines bestimmten Zeitraums über eine bestimmte Distanz bewegt, indem die Änderungsrate der im vorherigen Schritt erhaltenen x-, y- und z-Werte innerhalb eines bestimmten Zeitbereichs überwacht wird , können Sie feststellen, ob das Gerät ein Schüttelurteil hat. Um eine Fehleinschätzung der normalen Bewegung zu verhindern, muss ein geeigneter kritischer Wert für die Änderungsrate festgelegt werden.

Code kopieren

Der Code lautet wie folgt:

function deviceMotionHandler(eventData) {
var Beschleunigung = eventData.accelerationIncreasingGravity;
var curTime = new Date().getTime();
if ((curTime - last_update) > 100) {
var diffTime = 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) / diffTime * 10000;
var status = document.getElementById("status");
if (speed > SHAKE_THRESHOLD) {
doResult();
}
last_x = x ;
last_y = y;
last_z = z;
}
}

Der Effekt ist wie im Bild dargestellt: