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.
Podsumowanie
- 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
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 |
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
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
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
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.