0,0
рейтинг
23 октября 2015 в 10:57

Разработка → Гироскоп и акселерометр в веб-дизайне из песочницы



Поддержка использования показателей акселерометра и гироскопа при помощи 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 для мобильных устройств». Уже тогда стало возможным использовать на сайте статус батареи, камеру или вибрацию. Как вам легкая вибрация при нажатии на кнопку на сайте или при всплывающем уведомлении? Это все делается парой строчек кода, но почему-то нигде не встречается. Но я настроен позитивно, и думаю, что в скором времени сайты станут гораздо полнее использовать показания устройств при мобильном серфинге.

Спасибо за внимание!
Дмитрий Новиков @dmitriy_novikov
карма
11,0
рейтинг 0,0
Web-разработчик
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (14)

  • +1
    в мобильном Хроме на андроиде 4.4.2 не заработал ни один пример, жаль, хотелось посмотреть
    • 0
      Хром на андроиде 6.0 — тоже не заработало(
    • 0
      Демки гироскоп используют — убедитесь, что он в Вашем телефоне имеется. От версии ОС мало зависит, если что, то у меня тоже 4.4.2 и все ок. Кроме, пожалуй, демки с картиной — ее сильно мотает, хотя может так задумано, в код не смотрел.
    • 0
      На этой версии андроида в стандартном браузере всё работает (кроме hue)
  • 0
    И на айпаде что-то не работает (а должно ли вообще?)
  • +1
    Спасибо за комментарии! Да, действительно, с кроссбраузерностью у этой технологии до сих пор не все хорошо.
    Если материал интересен — сегодня поэкспериментирую с js и css, и если получится улучшить кроссбраузерность — сделаю апдейт поста.
    Я тестил примеры на айфоне, стареньком htc и айпаде мини. В комментариях ВК пишут что на айпаде 3.3 тоже работает.
  • +1
    На Windows phone 8.1 работает параллакс, появление надписи на 45° и слайдер. Блюр и оттенки не работают. Картина тоже крутится, но почему-то изначально висит вбок.
  • 0
    Пример с картиной забавный. Только жутко косячит. Во-первых сам гироскоп не идеален, во вторых чудеса начинаются после того как телефон один-два раза повернётся на бок, если ориентация экрана не заблокирована. У меня уже через 10 секунд картина висела строго вверх, а потом строго вправо.
  • 0
    Android 4.1.1.
    Chrome: работает все.
    Dolphin: параллакс дико колбасит, нижний слой нормально двигается, а верхний быстро появляется-исчезает или что-то такое; надпись появляется, но не блюрится (не поддерживается фильтр); оттенки, вероятно, не работают по той же причине; слайдер куда-то улетает; картина почти работает, но ведет себя не очень предсказуемо, дергается, чувствительность уменьшена.
    Стандартный браузер: ведет себя аналогично Dolphin.

    Пример со слайдером интересный. Для скролла страницы подошло бы отлично.
  • 0
    Nexus 5
    Android 6.0
    Chrome
    Не раотает ничего :(
    • 0
      Может быть хрому не даны разрешения на гироскоп и иже?
  • 0
    Nexus 7 android 5.1

    Все работает, но картина висит вверх ногами.
  • 0
    Test
  • 0
    В ХромЕ на Андроиде 5.1 не работает.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.