Ориентация устройства и усиление; Движение

События движения и ориентации устройства обеспечивают доступ к встроенным акселерометру, гироскопу и компасу мобильных устройств.

Эти события можно использовать для многих целей; в играх, например, для управления направлением или действиями персонажа. При использовании с геолокацией они могут помочь создать более точную пошаговую навигацию или предоставить информацию о конкретном местоположении.

Краткое содержание

  • Определите, какая сторона устройства находится вверху и как устройство вращается.
  • Узнайте, когда и как реагировать на события движения и ориентации.

Какой конец вверх?

Чтобы использовать данные, возвращаемые событиями ориентации и движения устройства, важно понимать предоставляемые значения.

Система координат Земли

Система координат Земли, описываемая значениями 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! кнопку, пользователю предлагается прыгнуть. В течение этого времени страница сохраняет максимальные (и минимальные) значения ускорения и после перехода сообщает пользователю их максимальное ускорение.

Обратная связь