>  기사  >  웹 프론트엔드  >  HTML5 쉐이크 코드 최적화에는 DeviceMotionEvent 등이 포함됩니다._html5 튜토리얼 기술

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

WBOY
WBOY원래의
2016-05-16 15:47:231428검색

먼저 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 =
},
}


이제 완벽해
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.