Zdarzenia ruchu i orientacji urządzenia zapewniają dostęp do wbudowanego akcelerometru, żyroskopu i kompasu w urządzeniach mobilnych.
Zdarzenia te mogą być wykorzystywane do wielu celów, np. w grach do kontrolowania kierunku lub działania postaci. W połączeniu z geolokalizacją mogą pomóc w tworzeniu dokładniejszych szczegółowych wskazówek dojazdu lub dostarczaniu informacji o konkretnej lokalizacji.
Podsumowanie
- wykrywanie, która strona urządzenia jest skierowana do góry i jak urządzenie się obraca;
- Dowiedz się, kiedy i jak reagować na zdarzenia związane z ruchem i orientacją.
Która strona jest górna?
Aby korzystać z danych zwracanych przez zdarzenia orientacji i ruchu urządzenia, musisz zrozumieć podawane wartości.
Układ współrzędnych Ziemi
Układ współrzędnych Ziemi, opisany przez wartości X, Y i Z, jest wyrównany 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 liczbą dodatnią). |
Z |
Reprezentuje kierunek góra-dół, prostopadły do podłoża (gdzie góra jest wartością dodatnią). |
Układ współrzędnych urządzenia
Układ współrzędnych urządzenia, opisany przez wartości x, y i z, jest wyrównany na podstawie środka urządzenia.
| Układ współrzędnych | |
|---|---|
X |
W płaszczyźnie ekranu, wartości dodatnie w prawo. |
Y |
W płaszczyźnie ekranu, wartości dodatnie w górę. |
Z |
Prostopadle do ekranu lub klawiatury, wartości dodatnie oddalają się od nich. |
Na telefonie lub tablecie orientacja urządzenia jest określana na podstawie typowej orientacji ekranu. W przypadku telefonów i tabletów jest on określany na podstawie trybu portretowego. W przypadku komputerów stacjonarnych i laptopów orientacja jest określana względem klawiatury.
Dane rotacji
Dane o obrocie 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 bezpośrednio na północ. Gdy urządzenie jest obracane w lewo, wartość alpha rośnie.
Beta
Obrót wokół osi X. Wartość beta wynosi 0°, gdy górna i dolna krawędź urządzenia znajdują się w tej samej odległości od powierzchni ziemi. Wartość rośnie, gdy górna część urządzenia jest przechylana w kierunku powierzchni Ziemi.
Gamma
Obrót wokół osi Y. Wartość gamma wynosi 0°, gdy lewa i prawa krawędź urządzenia znajdują się w tej samej odległości od powierzchni ziemi. Wartość rośnie, gdy prawa strona jest przechylona w kierunku powierzchni Ziemi.
Orientacja urządzenia
Zdarzenie orientacji urządzenia zwraca dane o obrocie, które obejmują informacje o tym, jak bardzo urządzenie jest pochylone do przodu i do tyłu oraz na boki, a jeśli telefon lub laptop ma kompas, także o tym, w jakim kierunku jest skierowane.
Używaj oszczędnie.
Testowanie pod kątem pomocy.
Nie aktualizuj interfejsu przy każdym zdarzeniu orientacji, tylko synchronizuj z requestAnimationFrame.
Kiedy używać zdarzeń orientacji urządzenia
Zdarzenia orientacji urządzenia mają kilka zastosowań. Przykłady:
- aktualizować mapę, gdy użytkownik się przemieszcza;
- subtelne zmiany 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 je obsługuje. Następnie dołącz 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 urządzeniem w jego bieżącej pozycji w stosunku do układu współrzędnych Ziemi.
Zdarzenie zwykle zwraca 3 właściwości: alpha, beta i gamma. W przypadku przeglądarki Safari na urządzeniach mobilnych zwracany jest dodatkowy parametr webkitCompassHeading z kursem kompasu.
Ruch urządzenia
Zdarzenie orientacji urządzenia zwraca dane o obrocie, które obejmują informacje o tym, jak bardzo urządzenie jest pochylone do przodu i do tyłu oraz na boki, a jeśli telefon lub laptop ma kompas, także o tym, w jakim kierunku jest skierowane.
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 między implementacjami w przeglądarkach.
Kiedy używać zdarzeń ruchu urządzenia
Zdarzenia ruchu urządzenia mają kilka zastosowań. Przykłady:
- Potrząśnij, aby odświeżyć dane.
- W grach – aby postacie skakały lub się poruszały.
- aplikacji do treningu i dbania o zdrowie,
Sprawdzanie obsługi i nasłuchiwanie zdarzeń
Aby nasłuchiwać zdarzenia DeviceMotionEvent, najpierw sprawdź, czy jest ono obsługiwane w przeglądarce. Następnie dołącz 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 pozwala wykluczyć efekt grawitacji.
Zdarzenie zwraca 4 właściwości: accelerationIncludingGravity, acceleration (która wyklucza efekty grawitacji), rotationRate i interval.
Wyobraź sobie na przykład telefon leżący na płaskim stole ekranem do góry.
| Stan | Obrót | Przyspieszenie (m/s2) | Przyspieszenie z grawitacją (m/s2) |
|---|---|---|---|
| Brak ruchu | [0, 0, 0] | [0, 0, 0] | [0, 0, 9,8] |
| Ruch w górę, w stronę 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 natomiast telefon byłby trzymany tak, że ekran byłby prostopadły do podłoża i bezpośrednio widoczny dla widza:
| Stan | Obrót | Przyspieszenie (m/s2) | Przyspieszenie z grawitacją (m/s2) |
|---|---|---|---|
| Brak ruchu | [0, 0, 0] | [0, 0, 0] | [0, 9.81, 0] |
| Ruch w górę, w stronę 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 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 „Skacz!” użytkownik otrzymuje polecenie skoku. W tym czasie strona przechowuje maksymalne (i minimalne) wartości przyspieszenia, a po skoku informuje użytkownika o maksymalnym przyspieszeniu.