이 페이지는 Cloud Translation API를 통해 번역되었습니다.

기기 방향 및 모션

Pete LePage

기기 모션 및 방향 이벤트는 내장된 가속도계, 자이로스코프 및 나침반 등이 있습니다.

이러한 이벤트는 여러 용도로 사용할 수 있습니다. 예를 들어 캐릭터의 방향이나 행동을 나타냅니다. 위치정보와 함께 사용하면 보다 정확한 세부 경로 안내 내비게이션을 만들거나 찾을 수 있습니다.

요약

기기의 어느 쪽이 위이고 기기가 어떻게 회전하는지 감지합니다.
모션 및 방향 이벤트에 언제 어떻게 반응하는지 알아봅니다.

어느 쪽이 위를 향하나요?

기기 방향 및 모션 이벤트가 반환하는 데이터를 사용하려면 제공된 값을 이해하는 것이 중요합니다.

지구 좌표계

X, Y, Z 값으로 설명되는 지구 좌표계가 정렬됩니다. 최대 120도 회전할 수 있습니다.

좌표계
`X`	동서 방향을 나타냅니다 (동쪽이 +입니다).
`Y`	남북 방향을 나타냅니다 (북쪽이 +입니다).
`Z`	지면에 수직인 상하 방향을 나타냅니다. 여기서 위쪽은 양수입니다.

기기 좌표계

x, y, z 값으로 설명되는 기기 좌표계가 정렬됩니다. 회전합니다.

좌표계
`X`	화면 평면에서 오른쪽이 +입니다.
`Y`	화면 평면에서 위쪽이 +입니다.
`Z`	화면 또는 키보드에 수직으로 위쪽으로 확장됨 있습니다.

휴대전화나 태블릿에서는 기기의 방향이 일반적인 화면 방향입니다. 스마트폰 및 태블릿의 경우 기기를 기반으로 합니다. 세로 모드여야 합니다. 데스크톱 또는 노트북 컴퓨터의 경우 방향은 고려됩니다.

회전 데이터

회전 데이터는 오일러 각, 기기 좌표 간의 차이도를 나타냅니다. 사용할 수 있습니다.

알파

z축을 기준으로 한 회전입니다. alpha 값은 기기가 바로 북쪽을 가리킵니다. 기기가 시계 반대 방향으로 회전하면 alpha 값이 증가합니다.

베타

x축을 기준으로 한 회전입니다. beta 값은 기기가 지면에서 등거리에 있어야 합니다. 값은 기기의 상단이 지면을 향해 기울어질수록 기울어짐에 따라 증가합니다.

감마

y축을 중심으로 한 회전입니다. gamma 값은 왼쪽 및 다음 경우 0°입니다. 기기의 오른쪽 가장자리가 지면에서 등거리에 있어야 합니다. 값은 증가하며 이는 오른쪽이 지면을 향해 기울어질수록 증가합니다.

기기 방향

기기 방향 이벤트는 기기의 방향성을 포함한 회전 데이터를 반환합니다. 기기가 앞뒤로 기울어져 있는지, 좌우로 기울어져 있는지, 휴대폰이나 노트북이 기기가 향하는 방향인 나침반이 있습니다.

가급적 사용하지 마세요. 지원 여부를 테스트합니다. 모든 방향 이벤트에서 UI를 업데이트하지는 마세요. requestAnimationFrame에 동기화하세요.

기기 방향 이벤트를 사용하는 경우

기기 방향 이벤트의 용도는 여러 가지가 있습니다. 예를 들면 다음과 같습니다.

사용자의 움직임에 따라 지도를 업데이트합니다.
UI를 미세하게 조정합니다(예: 시차 효과 추가).
위치정보와 결합하여 세부 경로 안내 내비게이션에 사용할 수 있습니다.

지원 확인 및 이벤트 수신 대기

DeviceOrientationEvent를 수신 대기하려면 먼저 브라우저에서 이벤트를 지원하는지 확인합니다. 그런 다음 deviceorientation 이벤트를 수신 대기하는 window 객체에 이벤트 리스너를 연결합니다.

if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', deviceOrientationHandler, false);
  document.getElementById('doeSupported').innerText = 'Supported!';
}

기기 방향 이벤트 처리

