Orientacja urządzenia i ruch

Pete LePage

Zdarzenia ruchu i orientacji urządzenia zapewniają dostęp do akcelerometru, żyroskopu i kompasu w urządzeniach mobilnych.

Zdarzenia te mogą służyć do wielu celów, np. do sterowania kierunkiem lub zachowaniem postaci w grach. W przypadku geolokalizacji mogą one pomóc w ulepszaniu szczegółowej nawigacji zakręt po zakręcie oraz dostarczać informacji o konkretnej lokalizacji.

Podsumowanie

  • Wykrywa, która strona urządzenia jest do góry i w jaki sposób się obraca.
  • Dowiedz się, kiedy i jak reagować na zdarzenia ruchu i orientacji.

Który koniec?

Aby korzystać z danych zwracanych przez orientacja urządzenia i zdarzenia ruchu, trzeba znać podawane wartości.

Ramka współrzędnych Ziemi

Ramka współrzędnych Ziemi opisana za pomocą wartości X, Y i Z jest wyrównana na podstawie grawitacji i standardowej orientacji magnetycznej.

Układ współrzędnych
X Reprezentuje kierunek wschód-zachód (gdzie wschód jest dodatni).
Y Reprezentuje kierunek północ-południe (gdzie północ jest dodatnia).
Z Reprezentuje kierunek góry w dół, prostopadły do ziemi (góra jest liczbą dodatnią).

Ramka współrzędnych urządzenia

Ilustracja przedstawiająca ramkę współrzędnych urządzenia
Ilustracja ramki współrzędnych urządzenia

Ramka współrzędnych urządzenia, opisana wartościami x, y i z, jest wyrównana na środku urządzenia.

Układ współrzędnych
X Na płaszczyźnie ekranu, plus po prawej stronie.
Y Na płaszczyźnie ekranu, dodatnie u góry.
Z Prostokątne do ekranu lub klawiatury, rozszerzające się w kierunku dodatnim.

W przypadku telefonu lub tabletu orientacja urządzenia jest określana na podstawie typowej orientacji ekranu. W przypadku telefonów i tabletów jest ona ustalana na podstawie orientacji pionowej. W przypadku komputerów stacjonarnych i laptopów orientacja jest uwzględniana w odniesieniu do klawiatury.

Dane rotacji

Dane obrotu są zwracane jako kąt Eulera, który reprezentuje liczbę stopni różnicy między ramką współrzędnych urządzenia a ramką współrzędnych Ziemi.

Alfa

Grafika przedstawiająca wersję alfa w ramce współrzędnych urządzenia
Ilustracja kanału alfa w ramce współrzędnych urządzenia

Obrót wokół osi Z. Wartość alpha wynosi 0°, gdy górna część urządzenia jest skierowana bezpośrednio na północ. Gdy obrócisz urządzenie w lewo, wartość alpha rośnie.

Beta

ilustracja przedstawiająca ramkę współrzędnych urządzenia
Ilustracja wersji beta w ramce współrzędnych urządzenia

Obrót wokół osi X. Wartość beta wynosi 0°, gdy górna i dół urządzenia są w równej odległości od powierzchni Ziemi. Wartość rośnie, gdy górna część urządzenia jest skierowana w stronę powierzchni Ziemi.

Gamma

ilustracja przedstawiająca ramkę współrzędnych urządzenia
Ilustracja gamma w ramce współrzędnych urządzenia

Obrót wokół osi Y. Wartość gamma wynosi 0°, gdy lewe i prawe krawędzie urządzenia znajdują się w równej odległości od powierzchni Ziemi. Wartość rośnie, gdy prawa strona przesuwa się w stronę powierzchni Ziemi.

Orientacja urządzenia

Zdarzenie orientacji urządzenia zwraca dane obrotu, które obejmują stopień pochylenia urządzenia od przodu i na boki, a jeśli telefon lub laptop ma kompas – kierunek, w którym jest ono skierowane.

Nie nadużywaj ich. Przetestuj, aby uzyskać pomoc. Nie aktualizuj interfejsu w przypadku każdego zdarzenia dotyczącego orientacji – zamiast tego synchronizuj z requestAnimationFrame.

Kiedy używać zdarzeń orientacji urządzenia

Istnieje kilka zastosowań zdarzeń orientacji urządzenia. Przykłady:

  • Aktualizuj mapę, gdy użytkownik się porusza.
  • Niewielkie zmiany interfejsu, na przykład dodanie efektów paralaksy.
  • W połączeniu z geolokalizacją umożliwia nawigację zakręt po zakręcie.

