Die HTML5-Shake-Code-Optimierung umfasst DeviceMotionEvent usw._HTML5-Tutorial-Fähigkeiten

Optimieren Sie zuerst DeviceMotionEvent;

Unnötigen Code entfernen und DeviceMotionEven neu verpacken

Code kopieren

Code Wie folgt:

if(window.DeviceMotionEvent) {
var speed = 25;//Definieren Sie einen Wert
var x = y = z = lastX = lastY = lastZ = 0;/ /Alles zurücksetzen Werte
window.addEventListener('devicemotion', function(){
var Beschleunigung =event.accelerationIncreasingGravity;//Weisen Sie den Erfassungswert der Beschleunigung zu
x = Beschleunigung.x;
y = Beschleunigung. y;
z = Beschleunigung.z;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed ) {
// TODO: Hier Sie können die Datenlogikoperationen implementieren, die nach dem Schütteln ausgeführt werden sollen
donghua();
lastY = y;
}, false );
}


Aufgrund vieler Anforderungen in tatsächlichen Projekten, die nicht gut umgesetzt werden können,

Zum Beispiel: Die Animation kann nicht fortgesetzt werden, bis sie abgeschlossen ist ;

Es wurde also eine weitere Optimierung durchgeführt

Der Code lautet wie folgt:

var f=1; function donghua(){ //Animation event

$(".img").animate({left:'0',opacity :' 1'},700,function(){f=1;});

if(window.DeviceMotionEvent) {

var speed = 25;//Definieren Sie einen Wert
var x = y = z = lastX = lastY = lastZ = 0;//alle Werte zurücksetzen Erkennt die der Beschleunigung zugewiesenen Werte
x = Beschleunigung.x;
y = Beschleunigung.y
z = Beschleunigung.z; speed ||. Math .abs(y-lastY) > speed ) {
// TODO: Hier können Sie die Datenlogikoperationen implementieren, die nach dem Schütteln ausgeführt werden sollen
if(f==1){
donghua( );
f=0;
}
lastY = y;
lastZ = z; >}


Jetzt ist es perfekt