Implémentation des compétences javascript html5 shake function_javascript

Grâce aux informations sur Internet et à ma propre compilation, j'ai écrit une introduction à la fonction HTML shake pour la sauvegarde technique.
Points clés de connaissances

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
. Présentation de l'événement :
deviceorientation Fournit les informations d'orientation physique de l'appareil, exprimées sous la forme d'une série d'angles de rotation du système de coordonnées local.
devicemotion Fournit des informations d'accélération pour l'appareil, exprimées en coordonnées cardiaques dans le système de coordonnées défini sur l'appareil. Il fournit également la vitesse de rotation de l'appareil dans le système de coordonnées. Si possible, l'événement doit fournir des informations sur l'accélération au centre de gravité de l'appareil.
compassneedscalibration est utilisé pour informer le site Web de calibrer l'événement ci-dessus à l'aide des informations de la boussole.

2. Présentation de l'événement
window.addEventListener("deviceorientation",function(event){// handle event.alpha, event.beta et event.gamma},true);

{alpha:90,
 beta:0,
 gamma:0}; 

C'est le paramètre renvoyé par l'événement deviceorientation. Afin d'obtenir le pointage de la boussole, vous pouvez simplement utiliser 360 ​​degrés moins alpha. S'il est parallèle à une surface horizontale, son pointage compas est (360 - alpha). Si l'utilisateur tient l'appareil, l'écran est dans un plan vertical avec le haut de l'écran pointant vers le haut. La valeur bêta est de 90 et l’alpha n’a rien à voir avec le gamma. L'utilisateur tient l'appareil et fait face à l'angle alpha. L'écran est dans un écran vertical et le haut de l'écran pointe vers la droite. Les informations de direction sont les suivantes
.

{alpha:270- alpha,
 beta:0,
 gamma:90}; 

Enregistrez un récepteur d'événements Devicemotion :

Placez l'appareil sur le véhicule, avec l'écran sur un plan vertical, le dessus vers le haut, face à l'arrière du véhicule. Le véhicule roule à une vitesse v et tourne vers la droite avec un rayon r. L'appareil enregistre l'accélération et l'accélérationIncludingGravity à la position x, et l'appareil enregistre également la valeur négative de rotationRate.gamma :

{acceleration:{x: v^2/r, y:0, z:0},
 accelerationIncludingGravity:{x: v^2/r, y:0, z:9.81},
 rotationRate:{alpha:0, beta:0, gamma:-v/r*180/pi}}; 

Implémentation de fonctions

if(window.DeviceMotionEvent){
 window.addEventListener('devicemotion', YaoYiYao,false);
 }
 var speed =30;//speed
 var x = y = z = lastX = lastY = lastZ =0;
 function YaoYiYao(eventData){
 var acceleration =eventData.accelerationIncludingGravity;
 x = acceleration.x;
 y = acceleration.y;
 z = acceleration.z;
 if(Math.abs(x-lastX)> speed ||Math.abs(y-lastY)> speed ||Math.abs(z-lastZ)> speed){
 //简单的摇一摇触发代码
 alert(1);
 }
 lastX = x;
 lastY = y;
 lastZ = z;
 } 

Déterminez d’abord si le navigateur prend en charge cet événement.
YaoYiYao est utilisé pour détecter si le téléphone mobile est secoué. Plus précisément, il obtient les données de mouvement du téléphone mobile et les stocke dans une variable externe lorsque l'événement de secousse est déclenché la prochaine fois, il détermine si les coordonnées de la dernière secousse et les coordonnées de secousse actuelles. sont dans la même position. Plage fréquemment mobilisée : Math.abs(x-lastX)> vitesse ||Math.abs(y-lastY)> Fondamentalement, si cette condition est remplie, le téléphone est dans un état de tremblement. Ajoutez simplement le code de tremblement que vous souhaitez exécuter dans l'instruction if.