События движения и ориентации устройства обеспечивают доступ к встроенным акселерометру, гироскопу и компасу на мобильных устройствах.
Эти события можно использовать для разных целей, например в играх – для управления направлением движения или действиями персонажа. В сочетании с геолокацией они могут помочь создать более точную пошаговую навигацию или предоставить информацию о конкретном местоположении.
Сводка
- Датчик определяет, какой стороной вверх повернуто устройство и как оно вращается.
- Узнайте, когда и как реагировать на события движения и ориентации.
Где верх, а где низ?
Чтобы использовать данные, возвращаемые событиями ориентации и движения устройства, важно понимать предоставляемые значения.
Система координат Земли
Система координат Земли, описываемая значениями 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;
}
После нажатия кнопки "Вперед!" пользователю предлагается прыгнуть. В течение этого времени страница сохраняет максимальное (и минимальное) значения ускорения, а после прыжка сообщает пользователю его максимальное ускорение.