Orientacja urządzenia i ruch

Zdarzenia dotyczące ruchu i orientacji urządzenia zapewniają dostęp do wbudowanych w urządzeń mobilnych akcelerometru, żyroskopu i kompasu.

Zdarzenia te mogą służyć do wielu celów, np. w grach do sterowania kierunkiem lub działaniem postaci. W połączeniu z lokalizacją geograficzną mogą one ułatwiać tworzenie dokładniejszych wskazówek nawigacyjnych lub dostarczać informacji o konkretnej lokalizacji.

  • Sprawdź, która strona urządzenia jest u góry i w jaki sposób się ono obraca.
  • Dowiedz się, kiedy i jak reagować na zdarzenia związane z ruchu i orientacji.

Co jest gotowe?

Aby korzystać z danych zwracanych przez zdarzenia związane z orientacją urządzenia i ruchu, musisz zrozumieć podawane wartości.

Ramka ze współrzędnymi Earth

Ramka współrzędnych Earth, opisana wartościami X, Y i Z, jest wyrównana na podstawie grawitacji i standardowej orientacji magnetycznej.

Układ współrzędnych
X Przedstawia 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 od dołu do góry, prostopadły do podłoża (gdzie góra jest dodatnia).

Ramka współrzędnych urządzenia

Ilustracja ramki współrzędnych urządzenia
Ilustracja ramki współrzędnych urządzenia

Ramka współrzędnych urządzenia opisana wartościami x, yz jest wyrównana względem środka urządzenia.

Układ współrzędnych
X Na płaszczyźnie ekranu, plus po prawej stronie.
Y Na płaszczyźnie ekranu, w kierunku dodatnim, w górę.
Z Prostokątna do ekranu lub klawiatury, plus odsunięcie.

Na telefonie lub tablecie orientacja urządzenia jest określana na podstawie typowej orientacji ekranu. W przypadku telefonów i tabletów zależy on od urządzenia w trybie pionowym. Na komputerach stacjonarnych i laptopach orientacja jest określana w odniesieniu do klawiatury.

Dane o rotacji

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

Alfa

Ilustracja alfa w układzie współrzędnych urządzenia
Grafika 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 dokładnie 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 przedstawiająca beta w ramach układu współrzędnych urządzenia

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

gamma

Ilustracja ramki współrzędnych urządzenia
Ilustracja gamma w układzie współrzędnych urządzenia

Obrót wokół osi Y. Wartość gamma wynosi 0°, gdy lewy i prawy brzeg urządzenia znajdują się w równej odległości od powierzchni Ziemi. Wartość wzrasta w miarę przechylania prawej strony w stronę powierzchni Ziemi.

Orientacja urządzenia

Zdarzenie orientacji urządzenia zwraca dane obrotu, które obejmują stopień pochylenia urządzenia przód i tył, a także kierunek, w którym urządzenie jest ustawione (jeśli telefon lub laptop ma kompas).

Używaj oszczędnie. Przetestuj, aby uzyskać pomoc. Nie aktualizuj interfejsu w przypadku każdego zdarzenia orientacji. Zamiast tego wykonaj synchronizację z requestAnimationFrame.

Kiedy używać zdarzeń orientacji urządzenia

Zdarzenia orientacji urządzenia można wykorzystywać na wiele sposobów. Przykłady:

  • aktualizować mapę w miarę przemieszczania się użytkownika.
  • Subtelne ulepszenia interfejsu, np. dodanie efektów paralaksy.
  • W połączeniu z geolokalizacją może służyć do szczegółowej nawigacji.

Sprawdzanie obsługi i nasłuchiwanie zdarzeń

Aby nasłuchiwać zdarzeń DeviceOrientationEvent, najpierw sprawdź, czy przeglądarka obsługuje zdarzenia. Następnie dodaj do obiektu window detektor zdarzeń, który będzie nasłuchiwać 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 uruchamiane, gdy urządzenie zostanie poruszone lub zmieni orientację. Zwraca dane o różnicy między urządzeniem w jego bieżącym położeniu a ramką współrzędnych Earth.

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

Ruch urządzenia

Zdarzenie orientacji urządzenia zwraca dane obrotu, które obejmują stopień pochylenia urządzenia przód i tył, a także kierunek, w którym urządzenie jest ustawione (jeśli telefon lub laptop ma kompas).

Używaj ruchu urządzenia, gdy potrzebny jest bieżący ruch urządzenia. rotationRate jest podawany w °/s. acceleration i accelerationWithGravity są podawane w m/s2. Pamiętaj o różnicach w implementacji przeglądarek.

Kiedy używać zdarzeń ruchu na urządzeniu

Zdarzenia związane z ruchu urządzenia można wykorzystywać na wiele sposobów. Przykłady:

  • Wstrząśnij, aby odświeżyć dane.
  • W grach, aby postacie skakały lub się poruszały.
  • Aplikacje związane ze zdrowiem i kondycją.

Sprawdzanie wsparcia oraz nasłuchiwanie zdarzeń

Aby nasłuchiwać zdarzeń DeviceMotionEvent, najpierw sprawdź, czy są one obsługiwane w przeglądarce. Następnie dodaj do obiektu window detektor zdarzeń, który będzie nasłuchiwać 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 (m/s2) urządzenia w tym momencie. Niektóre urządzenia nie mają sprzętu umożliwiającego wykluczenie efektu grawitacji.

Zdarzenie zwraca 4 właściwości: accelerationIncludingGravity, acceleration, które nie uwzględniają wpływu grawitacji, rotationRate i interval.

Spójrzmy na przykład na telefon, który leży na płaskim stole z ekranem skierowanym do góry.

Stan Obrót Przyspieszenie (m/s2) Przyspieszenie grawitacyjne (m/s2)
Brak ruchu [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]
Przesuwanie 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]

Jeśli natomiast będziesz trzymać telefon tak, aby ekran był prostopadły do podłogi i był bezpośrednio widoczny dla użytkownika:

Stan Obrót Przyspieszenie (m/s2) Przyspieszenie grawitacyjne (m/s2)
Brak ruchu [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]
Przesuwanie 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]

Próbka: 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 osoby skaczącej?

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 Przejdź! użytkownik jest proszony o skok. W tym czasie strona przechowuje maksymalne (i minimalne) wartości przyspieszenia, a po skoku informuje użytkownika o maksymalnym przyspieszeniu.

Prześlij opinię