Zdarzenia ruchu i orientacji urządzenia zapewniają dostęp do wbudowanego akcelerometru, żyroskopu i kompasu na urządzeniach mobilnych.
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.
Podsumowanie
- wykryć, która strona urządzenia jest skierowana ku górze i jak urządzenie się obraca;
- Dowiedz się, kiedy i jak reagować na zdarzenia związane z ruchu i orientacji.
Który koniec jest górą?
Aby korzystać z danych zwracanych przez zdarzenia związane z orientacją urządzenia i ruchu, musisz zrozumieć podawane wartości.
Układ współrzędnych Ziemi
Układ współrzędnych Ziemi opisany wartościami X, Y i Z jest wyrównany na podstawie grawitacji i standardowego ułożenia magnetycznego.
| Układ współrzędnych | |
|---|---|
X |
Reprezentuje kierunek wschód-zachód (gdzie wschód jest liczbą 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
Ramka współrzędnych urządzenia, opisana wartościami x, y i z, jest wyrównana względem środka urządzenia.
| Układ współrzędnych | |
|---|---|
X |
W płaszczyźnie ekranu dodatnia w prawo. |
Y |
W płaszczyźnie ekranu, dodatni w górę. |
Z |
prostopadle do ekranu lub klawiatury, dodatnie w stronę od siebie; |
Na telefonie lub tablecie orientacja urządzenia jest określana na podstawie typowej orientacji ekranu. W przypadku telefonów i tabletów jest to zależne od tego, czy urządzenie jest ustawione w orientacji pionowej. W przypadku komputerów stacjonarnych i laptopów orientacja jest określana w odniesieniu do klawiatury.
Dane 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
Obrót wokół osi Z. Wartość alpha wynosi 0°, gdy górna część urządzenia jest skierowana dokładnie na północ. Gdy urządzenie jest obracane w przeciwnym kierunku niż wskazówki zegara, wartość alpha wzrasta.
Beta
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ść ta rośnie, gdy górna część urządzenia jest skierowana w kierunku powierzchni Ziemi.
Gamma
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ść ta rośnie, gdy prawa strona jest nachylona w kierunku powierzchni Ziemi.
Orientacja urządzenia
Zdarzenie orientacji urządzenia zwraca dane dotyczące jego orientacji, w tym to, jak bardzo jest ono nachylone do przodu lub tyłu oraz na boki. Jeśli telefon lub laptop ma kompas, zwraca też kierunek, w jakim jest skierowany.
Używaj oszczędnie.
Testowanie pod kątem bezpieczeństwa.
Nie aktualizuj interfejsu użytkownika przy każdym zdarzeniu orientacyjnym. Zamiast tego zsynchronizuj go 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 zmiany w interfejsie, np. dodanie efektów paralaksy;
- W połączeniu z geolokalizacją może służyć do nawigacji krok po kroku.
Sprawdzanie obsługi i nasłuchiwanie zdarzeń
Aby nasłuchiwać zdarzeń DeviceOrientationEvent, najpierw sprawdź, czy przeglądarka obsługuje te 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 wywoływane, gdy urządzenie się porusza lub zmienia orientację. Zwraca dane o różnicy między bieżącą pozycją urządzenia a układem współrzędnych Ziemi.
Zdarzenie zwraca zwykle 3 właściwości: alpha, beta i gamma. W Safari na urządzeniach mobilnych z danymi kompasu zwracany jest dodatkowy parametr webkitCompassHeading.
Ruch urządzenia
Zdarzenie orientacji urządzenia zwraca dane dotyczące jego orientacji, w tym to, jak bardzo jest ono nachylone do przodu lub tyłu oraz na boki. Jeśli telefon lub laptop ma kompas, zwraca też kierunek, w jakim jest skierowany.
Używaj ruchu urządzenia, gdy potrzebny jest aktualny ruch urządzenia.
Wartość rotationRate jest podana w stopniach na sekundę. Wartości acceleration i accelerationWithGravity są podane w m/s2.
Zwróć uwagę na różnice między implementacjami w przeglądarkach.
Kiedy używać zdarzeń ruchu urządzenia
Zdarzenia związane z ruchu urządzenia można wykorzystywać na wiele sposobów. Przykłady:
- Potrząśnij urządzeniem, aby odświeżyć dane.
- W grach, aby postacie skakały lub się poruszały.
- Aplikacje związane ze zdrowiem i kondycją.
Sprawdzanie obsługi i 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 obrocie (w stopniach na sekundę) i przyspieszeniu (w m/s2) urządzenia w danym momencie. Niektóre urządzenia nie mają sprzętu, który wyklucza wpływ grawitacji.
Zdarzenie zwraca 4 właściwości: accelerationIncludingGravity, acceleration, która wyklucza efekty grawitacji, rotationRate i interval.
Weźmy na przykład telefon leżący na płaskim stole ekranem 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] |
| Przesuwanie się 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] |
| Przesuwanie w górę i w prawo | [0, 0, 0] | [5, 0, 5] | [5, 0, 14.81] |
Jeśli telefon jest trzymany tak, że ekran jest prostopadły do ziemi i widoczny bezpośrednio dla widza:
| Stan | Obrót | Przyspieszenie (m/s2) | Przyspieszenie grawitacyjne (m/s2) |
|---|---|---|---|
| Brak ruchu | [0, 0, 0] | [0, 0, 0] | [0, 9.81, 0] |
| Przesuwanie się 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] |
| Przesuwanie 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 korzystania ze zdarzeń ruchu urządzenia jest obliczanie maksymalnego przyspieszenia obiektu. Na przykład: jaka jest maksymalna 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 „Go!” użytkownik zostaje poproszony o skoczenie. W tym czasie strona przechowuje maksymalne (i minimalne) wartości przyspieszenia, a po skoku informuje użytkownika o maksymalnym przyspieszeniu.