javascript html5 shake function_javascript 기술 구현

인터넷에 있는 정보와 제가 직접 편집한 내용을 통해 기술적인 백업을 위한 HTML 쉐이크 기능에 대한 소개를 작성했습니다.
지식 핵심 포인트

1. 디바이스모션이벤트
이는 HTML5에서 지원하는 중력 감지 이벤트입니다. 문서는 http://w3c.github.io/deviceorientation/spec-source-orientation.html
을 참조하세요. 이벤트 소개:
deviceorientation 로컬 좌표계의 일련의 회전 각도로 표현되는 장치의 물리적 방향 정보를 제공합니다.
devicemotion 장치에 정의된 좌표계의 카디드 좌표로 표현되는 장치의 가속도 정보를 제공합니다. 또한 좌표계에서 장치의 회전 속도를 제공합니다. 가능하다면 이벤트는 장치 무게 중심의 가속도 정보를 제공해야 합니다.
compassneedscalibration은 나침반 정보를 사용하여 위 이벤트를 교정하도록 웹사이트에 알리는 데 사용됩니다.

2. 이벤트 소개
window.addEventListener("deviceorientation",function(event){// event.alpha, event.beta 및 event.gamma 처리},true);

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

deviceorientation 이벤트에서 반환되는 매개변수입니다. 나침반 포인팅을 얻으려면 360도 마이너스 알파를 사용하면 됩니다. 수평 표면과 평행한 경우 나침반 방향은 (360 - 알파)입니다. 사용자가 장치를 잡고 있는 경우 화면은 화면 상단이 위쪽을 가리키는 수직 평면에 표시됩니다. 베타 값은 90이고 알파는 감마와 아무런 관련이 없습니다. 사용자는 기기를 들고 알파각을 향하게 됩니다. 화면은 세로 화면으로 화면 상단이 오른쪽을 가리킵니다

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

장치모션 이벤트 수신기 등록:

코드 복사 코드는 다음과 같습니다.

window.addEventListener("devicemotion",function(event){// 프로세스 이벤트 가속, event.accelerationIncludeGravity, // event.rotationRate 및 event.interval},true);

화면이 수직면에 있고 상단이 위쪽을 향하고 차량 후면을 향하도록 차량에 기기를 놓습니다. 차량은 속도 v로 이동하고 반경 r만큼 오른쪽으로 회전합니다. 장치는 위치 x에서 가속도 및 AccelerationIncludeGravity를 기록하며, 회전Rate.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}}; 

기능구현

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;
 } 

먼저 브라우저가 이 이벤트를 지원하는지 확인하세요.
YaoYiYao는 휴대폰의 흔들림 여부를 감지하는 데 사용됩니다. 구체적으로 휴대폰의 움직임 데이터를 획득하여 다음 번 흔들림 이벤트가 발생하면 마지막 흔들림 좌표와 현재 흔들림 좌표를 확인합니다. 자주 동원되는 범위: Math.abs(x-lastX)> speed ||Math.abs(y-lastY)> speed ||Math.abs(z-lastZ)> 기본적으로 이 조건이 충족되면 휴대폰은 흔들리는 상태가 됩니다. if 문에 실행하고 싶은 흔들기 코드를 추가하면 됩니다.

위 내용은 html5 흔들기 기능 구현 아이디어입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다.