L'optimisation du code HTML5 Shake inclut DeviceMotionEvent, etc._html5 compétences du didacticiel

Optimisez d'abord DeviceMotionEvent ;

Supprimez le code inutile et reconditionnez DeviceMotionEven

Copier le code

code comme suit :

if(window.DeviceMotionEvent) {
var speed = 25;//Définir une valeur
var x = y = z = lastX = lastY = lastZ = 0;/ /Tout réinitialiser valeurs
window.addEventListener('devicemotion', function(){
var accélération =event.accelerationIncludingGravity;//Attribuez la valeur de détection à l'accélération
x = accélération.x;
y = accélération. y;
z = accélération.z;
if(Math.abs(x-lastX) > vitesse || Math.abs(y-lastY) > vitesse ) {
// À FAIRE : Ici vous pouvez implémenter les opérations logiques de données à effectuer après avoir secoué
donghua();
lastX = x
lastY = y
lastZ = z ; );
}


En raison de nombreuses exigences dans les projets réels qui ne peuvent pas être correctement mises en œuvre,

Par exemple : l'animation ne peut pas continuer tant qu'elle n'est pas terminée. ;

Une optimisation supplémentaire a donc été effectuée

Copiez le codeLe code est le suivant :

var f=1;

function donghua(){
//Événement d'animation
$(".img").animate({left:'0',opacity :' 1'},700,function(){f=1;});
});
if(window.DeviceMotionEvent) {
var speed = 25;//Définir une valeur
var x = y = z = lastX = lastY = lastZ = 0;//Réinitialiser toutes les valeurs
window.addEventListener('devicemotion', function(){
var accélération =event.accelerationIncludingGravity;// Détectera les valeurs attribuées à l'accélération
x = accélération.x
y = accélération.y
z = accélération.z
if(Math.abs(x-lastX) > speed || Math .abs(y-lastY) > speed ) {
// TODO : Ici, vous pouvez implémenter les opérations logiques de données à effectuer après avoir secoué
if(f==1){
donghua( );
f=0;
}
}
dernierX = x;
dernierZ = z; >}


Maintenant c'est parfait