온라인 정보와 내 편집을 통해 HTML Shake 기능에 대한 소개를 작성하여 기술 백업으로 사용했습니다.
지식의 핵심 요점
1. devicemotionevent
이것은 HTML5가 지원하는 중력 감지 이벤트입니다. 문서는 http://w3c.github.io/deviceorientation/spec-source-orientation.html을 참조하십시오
이벤트 소개 :
장치는 일련의 로컬 좌표 시스템의 회전 각도로 표현 된 장치의 물리적 방향 정보를 제공합니다.
Devicemotion은 장치의 좌표 시스템에 정의 된 심장 좌표로 표시되는 장치에 대한 가속 정보를 제공합니다. 또한 좌표계에서 장치의 회전 속도를 제공합니다. 가능하면 이벤트는 장치의 무게 중심에 가속 정보를 제공해야합니다.
CompassneedScalibration 은 컴퍼스 정보를 사용하여 위의 이벤트를 보정하도록 웹 사이트에 알리는 데 사용됩니다.
2. 이벤트 소개
window.adeventListener ( "Deviceorientation", function (event) {// process event.alpha, event.beta 및 event.gamma}, true);
{알파 : 90, 베타 : 0, 감마 : 0};이것은 Deviceorientation 이벤트에 의해 반환 된 매개 변수입니다. 나침반을 가리키는 것을 얻으려면 360도에서 알파를 마이너스 알파를 사용할 수 있습니다. 수평 표면과 평행을 이루면 나침반은 (360 -Alpha)를 가리키고 있습니다. 사용자가 장치를 보유하면 화면이 수직 평면에 있고 화면 상단이 위쪽으로 향합니다. 베타의 값은 90, 알파 및 감마는 관련이 없습니다. 사용자의 핸드 헬드 장치는 알파 각도에 직면하고 화면은 수직 화면에 있으며 화면 상단은 오른쪽을 가리키며 방향 정보는 다음과 같습니다.
{알파 : 270- 알파, 베타 : 0, 감마 : 90};Devicemotion 이벤트에 대한 수신기 등록 :
코드 사본은 다음과 같습니다. window.adeventListener ( "devicemotion", function (event) {// processing event.acceleration, event.accelerationIncludeGravity, // event.rotationRate 및 event.interVal}, true);
상단이 위쪽을 향하고 차량의 후면을 향한 수직 평면에 스크린과 함께 차량 상단에 장치를 놓습니다. 차량은 V 속도로 이동하여 반경 r로 오른쪽으로 변합니다. 이 장치는 가속도 및 가속도가 X 위치에있는 상황을 기록하고 장치는 RotationRate.gamma의 음수 값을 기록합니다.
{가속도 : {x : v^2/r, y : 0, z : 0}, accelerationIncludedGravity : {x : v^2/r, y : 0, z : 9.81}, rotationRate : {alpha : 0, 베타 : 0, gamma : -v/r*180/pi}};기능적 구현
if (window.deviceMotionEvent) {wind } var speed = 30; // 속도 var x = y = z = lastx = lasty = lastz = 0; 함수 YAOYIYAO (EventData) {var asseleration = eventData.accelerationIncludedGravity; x = 가속도 .x; y = 가속도. z = 가속도 .z; if (math.abs (x-lastx)> 속도 || math.abs (y lasty)> 속도 || math.abs (z-lastz)> 속도) {// 단순한 흔들림 트리거 코드 알림 (1); } lastx = x; 마지막 = y; lastz = z; }먼저 브라우저 가이 이벤트를 지원하는지 여부를 결정하십시오.
Yaoyiyao는 휴대폰이 흔들리는 지 여부를 감지하는 데 사용됩니다. 특히, 휴대 전화의 모바일 데이터를 얻고 외부 변수에 저장하는 것입니다. 다음 번에 흔들리는 이벤트가 다시 트리거되면 마지막 흔들리는 좌표와 현재 흔들리는 좌표가 자주 동원되는 범위에 있는지 확인하십시오 : math.abs (x-rastx)> 속도 || math.abs (y-lasty)> 속도 || math.abs (z-rastz)> 속도.
기본적 으로이 조건이 충족되면 전화가 흔들리는 상태에 있으며 IF 문에 실행하려는 흔들리는 코드를 추가합니다.
위의 것은 HTML5 쉐이크 기능을 구현한다는 아이디어이며, 모든 사람의 학습에 도움이되기를 바랍니다.