Zdarzenia ruchu i orientacji urządzenia zapewniają dostęp do wbudowanych funkcji akcelerometr, żyroskop i kompas na urządzeniach mobilnych.
Zdarzenia te mogą być wykorzystywane do różnych celów: np. w grach, aby kontrolować kierunek lub działanie postaci. W połączeniu z geolokalizacją pomagają tworzyć dokładniejszą nawigację zakręt po zakręcie lub podawać informacje w 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 ruchu lub orientacji.
Co jest gotowe?
Aby użyć danych zwracanych przez orientację urządzenia i zdarzenia ruchu, musisz znać podane 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 |
Przedstawia kierunek północ-południe (gdzie północ jest liczbą dodatnią). |
Z |
Reprezentuje kierunek góra-dół, prostopadła do ziemi (gdzie góra to wartość dodatnia). |
Ramka współrzędnych urządzenia
Ramka współrzędnych urządzenia, opisana wartościami x, y i z, jest wyrównana
po środku 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, dodatnia w domu. |
Na telefonie lub tablecie orientacja urządzenia zależy od typowego od orientacji ekranu. W przypadku telefonów i tabletów bazuje na urządzeniu w trybie pionowym. Na komputerach stacjonarnych lub laptopach orientacja to w odniesieniu do klawiatury.
Dane o rotacji
Dane obrotu są zwracane jako kąt Eulera, oznacza liczbę stopni różnicy między współrzędnymi urządzenia i klatki ze współrzędną Ziemi.
Alfa
Obrót wokół osi Z. Wartość alpha wynosi 0°, gdy górna część argumentu
urządzenie jest skierowane bezpośrednio na północ. Gdy obracasz urządzenie w lewo,
wartość alpha rośnie.
Beta
Obrót wokół osi X. Wartość beta wynosi 0°, gdy górne i
znajdują się w równej odległości od powierzchni Ziemi. Wartość
rośnie w miarę przechylania górnej części urządzenia w stronę powierzchni Ziemi.
gamma
Obrót wokół osi Y. Wartość gamma wynosi 0°, gdy lewe i
są w równej odległości od powierzchni Ziemi. Wartość
rośnie w miarę przechylania prawej strony w kierunku powierzchni Ziemi.
Orientacja urządzenia
Zdarzenie orientacji urządzenia zwraca dane obrotu, które zawierają informację o tym, urządzenie jest pochylone z przodu, na boki, a jeśli telefon lub laptop zawiera kompas, czyli kierunek, w który jest zwrócony urządzenie.
Używaj z umiarem.
Przetestuj, aby uzyskać pomoc.
Nie aktualizuj interfejsu w przypadku każdego zdarzenia orientacji. zamiast tego zsynchronizuj z usługą requestAnimationFrame.
Kiedy używać zdarzeń orientacji urządzenia
Zdarzenia orientacji urządzenia mają wiele zastosowań. Przykłady:
- Aktualizowanie mapy 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 wsparcia oraz nasłuchiwanie zdarzeń
Aby nasłuchiwać zdarzeń DeviceOrientationEvent, najpierw sprawdź, czy przeglądarka obsługuje zdarzenia. Następnie podłącz odbiornik do obiektu window, który nasłuchuje 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 się porusza lub zmienia orientacji ekranu. Zwraca dane o różnicy między urządzeniem jego aktualną pozycję w stosunku do Ramka ze współrzędnymi Earth.
Zdarzenie to zwykle zwraca 3 właściwości: alpha,
beta i gamma. W przeglądarce mobilnej Safari dodatkowy parametr
webkitCompassHeading
jest zwracana wraz z kierunkiem kompasu.
Ruch urządzenia
Zdarzenie orientacji urządzenia zwraca dane obrotu, które zawierają informację o tym, urządzenie jest pochylone z przodu, na boki, a jeśli telefon lub laptop zawiera kompas, czyli kierunek, w który jest zwrócony urządzenie.
Używaj ruchu urządzenia, gdy potrzebny jest bieżący ruch urządzenia.
Wartość rotationRate jest podawana w °/s.
Wartości 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 ruchu na urządzeniu mają różne zastosowania. Przykłady:
- Wstrząśnij, aby odświeżyć dane.
- w grach, które powodują skakanie lub poruszanie się postaci.
- Aplikacje związane ze zdrowiem i aktywnością fizyczną.
Sprawdzanie wsparcia oraz nasłuchiwanie zdarzeń
Aby nasłuchiwać zdarzeń DeviceMotionEvent, najpierw sprawdź, czy
obsługiwane w przeglądarce. Następnie dołącz detektor zdarzeń do window
obiekt nasłuchuje zdarzeń devicemotion.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
Obsługa zdarzeń ruchu urządzenia
Zdarzenie ruchu na urządzeniu jest wywoływane w regularnych odstępach czasu i zwraca dane o obrót (°/s) i przyspieszenie (m/s2) w danym momencie. Niektóre urządzenia nie mają wyposażenia sprzętowego aby wykluczyć efekt grawitacji.
Zdarzenie zwraca 4 właściwości:
accelerationIncludingGravity
acceleration, która nie uwzględnia efektów działania
grawitacja, rotationRate i interval.
Spójrzmy na przykład na 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] |
| 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] |
Gdyby telefon był trzymany w pionie, tak aby ekran był prostopadły i były widoczne dla widza:
| 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] |
| 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] |
Próbka: obliczanie maksymalnego przyspieszenia obiektu
Jednym ze sposobów korzystania ze zdarzeń ruchu urządzenia jest obliczenie maksymalnego przyspieszenia obiektu. Na przykład jakie jest maksymalne przyspieszenie człowieka skakać?
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 OK użytkownik jest proszony o skok. W tym czasie strona zapisuje maksymalne (i minimalne) wartości przyspieszenia, a po informuje użytkownika o maksymalnym przyspieszeniu.