Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Ориентация устройства

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

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

В каком положении находится устройство?

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

Система земных координат

Система земных координат описывается значениями осей X, Y и Z, ориентация которых определяется направлением магнитного меридиана и силы тяжести.

  • X: расположена в направлении запад-восток (направлена на восток).
  • Y: расположена в направлении юг-север (направлена на север).
  • Z: представляет собой вертикальное направление, перпендикулярное к земле (направлена вверх).

Система координат устройства

Система координат устройства описывается значениями по осям x, y и z, которые исходят из центра устройства.

Изображение системы координат устройства

  • x: эта ось расположена в плоскости экрана и направлена вправо.
  • y: эта ось расположена в плоскости экрана и направлена к его верхней части.
  • z: эта ось расположена перпендикулярно экрану или клавиатуре и направлена наружу.

На телефоне или планшете ориентация устройства определяется по типичной ориентации экрана. На телефоне или планшете это положение в портретной ориентации. На персональных компьютерах или ноутбуках ориентация определяется по отношению к клавиатуре.

Данные о повороте

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

illustration of device coordinate frame альфа: Угол поворота вокруг оси z = 0°, когда верхняя часть устройства направлена точно на север. При повороте устройства против часовой стрелки значение `alpha` увеличивается.
illustration of device coordinate frame бета: Угол поворота вокруг оси x = 0°, когда верхняя и нижняя части устройства находятся на одинаковом расстоянии от земной поверхности. Значение увеличивается, когда верхнюю часть устройства наклоняют в направлении земной поверхности.
illustration of device coordinate frame гамма: Угол поворота вокруг оси y = 0°, когда левая и правая части устройства находятся на одинаковом расстоянии от земной поверхности. Значение увеличивается, когда правую часть устройства наклоняют в направлении земной поверхности.

Ориентация устройства

Событие 'изменение ориентации устройства' возвращает данные о повороте, такие как угол наклона устройства вперед-назад, из стороны в сторону и, если в телефоне или ноутбуке имеется компас, сведения о том, куда направлена лицевая сторона устройства.

TL;DR

  • Не используйте это событие слишком часто.
  • Проверьте наличие поддержки.
  • Не обновляйте интерфейс при каждом событии. Вместо этого выполняйте синхронизацию с requestAnimationFrame.

Ситуации, в которых следует использовать события "изменение ориентации устройства"

Существует несколько ситуаций, в которых можно использовать события "изменение ориентации устройства". Например:

  • Обновление карты по мере перемещения пользователя.
  • Тонкая настройка интерфейса, например добавление эффектов параллакса.
  • В сочетании с возможностями геолокации можно использовать для пошаговой навигации.

Проверка наличия поддержки и прием событий

Чтобы принимать события DeviceOrientationEvent, сначала проверьте, поддерживаются ли эти события в браузере. Затем подключите приемник событий к объекту window, принимающему события deviceorientation.

if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', deviceOrientationHandler, false);
  document.getElementById("doeSupported").innerText = "";
}

Обработка событий "изменение ориентации устройства"

Событие "изменение ориентации устройства" запускается при перемещении или изменении ориентации устройства. Событие возвращает данные об изменении текущего положения устройства по отношению к системе земных координат.

Обычно событие возвращает три свойства: alpha, beta и gamma. В браузере для мобильных устройств Mobile Safari возвращается дополнительный параметр webkitCompassHeading с заголовком "компас".

Движение устройства

Движение устройства дает информацию о силе ускорения, приложенной к устройству в данный момент, и о скорости вращения

TL;DR

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