HTML5 쉐이크 코드 최적화에는 DeviceMotionEvent 등이 포함됩니다._html5 튜토리얼 기술

먼저 DeviceMotionEvent를 최적화하세요.

쓸데없는 코드를 제거하고 DeviceMotionEven을 다시 패키징하세요.

코드 복사

다음과 같습니다. 🎜>

if(window.DeviceMotionEvent) {
var speed = 25;//값 정의
var x = y = z = lastX = lastY = lastZ = 0;/ /모두 재설정 값
window.addEventListener('devicemotion', function(){
var Acceleration =event.accelerationInclusiveGravity;//감지 값을 가속도에 할당
x = Acceleration.x;
y = 가속도. y;
z = 가속도.z;
if(Math.abs(x-lastX) > 속도 || Math.abs(y-lastY) > 속도 ) {
// TODO: 여기 흔들기 후에 수행할 데이터 논리 연산을 구현할 수 있습니다.
lastX = x
lastZ = z
}, false );
}


실제 프로젝트의 많은 요구 사항으로 인해 제대로 구현할 수 없습니다.

예: 애니메이션이 완료될 때까지 DeviceMotionEvent 이벤트를 실행할 수 없습니다. ;

추가 최적화가 완료되었습니다.





코드를 복사하세요

코드는 다음과 같습니다. var f=1;

function donghua(){

//애니메이션 이벤트

$(".img").animate({left:'0',opacity :' 1'},700,function(){f=1;});
});
if(window.DeviceMotionEvent) {
var speed = 25;//값 정의
var x = y = z = lastX = lastY = lastZ = 0;//모든 값 재설정 ​​
window.addEventListener('devicemotion', function(){
var Acceleration =event.accelerationInclusiveGravity;// 가속도에 할당된 값을 감지합니다.
x = Acceleration.x;
z = Acceleration.z
if(Math.abs(x-lastX) > speed || Math .abs(y-lastY) > speed ) {
// TODO: 여기에서는 흔들기 후에 수행할 데이터 논리 연산을 구현할 수 있습니다
if(f==1){
동화( );
}
}
lastX = x;
lastZ =
},
}


이제 완벽해