기기 방향 이벤트는 기기가 이동하거나 변경될 때 실행됩니다. 방향을 설정할 수 있습니다. 이 메서드는 포드의 현재 위치를 지구 좌표계.

이 이벤트는 일반적으로 alpha, beta 및 gamma. 모바일 Safari에서는 webkitCompassHeading 드림 나침반 방향과 함께 반환됩니다.

기기 움직임

기기의 현재 모션이 필요할 때 기기 모션을 사용합니다. rotationRate는 °/초 단위로 제공됩니다. acceleration 및 accelerationWithGravity는 m/초²로 제공됩니다. 브라우저 구현 간의 차이점을 인식합니다.

기기 모션 이벤트를 사용해야 하는 경우

기기 모션 이벤트의 용도는 여러 가지가 있습니다. 예를 들면 다음과 같습니다.

흔들기 동작으로 데이터 새로고침
게임에서 캐릭터의 점프 또는 이동
건강/피트니스 앱

지원 확인 및 이벤트 수신 대기

DeviceMotionEvent를 수신 대기하려면 먼저 이벤트가 브라우저에서 지원되지 않습니다. 그런 다음 이벤트 리스너를 window에 연결합니다. devicemotion 이벤트를 수신 대기하는 객체입니다.

if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler);
  setTimeout(stopJump, 3 * 1000);
}

기기 모션 이벤트 처리

기기 모션 이벤트는 정기적으로 발생하며 다음에 대한 데이터를 반환합니다. 회전 (°/초) 및 가속 (m/초²) 정보를 공유할 수 있습니다. 일부 기기에는 하드웨어가 중력의 영향을 제외할 수 있습니다.

이 이벤트는 4개의 속성, accelerationIncludingGravity님, acceleration, 중력, rotationRate 및 interval입니다.

예를 들어 평평한 탁자 위에 놓인 휴대폰을 살펴보고 화면이 위를 향하게 하세요.

주	회전	가속도 (m/s²)	중력 가속 (m/s²)
움직이지 않음	[0, 0, 0]	[0, 0, 0]	[0, 0, 9.8]
하늘을 향해 위로 이동	[0, 0, 0]	[0, 0, 5]	[0, 0, 14.81]
오른쪽으로만 이동	[0, 0, 0]	[3, 0, 0]	[3, 0, 9.81]
위로 및 오른쪽으로 이동	[0, 0, 0]	[5, 0, 5]	[5, 0, 14.81]

반대로 화면이 직각을 이루도록 휴대전화를 잡았다면 시청자에게 직접 보이게 할 수 있습니다.

주	회전	가속도 (m/s²)	중력 가속 (m/s²)
움직이지 않음	[0, 0, 0]	[0, 0, 0]	[0, 9.81, 0]
하늘을 향해 위로 이동	[0, 0, 0]	[0, 5, 0]	[0, 14.81, 0]
오른쪽으로만 이동	[0, 0, 0]	[3, 0, 0]	[3, 9.81, 0]
위로 및 오른쪽으로 이동	[0, 0, 0]	[5, 5, 0]	[5, 14.81, 0]

샘플: 객체의 최대 가속도 계산

기기 모션 이벤트를 사용하는 한 가지 방법은 최대 가속을 계산하는 것입니다. 객체입니다. 예를 들어 사람의 최대 가속도를 점프하는 중?

if (evt.acceleration.x > jumpMax.x) {
  jumpMax.x = evt.acceleration.x;
}
if (evt.acceleration.y > jumpMax.y) {
  jumpMax.y = evt.acceleration.y;
}
if (evt.acceleration.z > jumpMax.z) {
  jumpMax.z = evt.acceleration.z;
}

Go! 버튼을 누르면 사용자에게 점프하라고 지시합니다. 그동안 최대 및 최소 가속 값이 페이지에 저장되고 사용자에게 최대 가속을 알려줍니다.

기기 방향 및 모션

요약

어느 쪽이 위를 향하나요?

지구 좌표계

기기 좌표계

회전 데이터

알파

베타

감마

기기 방향

기기 방향 이벤트를 사용하는 경우

지원 확인 및 이벤트 수신 대기

기기 방향 이벤트 처리

기기 움직임

기기 모션 이벤트를 사용해야 하는 경우

지원 확인 및 이벤트 수신 대기

기기 모션 이벤트 처리

샘플: 객체의 최대 가속도 계산

의견