Разработка мультитач веб-приложений
Мобильные устройства такие как сматрфоны или планшеты обычно имеют емкостный экран, чувствительный к прикосновениям для расширенного взаимодействия с пользователем.
С каждым днем мобильные приложения становятся все сложнее и сложнее. Веб-разработчикам тоже нужен API для использования всех возможностей тачскрина. Например, какой-нибудь аркаде или файтингу нужна необходимость нажатья нескольких кнопок, эту возможность может предоставить экран с поддержкой мультитач.
Apple ввел свое touch events API в iOS 2.0, вскоре устройства на Android тоже получили такую возможность и touch events API стал стандартом де-факто. Недавно была собрана рабочая группа W3C для работы над touch events specification.
В этой статье я рассмотрю touch events API, которое нам предоставляют устройства на iOS и Android, мы изучим какие приложения можно создавать, используя touch events API. В статье куча полезных примеров и техник, которые позволяют упростить написание приложений с touch events API.
События
Эти три основных события представлены в спецификации и поддерживаются многими устройствами:
touchstart: прикосновение к DOM element (аналог mousedown).
touchmove: движение пальца по DOM element (аналог mousemove).
touchend: палец убран с DOM element (аналог mouseup).
Каждое событие включает в себя три списка точек прикосновения (списки пальцев):
touches: список всех точек прикосновения на экране.
targetTouches: список точек на текущем элементе.
changedTouches: список пальцев, участвующих в текущем событии. Например, в событии touchend это тот палец, который был убран.
Каждый элемент списка представляет из себя объект формата:
identifier: уникальный идентификатор пальца, который сейчас на течскрине
target: DOM element, который является целью события
координаты client/page/screen: точка возникновения события на экране
radius и rotationAngle: эллипс, который описывает форму пальца
Приложения с поддержкой прикосновений
События touchstart, touchmove и touchend предоставляют достаточно мощный API для создания любых взаимодействий, основанных на прикосновении включая все обычные мультитач жесты — зум, вращение и так далее.
Этот пример позволяет вам перетаскивать DOM element, используя одноточечное прикосновение:
Ниже есть пример, который отображает все прикосновения на экране. 
Картинка кликабильна
Вот его код:
Демки
Появилось уже большое количество приложений с поддержкой мультитач, одно из них рисовалка, основанная на canvas, созданная Paul Irish
И демка Browser Ninja — клон Fruit Ninja, использующая CSS3 transforms, transitions и canvas:
Важные Моменты
Предотвращение зума
Настройки по умолчанию не очень подходят для мультитач, часто ваши движения пальцами воспринимаются мобильным браузером как команды для зума или скролла.
Для отключения зума вам необходимо приписать следующий мета-тег:
Предотвращение скролла
Некоторые мобильные устройства имеют поведение по умолчанию для жеста «скролл» (touchmove), такие как классический оверскролл в iOS, что приводит к возвращению страницы назад, если скролл превысил допустимые рамки. Это сбивает с толку в мультитач приложениях, но может быть легко отключено:
Рисуйте аккуратно
Если вы пишете мультитач приложение, которое включается в себя сложное многопальцевые жесты, то будьте осторожны с ними так как вы будете получать очень много событий. Рассмотрим предыдущий пример, в котором рисовались все точки прикосновения. Вы можете это сделать таким образом:
Этот метод не масштабируется с числом пальцев на экране. Вместо этого вы можете использовать цикл для отрисовки всех пальцев и получения значительно лучше производительности:
Таймеры на setInterval — это не очень хороший способ для создания анимаций, т.к. он не синхронизируется с циклом перерисовки браузера. Современные десктопные браузеры предоставляют функцию requestAnimationFrame, которая лучше подходит для цикличных анимаций — она производительней и тратит меньше батареи. Как только она будет поддерживаться всеми современными браузерами использование setInterval будет плохим тоном.
Использование targetTouches и changedTouches
Важно понять, что event.touches это массив всех пальцев, которые контактируют с экраном, не только те, что касаются DOM element’а. Наиболее подходящим обычно является event.targetTouches или event.changedTouches.
Наконец, если вы разрабатываете под мобильные устройства, вы должны знать важные моменты, которые описаны в статье Eric Bidelman и в документе W3C.
Поддержка устройств
К сожалению не все устройство поддерживают события прикосновения в должном качестве. Я написал скрипт для диагностики, который отображает информацию о поддержке touch API тем или иным устройством, а также точность touchmove. Я протестировал Android 2.3.3 на Nexus One и Nexus S, Android 3.0.1 на Xoom, и iOS 4.2 на iPad и iPhone.
В двух словах, все эти браузеры поддерживают touchstart, touchend, и touchmove.
В спецификации описаны ещё 3 события, но ни один из браузеров не поддерживает их:
touchenter: палец входи в DOM element.
touchleave: палец покидает DOM element.
touchcancel: касание прервано (зависит от реализации).
Все протестированные браузеры также предоставляют списки прикосновений — touches, targetTouches и changedTouches. Однако, ни один из браузеров не поддерживает ни radiusX ни radiusY ни rotationAngle, которые определяют форму пальца.
Событие touchmove, срабатывает порядка 60 раз в секунду на всех протестированных устройствах.
Android 2.3.3 (Nexus)
В браузере Android Gingerbread (Nexus One и Nexus S) отсутствует поддержка multi-touch. Это известная проблема.
Android 3.0.1 (Xoom)
В браузере Xoom есть поддержка мультитача, но она работает только на одном DOM элементе. Браузер не может корректно обработать два параллельных события на разных DOM элементах. Другими словами, следующий код будет обрабатывает два параллельных события:
iOS 4.x (iPad, iPhone)
Устройства на iOS в полной мере поддерживают Touch API.
Инструменты разработчика
В мобильной разработке всегда проще прототипировать на компьютере и по необходимости использовать живое мобильное устройство для теста. Мультитач это одна из всех вещей, которую сложно протестировать на обычном ПК, т.к многие ПК не поддерживают мультитач.
Необходимость тестирования на мобильных устройствах может увеличить цикл разработки, т.к. каждое изменение вы должны залить на сервер, а затем на устройство (прим. пер. Очень сомнительное затруднение). На мобильных устройствах отсутствуют необходимые инструменты разработчика.
Решение этой проблемы — симулирование события прикосновения на вашем ПК. Одноточечное прикосновение можно симулировать мышкой. Мультитач может быть симулирован на устройствах с поддержкой мулититач, например на новых Apple MacBook.
Одноточечные события
Если вы желаете симулировать одноточечное событие на вашем ПК, то попробуйте Phantom Limb, которая симулирует события прикосновения на страницах.
Также существует плагин Touchable для jQuery, который обединяет события мыши и прикосновения.
Мультитач события (решение только для MAC)
/Library/Internet Plug-Ins/.
2. Скачайте приложение TongSeng TUIO для MagicPad и запустите сервер.
3. Скачайте JavaScript библиотеку MagicTouch.js для симуляции событий прикосновения, совместимых со стандартом.
4. Подключите magictouch.js и плагин npTuioClient:
Я тестировал этот метод только в Chrome 10, но он должен работать и в других современных браузерах.
Если ваш ПК не поддерживает мультитач вы можете симулировать события прикосновения, используетя другие TUIO трекеры такие как reacTIVision. Подробная информация доступна на сайте проекта TUIO.
Ваши жесты могут пересекаться с жестами OS. На OS X вы можете настроить системные события в System Preferences > Trackpad
Мультитач события поддерживаются все большим числом мобильных браузеров, Я очень рад, что новые веб-приложения используют этот API в полную силу.
От переводчика
В комментариях к оригинальной статье также проскакивала ссылка: Touching and Gesturing on the iPhone
Предложения, пожелания, критика приветствуется!
Источник
Полный список
— обрабатываем множественные касания
Разобравшись с одиночным касанием на прошлом уроке, приступаем к множественному касанию, которое зовется мультитач.
Система умеет обрабатывать до 10 касаний включительно. Есть мнение, что это как-то связано с количеством пальцев на руках 🙂 При этом учитывайте, что далеко не все устройства поддерживают 10 касаний.
Рассмотрим систему событий для мультитача. К событиям ACTION_DOWN, ACTION_MOVE и ACTION_UP добавляются ACTION_POINTER_DOWN и ACTION_POINTER_UP.
ACTION_DOWN – срабатывает при касании первого пальца
ACTION_POINTER_DOWN – срабатывает при касании каждого последующего пальца
ACTION_MOVE — срабатывает при любом движении
ACTION_ POINTER_UP – срабатывает при отпускании каждого пальца кроме последнего
ACTION_ UP – срабатывает при отпускании последнего пальца
Теперь надо понять, как отличить — для какого именно пальца сработали события ACTION_POINTER_DOWN и ACTION_ POINTER_UP. Для этого используются две системы нумерации – индекс и ID.
Индекс – порядковый номер пальца. Не привязан к пальцу – один палец может иметь разные индексы в течение одного касания.
ID — привязан к пальцу от начала до конца касания.
Чтобы стало понятнее, рассмотрим ситуацию с тремя пальцами. Обозначим их — П1, П2 и П3. Будем касаться ими экрана и смотреть какие индексы и ID система им присваивает.
Касаемся экрана пальцем П1.
Для П1: индекс = 0, >
Далее касаемся экрана пальцем П2, не отпуская П1. Получим такие данные:
П1: индекс = 0, > П2: индекс = 1, >
Далее касаемся экрана пальцем П3, не отпуская П1 и П2. Получим такие данные:
П1: индекс = 0, > П2: индекс = 1, > П3: индекс = 2, >
Теперь отпускаем палец П1. Получаем:
П2: индекс = 0, > П3: индекс = 1, >
Видим, что П2 и П3 сохранили свои ID, а их индексы сместились.
Отпустим палец П2, получим:
П3 сохранил свой ID, который был изначально. А индекс его сначала был 2, потом 1, теперь 0.
Держим П3. Коснемся экрана пальцем П1, получим:
П1: индекс = 0, > П3: индекс = 1, >
П1 получил первый свободный ID — 0. Индекс его тоже стал 0. А П3 получил индекс 1.
Держим П3 и П1. Коснемся экрана пальцем П2, получим:
П1: индекс = 0, > П2: индекс = 1, > П3: индекс = 2, >
П2 получил первый свободный ID — 1. И он сместил П3 в списке индексов.
На этом примере мы видим, что новое касание получает минимальный свободный ID, и индексы всегда перестраиваются так, чтобы ID шли по возрастанию. На этом примере четко видно, что ID привязан к касанию (пока оно длится – ID неизменен). А индексы – это просто номера касаний, но эти номера вовсе не означают порядок касаний. Индексы и ID могут принимать значения от 0 до 9.
Можно считать, что все текущие касания хранятся в некоем массиве. И ID — это их идентификаторы, а индексы — индексы этого массива касаний.
Вернемся к событиям. События UP и DOWN содержат в себе индекс касания. По этому индексу мы всегда можем получить ID. Событие MOVE информации об индексах не дает. Оно просто уведомляет, что происходит какое-то движение.
Напишем приложение, которое будет выводить на экран индекс последнего прикоснувшегося пальца, индекс последнего отпущенного пальца и всю таблицу индексов, ID и координат касаний.
Project name: P1031_MultiTouch
Build Target: Android 2.3.3
Application name: MultiTouch
Package name: ru.startandroid.develop.p1031multitouch
Create Activity: MainActivity
strings.xml и main.xml нам снова не понадобятся, их не трогаем.
В onCreate мы создаем TextView, присваиваем обработчик – текущее Activity, и помещаем в Activity.
Разбираемся с onTouch. Если для одного касания мы использовали метод getAction, чтобы понять какое событие произошло, то с мультитачем надо использовать getActionMasked. Индекс касания определяется методом getActionIndex. Кол-во текущих касаний – getPointerCount.
Если событие — ACTION_DOWN, значит мы получили первое касание. Ставим метку inTouch = true. Она для нас будет означать, что есть касания. Обратите внимание, что в этой ветке case мы не ставим break – следующая case-ветка (ACTION_POINTER_DOWN) также выполнится при ACTION_DOWN.
Если событие ACTION_POINTER_DOWN (или ACTION_DOWN), то в переменную downPI помещаем индекс касания. Это будет индекс последнего прикоснувшегося пальца.
Если событие — ACTION_UP, значит последнее касание прервано и экрана больше ничего не касается. Ставим inTouch = false, т.е. отсутствие касаний. Очищаем StringBuilder, который содержит информацию о движениях.
Если событие — ACTION_POINTER_UP (или ACTION_UP), то в переменную upPI помещаем индекс касания. Это будет индекс последнего прерванного касания. Т.е. когда мы одно за другим прерываем касания, эта переменная будет содержать один за другим индексы последнего из прерванных.
Если событие ACTION_MOVE – мы перебираем все существующие индексы. С помощью pointerCount определяем, какие из них сейчас задействованы и содержат информацию о касаниях. Для них мы пишем номер индекса, ID (метод getPointerId) и координаты (getX и getY). Для незадействованных пишем только номер индекса. Пишем мы это все в StringBuilder.
Далее при любом событии формируем result, пишем туда индекс последнего касания и последнего завершенного касания. Если в данный момент есть касание (inTouch), то добавляем в результат содержимое StringBuilder с подробной инфой о всех касаниях. И выводим result в TextView.
Все сохраним и запустим. На эмуляторе я не знаю способов добиться мультитача, поэтому я тестирую на планшете. Скрин с него.
Я коснулся экрана 5-ю пальцами (последовательно от большого до мизинца, ID от 0 до 5) и потом один (указательный, убрал с экрана.
down показывает, что последний прикоснувшийся палец был с индексом 4
up показывает, что последний убранный с экрана палец был с индексом 1
pointerCount показывает количество действующих касаний
И строки по индексам показывают подробную информацию о касаниях.
Методы getActionMasked и getActionIndex доступны только с API Level 8.
Для более ранних версий (с API Level 5) используется такой способ получения типа события и индекса:
Это битовые операции. В принципе, в нашем случае вовсе необязательно понимать, что они делают. Но для общего развития имеет смысл с битовыми операциями познакомиться. Тут можно немного почитать об этом.
На следующем уроке:
— используем фрагменты
— разбираемся в их lifecycle
Присоединяйтесь к нам в Telegram:
— в канале StartAndroid публикуются ссылки на новые статьи с сайта startandroid.ru и интересные материалы с хабра, medium.com и т.п.
— в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Kotlin, RxJava, Dagger, Тестирование
— ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня
— новый чат Performance для обсуждения проблем производительности и для ваших пожеланий по содержанию курса по этой теме
Источник
