댓글 : 휴대폰의 쉐이크 기능이 좋습니다. 구현 방법
Baidu Developer Conference에서 HTML5의 또 다른 중요한 기능을 소개했는데,이 기능은 고급 포장에서 기본 방향 센서 및 모션 센서를 캡슐화하고 DOM 이벤트를 지원하는 장치를 캡슐화합니다. 이 기능에는 두 가지 이벤트가 포함됩니다.
1. Devicorientation : 이벤트는 방향 센서 데이터를 캡슐화하고 휴대폰의 각도, 방향, 방향 등과 같은 휴대폰의 고정 상태에서 방향 데이터를 얻을 수 있습니다.
2. Devicemotion : 이벤트는 모션 센서 데이터를 캡슐화하고 휴대 전화의 모션 상태에서 모션 가속과 같은 데이터를 얻을 수 있습니다.
이를 사용하여 중력 감지 및 나침반과 같은 흥미로운 기능을 쉽게 달성 할 수 있으며, 이는 휴대 전화에서 매우 유용합니다. 예를 들어, Opera H5 시험판의 중력 감지 볼 예제는 Deviceorientation API의 장치 방향 이벤트를 모니터링하여 달성됩니다.
html5를 사용하여 휴대 전화를 흔드는 기능을 실현하십시오.실제로 웹 페이지의 모바일 애플리케이션에서 매우 일반적이고 세련된 기능을 실현하는 데 도움이 될 수 있습니다.
나는 처음 으로이 기능을 Photoshake에서 보았고 나중에 WeChat을 포함한 많은 응용 프로그램 이이 기능을 추가했습니다.
html5를 사용하여 휴대 전화를 흔드는 기능을 실현하십시오.Android 또는 iOS 개발을 해본 적이 있다면 그러한 기능에 매우 익숙 할 수 있습니다. 그러나 아래에서는 웹에서 처음 으로이 기능을 구현합니다.
빨리 시작합시다!
DeviceMotionEvent는 가속 및 회전에 대한 장치의 관련 정보를 반환합니다. 가속 데이터에는 X, Y 및 Z의 세 축이 포함됩니다 (아래 그림에 개략적으로 표시되고 X 축은 휴대폰 화면 또는 랩톱 키보드가 수평으로 관통되고 Y 축은 휴대 전화 화면 또는 랩톱 키보드가 수직으로 실행되며 Z- 축은 휴대 전화 화면 또는 랩톱 키보드에 수신합니다). 일부 장치에는 중력의 영향을 배제하기위한 하드웨어가 없기 때문에 이벤트는 중력 및 가속도를 포함하여 중력의 영향을 배제하는 두 가지 속성을 반환합니다.
html5를 사용하여 휴대 전화를 흔드는 기능을 실현하십시오.
먼저 모션 감지 이벤트를 모니터링합시다.
[JavaScript]
if (window.deviceMotionEvent) {
window.addeventListener ( 'devicemotion', devicemotionHandler, false);
}
[/javaScript]
그런 다음 중력을 포함하는 가속도를 얻습니다.
[JavaScript]
함수 deviceMotionHandler (EventData) {
var asseleration = eventData.AccelerationInCludeGravity;
}
[/javaScript] </p> <p>
다음은 사용자가 전화를 흔드는 원리를 계산하는 방법에 관한 것입니다. 고려해야 할 핵심 사항은 다음과 같습니다.
1. 대부분의 사용자는 전화를 한 방향으로 흔들어 흔들어줍니다.
2. 3 방향으로의 가속 데이터는 흔들릴 때 반드시 변경 될 것입니다.
3. 우리는 휴대 전화의 정상적인 움직임 행동을 잘못 판단 할 수 없습니다. 휴대 전화가 주머니에 배치되면 걷는 경우 가속 데이터가 변경됩니다.
요약하면, 우리는 가속도를 세 방향으로 계산하고, 간격으로 측정하고, 고정 된 기간 동안의 변화율을 검사하고, 동작을 트리거하기 위해 임계 값을 결정해야합니다.
역사적 x, y 및 z 축의 데이터와 마지막 트리거 시간의 데이터를 기록하려면 여러 변수를 정의해야합니다. 핵심 메소드 구현 코드는 다음과 같습니다.
var shake_threshold = xxx;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;
함수 deviceMotionHandler (EventData) {
var asseleration = eventData.AccelerationInCludeGravity;
var curtime = newDate (). getTime ();
if ((Curtime -Lastupdate) & gt; 100) {
var difftime = curtime -last_update;
last_update = curtime;
x = 가속도 .x;
y = 가속도.
z = 가속도 .z;
var speed = math.abs (x + y + z -last_x -last_y -last_z) / difftime * 10000;
if (speed & gt; shake_threshold) {
경고 ( "Shaked!");
}
last_x = x;
last_y = y;
last_z = z;
}
}
이것으로부터, 우리는 전화를 흔드는 기능을 완료했습니다. 매우 간단하지 않습니까?