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