Website development
JavaScript
Development of mobile applications
23 October 2015

Гироскоп и акселерометр в веб-дизайне

From Sandbox


Поддержка использования показателей акселерометра и гироскопа при помощи javascript – это технология, опередившая время. Тогда, в далеком 2010г., мобильный веб не был так развит. Адаптивность верстки не была обязательным пунктом (особенно в рунете), да и вообще сайты были предназначены в основном для просмотра на обычных мониторах. Сейчас же все по-другому, и доля мобильного трафика составляет чуть ли не 50%, но почему-то про эту крайне интересную и эффектную технологию до сих пор мало кто вспоминает. Попробуем исправить ситуацию.

Я не буду повторяться и подробно описывать что к чему – подробности вы сможете найти в публикации «Доступ к гироскопу и акселерометру из javascript» от 2011 г. Расскажу вкратце.

Каждый современный смартфон оснащен гироскопом и акселерометром. Показания этих датчиков могут считываться не только нативными приложениями, но и web-страницами, при помощи javascript. Причем, не нужно никаких разрешений, запросов, исключений безопасности и прочего – показания можно считывать сразу же. Мы можем получать данные об ускорении устройства по трем осям, о вращении устройства по тем же осям и об ускорении с учетом гравитации. К сожалению, по известным причинам, мы не можем получать данные о скорости устройства в пространстве.

Для наших целей, в JS существуют события DeviceOrientationEvent и DeviceMotionEvent. Об их использовании можно прочитать в указанной выше статье. Я же предпочитаю чуть более удобный подход – библиотеку gyronorm. Чем это лучше использования обычного JS? Библиотека позволяет выполнить настройку получаемых данных. А именно: частоту получения данных с датчиков, нормализацию значений, количество знаков после запятой. Это очень удобно, и именно такой подход позволяет сделать анимацию более плавной и приятной глазу, без рывков. В Сочетании с CSS3 и jQuery можно добиться впечатляющих результатов.

Собственно, о самом применении этих показателей. Первую интересную попытку на Хабре опубликовали в 2012-м году: «Псевдо 3D или параллакс средствами javascript». Автор пытается сделать параллакс, но из-за сырости технологии и плохой поддержки попытка получается не очень удачной. На ум также приходят аналоги некоторых мобильных приложений – игры с шариком и лабиринтом, строительный уровень, etc… Давным-давно на андроиде было веселое приложение, где на экране отображался пистолет или автомат, и при характерном встряхивании телефона раздавался выстрел – помню, оно меня в свое время очень впечатлило. Но сегодня не об этом, а о том, как впечатлить посетителей сайта, используя их же мобильные устройства.

Что ж, возьмите в руки телефоны или планшеты, отключите автоматический поворот экрана (необязательно) и вперед!

Первая демка — минималистичный параллакс, на который меня вдохновил домашний экран ios-устройств. Паралакс для простоты выполнен только по горизонтальной оси – держа телефон перед собой, понаклоняйте его вправо-влево. При этом, на ios-устройствах будет нереально заметить рывки или дергания, но на менее мощных телефонах они все-таки могут наблюдаться.

Это был простой пример. Вот пример посложнее — сочетание показателей датчиков и css-фильтров. Когда ваш телефон лежит горизонтально на столе – отображается четкая картинка. Как только вы начнете наклонять его на себя – картинка начинает размываться и при достижении аппаратом 45 градусов плавно появляется надпись. Этим нехитрым приемом вполне можно впечатлить пользователей, зашедших на ваш сайт. Также можно использовать и другие фильтры – выбор ограничен только вашей фантазией (ну и немножко, поддержкой фильтров браузерами).

Еще о сочетании фильтров и гироскопа – пример с оттенками. Положите телефон на стол, дождитесь загрузки странички и повращайте его в плоскости стола – картинка будет изменять свой цвет, как если бы вы перемещали ползунок hue/saturation в фотошопе. В принципе, можно было бы добавить изменение яркости и насыщенности при вращении по двум другим осям – получился бы интересный инструмент для дизайнеров (но непонятно, насколько юзабельный).

Кстати, все картинки грузятся с unsplash.it, они рандомные, поэтому если эффект незаметен – попробуйте обновить картинку.

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

Ну и последний пример – just for fun. Картина висит на виртуальной стене в телефоне, качаете телефон – качается картина. Не знаю, как это можно применить на сайте, но штука забавная, на мой взгляд.

Этим скромным обзором я хочу сказать, что пришло время использовать возможности мобильных устройств на сайтах. Мы не используем очень многое – вот вам, к примеру, статья двухгодичной давности: «Тренды фронтэнда. Javascript APIs для мобильных устройств». Уже тогда стало возможным использовать на сайте статус батареи, камеру или вибрацию. Как вам легкая вибрация при нажатии на кнопку на сайте или при всплывающем уведомлении? Это все делается парой строчек кода, но почему-то нигде не встречается. Но я настроен позитивно, и думаю, что в скором времени сайты станут гораздо полнее использовать показания устройств при мобильном серфинге.

Спасибо за внимание!

+13
33.3k 156
Comments 14