Grâce à des informations en ligne et à ma propre compilation, j'ai écrit une introduction à la fonction HTML Shake et je l'ai utilisée comme sauvegarde technique.
Points clés de la connaissance
1. DeviceMotionEvent
Il s'agit d'un événement de détection de gravité pris en charge par HTML5. Pour la documentation, veuillez consulter: http://w3c.github.io/deviceorientation/spec-source-orientation.html
Introduction de l'événement:
Device Oorientation fournit les informations de direction physique de l'appareil, exprimées sous forme d'angle de rotation d'une série de systèmes de coordonnées locaux.
DeviceMotion fournit des informations d'accélération pour l'appareil, exprimées sous forme de coordonnées cardi définies dans le système de coordonnées sur l'appareil. Il fournit également le taux de rotation de l'appareil dans le système de coordonnées. S'il est possible, l'événement doit fournir des informations d'accélération au centre de la gravité de l'appareil.
CompassNeedScalibration est utilisé pour informer le site Web afin de calibrer les événements ci-dessus à l'aide d'informations Compass.
2. Introduction à l'événement
window.adDeventListener ("DeviceOrientation", fonction (événement) {// Process Event.alpha, event.beta et event.gamma}, true);
{alpha: 90, bêta: 0, gamma: 0};Il s'agit du paramètre renvoyé par l'événement de périphérique. Afin d'obtenir le pointage de la boussole, vous pouvez simplement utiliser 360 degrés pour moins alpha. S'il est parallèle à la surface horizontale, sa boussole pointant (360 - alpha). Si l'utilisateur contient l'appareil, l'écran est dans un plan vertical et le haut de l'écran pointe vers le haut. La valeur de la version bêta est de 90, l'alpha et le gamma ne sont pas liés. L'appareil portable de l'utilisateur fait face à l'angle alpha, l'écran est dans un écran vertical, et le haut de l'écran pointe vers la droite, et ses informations de direction sont les suivantes
{alpha: 270- alpha, bêta: 0, gamma: 90};Enregistrez un récepteur pour l'événement DeviceMotion:
La copie de code est la suivante: Window.AddeventListener ("DeviceMotion", fonction (événement) {// Processing Event.acceleration, event.accelerationCludGravity, // Event.RotationRate et Event.Interval}, true);
Placez l'appareil sur le dessus du véhicule avec l'écran dans un plan vertical avec le haut vers le haut et face à l'arrière du véhicule. Le véhicule se déplace à une vitesse de V et se tourne vers la droite avec un rayon r. Le dispositif enregistre la situation où l'accélération et l'accélération incluse lagravité sont en position X, et le dispositif enregistre également la valeur négative de Rotationrate.gamma:
{Accélération: {x: v ^ 2 / r, y: 0, z: 0}, accélération inclusedGravity: {x: v ^ 2 / r, y: 0, z: 9.81}, rotationrate: {alpha: 0, bêta: 0, gamma: -v / r * 180 / pi}};Implémentation fonctionnelle
if (window.deviceMotionEvent) {window.addeventListener ('DeviceMotion', yaoyiyao, false); } var vitesse = 30; // vitesse var x = y = z = lastx = lasty = lastz = 0; fonction yaoyiyao (eventData) {var accélération = eventData.ACCELERACE INCLUDEDEDGRAVITY; x = accélération.x; y = accélération.y; z = accélération.z; if (math.abs (x-Lastx)> Speed || math.abs (y-ling)> Speed || Math.abs (Z-Lastz)> Speed) {// Simple Shake Trigger Code Alert (1); } lastx = x; lasty = y; lastz = z; }Tout d'abord, déterminez si le navigateur prend en charge cet événement.
Yaoyiyao est utilisé pour détecter si le téléphone portable tremble. Plus précisément, il s'agit d'obtenir les données mobiles du téléphone mobile et de les stocker dans une variable externe. Lorsque l'événement de tremblement est déclenché à nouveau la prochaine fois, déterminez si la dernière coordonnée de tremblement et les coordonnées de shaking actuelles se trouvent dans une gamme de mobilisation fréquente: math.abs (x-Lastx)> Speed || Math.abs (y-liny)> Speed || Math.abs (Z-Lastz)> Speed)
Fondamentalement, si cette condition est remplie, le téléphone est dans un état de tremblement et ajoutez le code de tremblement que vous souhaitez exécuter dans l'instruction if.
Ce qui précède est l'idée de mettre en œuvre la fonction HTML5 Shake, et j'espère qu'elle sera utile à l'apprentissage de chacun.