Uzyskiwanie pomocy i nasłuchiwanie zdarzeń

Jeśli chcesz nasłuchiwać zdarzeń DeviceOrientationEvent, sprawdź najpierw, czy przeglądarka je obsługuje. Następnie dodaj detektor do obiektu window nasłuchującego zdarzeń deviceorientation.

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

Obsługa zdarzeń orientacji urządzenia

Zdarzenie orientacji urządzenia jest wywoływane, gdy urządzenie się porusza lub zmienia orientację. Zwraca dane o różnicy między bieżącym położeniem urządzenia a ramką współrzędnych Ziemi.

Zdarzenie to zwykle zwraca 3 właściwości: alpha, beta oraz gamma. W przeglądarce Mobile Safari zwracany jest dodatkowy parametr webkitCompassHeading z nagłówkiem kompasu.

Ruch urządzenia

Zdarzenie orientacji urządzenia zwraca dane obrotu, które obejmują stopień pochylenia urządzenia od przodu i na boki, a jeśli telefon lub laptop ma kompas – kierunek, w którym jest ono skierowane.

Używaj ruchu urządzenia, gdy potrzebny jest bieżący ruch. Wartość rotationRate jest podawana w °/s. acceleration i accelerationWithGravity są podawane w m/s2. Pamiętaj o różnicach między implementacjami przeglądarek.

Kiedy używać zdarzeń ruchu urządzenia

Istnieje kilka zastosowań zdarzeń ruchu na urządzeniu. Przykłady:

  • Wstrząśnij gest, aby odświeżyć dane.
  • Gry tego typu polegają na skakaniu postaci lub poruszaniu się po nich.
  • Aplikacje związane ze zdrowiem i aktywnością fizyczną.

Uzyskiwanie pomocy i nasłuchiwanie zdarzeń

Aby nasłuchiwać zdarzenia DeviceMotionEvent, najpierw sprawdź, czy są one obsługiwane w przeglądarce. Następnie dołącz do obiektu window detektor zdarzeń devicemotion.

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

Obsługa zdarzeń ruchu urządzenia

Zdarzenie ruchu urządzenia jest wywoływane w regularnych odstępach czasu i zwraca dane o obrotach (w °/s) i przyspieszeniu (w m/sekundach2) urządzenia w danym momencie. Niektóre urządzenia nie mają sprzętu, który wykluczałby efekt grawitacji.

Zdarzenie zwraca 4 właściwości: accelerationIncludingGravity i acceleration, które wykluczają skutki grawitacji: rotationRate i interval.

Spójrzmy na przykład na telefon leżący na płaskim stole z ekranem do góry.

Stan Rotacja Przyspieszenie (m/s2) Przyspieszenie z grawitacją (m/s2)
Nieruchome [0, 0, 0] [0, 0, 0] [0; 0; 9,8]
Ruch w górę w kierunku nieba [0, 0, 0] [0, 0, 5] [0; 0; 14,81]
Ruch tylko w prawo [0, 0, 0] [3, 0, 0] [3; 0; 9,81]
Ruch w górę i w prawo [0, 0, 0] [5, 0, 5] [5; 0; 14,81]

I na odwrót: jeśli telefon był utrzymywany w taki sposób, że ekran był prostopadły do ziemi i był bezpośrednio widoczny dla gogli:

Stan Rotacja Przyspieszenie (m/s2) Przyspieszenie z grawitacją (m/s2)
Nieruchome [0, 0, 0] [0, 0, 0] [0; 9,81; 0]
Ruch w górę w kierunku nieba [0, 0, 0] [0, 5, 0] [0; 14,81; 0]
Ruch tylko w prawo [0, 0, 0] [3, 0, 0] [3; 9,81; 0]
Ruch w górę i w prawo [0, 0, 0] [5, 5, 0] [5; 14,81; 0]

Przykład: obliczanie maksymalnego przyspieszenia obiektu

Jednym ze sposobów wykorzystania zdarzeń ruchu urządzenia jest obliczenie maksymalnego przyspieszenia obiektu. Na przykład jakie jest maksymalne przyspieszenie, gdy osoba podskakuje?

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

Po kliknięciu przycisku Start pojawia się prośba o to, żeby użytkownik skakał. W tym czasie strona przechowuje maksymalne (i minimalne) wartości przyspieszenia, a po przeskoku informuje użytkownika o maksymalnym przyspieszeniu.

Prześlij opinię