События движения и ориентации устройства обеспечивают доступ к встроенным акселерометру, гироскопу и компасу мобильных устройств.
Эти события можно использовать для многих целей; в играх, например, для управления направлением или действиями персонажа. При использовании с геолокацией они могут помочь создать более точную пошаговую навигацию или предоставить информацию о конкретном местоположении.
Краткое содержание
- Определите, какая сторона устройства находится вверху и как устройство вращается.
- Узнайте, когда и как реагировать на события движения и ориентации.
Какой конец вверх?
Чтобы использовать данные, возвращаемые событиями ориентации и движения устройства, важно понимать предоставляемые значения.
Система координат Земли
Система координат Земли, описываемая значениями X , Y и Z , выравнивается на основе гравитации и стандартной магнитной ориентации.
| Система координат | |
|---|---|
X | Представляет направление восток-запад (где восток является положительным). |
Y | Представляет направление север-юг (где север является положительным). |
Z | Представляет направление вверх-вниз, перпендикулярное земле (где вверх — положительное значение). |
Система координат устройства
Система координат устройства, описываемая значениями x , y и z , выравнивается по центру устройства.
| Система координат | |
|---|---|
X | В плоскости экрана положительный вправо. |
Y | В плоскости экрана, положительно вверху. |
Z | Перпендикулярно экрану или клавиатуре, положительная часть простирается в сторону. |
На телефоне или планшете ориентация устройства зависит от типичной ориентации экрана. Для телефонов и планшетов это основано на том, что устройство находится в портретном режиме. Для настольных компьютеров или ноутбуков ориентация учитывается относительно клавиатуры.
Данные вращения
Данные о вращении возвращаются в виде угла Эйлера , представляющего разницу в градусах между системой координат устройства и системой координат Земли.
Альфа
Вращение вокруг оси Z. Значение alpha равно 0°, когда верхняя часть устройства направлена прямо на север. При вращении устройства против часовой стрелки значение alpha увеличивается.
Бета
Вращение вокруг оси x. Значение beta составляет 0°, когда верхняя и нижняя части устройства находятся на равном расстоянии от поверхности земли. Значение увеличивается по мере того, как верхняя часть устройства наклоняется к поверхности земли.
Гамма
Вращение вокруг оси Y. Значение gamma равно 0°, когда левый и правый края устройства находятся на равном расстоянии от поверхности земли. Значение увеличивается по мере того, как правая сторона наклонена к поверхности земли.
Ориентация устройства
Событие ориентации устройства возвращает данные о повороте, которые включают в себя степень наклона устройства вперед-назад, из стороны в сторону, а также, если в телефоне или ноутбуке есть компас, направление, в котором смотрит устройство.
Используйте экономно. Проверьте поддержку. Не обновляйте пользовательский интерфейс при каждом ознакомительном событии; вместо этого синхронизируйтесь с requestAnimationFrame .
Когда использовать события ориентации устройства
Существует несколько вариантов использования событий ориентации устройства. Примеры включают следующее:
- Обновляйте карту по мере перемещения пользователя.
- Тонкие настройки пользовательского интерфейса, например добавление эффектов параллакса.
- В сочетании с геолокацией может использоваться для пошаговой навигации.
Проверка поддержки и прослушивание событий
Чтобы прослушивать DeviceOrientationEvent , сначала проверьте, поддерживает ли браузер эти события. Затем присоедините прослушиватель событий к объекту window , прослушивающему события deviceorientation .
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
Обработка событий ориентации устройства
Событие ориентации устройства срабатывает, когда устройство перемещается или меняет ориентацию. Он возвращает данные о разнице между устройством в его текущем положении относительно системы координат Земли .
Событие обычно возвращает три свойства: alpha , beta и gamma . В Mobile Safari дополнительный параметр webkitCompassHeading возвращается вместе с направлением компаса.
Движение устройства
Событие ориентации устройства возвращает данные о повороте, которые включают в себя степень наклона устройства вперед-назад, из стороны в сторону, а также, если в телефоне или ноутбуке есть компас, направление, в котором смотрит устройство.
Используйте движение устройства, когда требуется текущее движение устройства. rotationRate указывается в °/сек. acceleration и accelerationWithGravity указаны в м/сек 2 . Помните о различиях между реализациями браузеров.
Когда использовать события движения устройства
Существует несколько вариантов использования событий движения устройства. Примеры включают следующее:
- Встряхните жест, чтобы обновить данные.
- В играх — для того, чтобы персонажи прыгали или двигались.
- Для приложений для здоровья и фитнеса.
Проверка поддержки и прослушивание событий
Чтобы прослушивать DeviceMotionEvent , сначала проверьте, поддерживаются ли эти события в браузере. Затем прикрепите прослушиватель событий к объекту window , прослушивающему события devicemotion .
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
Обработка событий движения устройства
Событие движения устройства генерируется через регулярные промежутки времени и возвращает данные о вращении (в °/секунду) и ускорении (в м/секунду 2 ) устройства в данный момент времени. Некоторые устройства не имеют аппаратных средств, исключающих влияние гравитации.
Событие возвращает четыре свойства: accelerationIncludingGravity , acceleration , исключающее эффекты гравитации, rotationRate и interval .
Например, давайте посмотрим на телефон, лежащий на плоском столе экраном вверх.
| Состояние | Вращение | Ускорение (м/с 2 ) | Ускорение под действием силы тяжести (м/с 2 ) |
|---|---|---|---|
| Не двигаюсь | [0, 0, 0] | [0, 0, 0] | [0, 0, 9,8] |
| Двигаясь к небу | [0, 0, 0] | [0, 0, 5] | [0, 0, 14,81] |
| Двигаемся только вправо | [0, 0, 0] | [3, 0, 0] | [3, 0, 9,81] |
| Двигаемся вверх и вправо | [0, 0, 0] | [5, 0, 5] | [5, 0, 14,81] |
И наоборот, если бы телефон держали так, чтобы экран был перпендикулярен земле и был виден непосредственно зрителю:
| Состояние | Вращение | Ускорение (м/с 2 ) | Ускорение под действием силы тяжести (м/с 2 ) |
|---|---|---|---|
| Не двигаюсь | [0, 0, 0] | [0, 0, 0] | [0, 9,81, 0] |
| Двигаясь к небу | [0, 0, 0] | [0, 5, 0] | [0, 14,81, 0] |
| Двигаемся только вправо | [0, 0, 0] | [3, 0, 0] | [3, 9.81, 0] |
| Двигаемся вверх и вправо | [0, 0, 0] | [5, 5, 0] | [5, 14.81, 0] |
Пример: расчет максимального ускорения объекта
Один из способов использования событий движения устройства — вычисление максимального ускорения объекта. Например, каково максимальное ускорение человека в прыжке?
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;
}
После нажатия Go! кнопку, пользователю предлагается прыгнуть. В течение этого времени страница сохраняет максимальные (и минимальные) значения ускорения и после перехода сообщает пользователю их максимальное ускорение.