Implémenter la fonction de tremblement de WeChat basée sur les compétences du didacticiel html5 DeviceOrientation_html5

En HTML5, l'événement DeviceMotion fourni par la fonctionnalité DeviceOrientation encapsule l'heure du capteur de mouvement de l'appareil. En modifiant l'heure, vous pouvez obtenir l'état de mouvement, l'accélération et d'autres données de l'appareil (il existe également un événement deviceOrientation qui fournit l'angle de l'appareil, orientation et autres informations) .

Déterminer l'état de mouvement de l'appareil via DeviceMotion peut nous aider à obtenir l'effet interactif « secouer » sur la page Web.

Surveillance des événements de mouvement

Copier le code

Le code est le suivant :

if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
alert('Votre téléphone est horrible, achetez-en un nouveau.');
}

Obtenir des informations sur l'accélération

L'action « secouer » signifie que l'appareil se déplace sur une certaine distance dans un certain laps de temps. Par conséquent, en surveillant le taux de changement des valeurs x, y, z obtenues à l'étape précédente dans une certaine plage de temps. , vous pouvez déterminer si l'appareil a fait un jugement tremblant. Afin d'éviter une mauvaise appréciation du mouvement normal, une valeur critique appropriée doit être fixée pour le taux de changement.

Copier le code

Le code est le suivant :

fonction deviceMotionHandler(eventData) {
var accélération = eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime - last_update) > 100) {
var diffTime = curTime - last_update;
last_update = curTime;
x = accélération.x;
y = accélération.y;
z = accélération.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;
}
}

L'effet est comme indiqué sur l'image :