Пролистывание страницы движением пальца экрану. Жесты в проектировании и дизайне

С распространением сенсорных дисплеев становится особенно актуальным вопрос комбинаций жестов в компьютерных технологиях. Мультитач позволяет пользователям с помощью простых движений пальцев легко перемещать виртуальные объекты на экране. Большинство ключевых действий на сенсорных устройствах тесно связаны с жестами, они лежат в основе взаимодействия с мобильными устройствами и планшетами. Жесты состоят из тактильной механики (то, что делают пальцы пользователя на его сенсорном экране) и последующей тактильной деятельности (результат тактильной механики).

Ниже собрана необходимая информация, раскрывающая основные особенности сенсорных манипуляций на мобильных устройствах. А также представлены бесплатные векторные вариации жестов, которые можно использовать в работе.

Тактильная механика и тактильная деятельность

Существует достаточно много видов тактильной механики. Ниже представлены наиболее распространенные жесты.

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

Двойное касание сенсорного экрана - следующий наиболее распространенный жест. Двойное касание осуществляется с помощью быстрого двойного «клика» пальцем по экрану устройства. Используется, как правило, для увеличения изображения или области текста на экране.

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

Перетаскивание имеет почти такую же тактильную механику, как и описанное в предыдущем случае действие. Главное отличие заключается в скорости операций.

Смахивание соединяет в себе скольжение и перетаскивание. В данном случае тактильная механика не имеет особых отличий от перетаскивания, кроме как в скорости. Смахивая, палец движется очень быстро, как будто нужно прокрутить экран, чтобы убрать изображение профиля/аватарки/приложения.

Длительное нажатие предполагает прикосновение к элементу экрана и удерживание пальца на нем в течении некоторого времени. Результатом такой тактильной механики может быть открытие окна для копирования участка текста и т.д…

Длительное нажатие и перетаскивание предполагает нажатие с удержанием пальца на экране с последующим движением по его поверхности. Оно используется для изменения порядка расположения значков приложений и т. д.

Двойное касание и перетаскивание - эта комбинация жестов немного более замысловатая. Необходимо нажать на участок экрана, оторвать палец от поверхности и снова нажать с дальнейшим перемещением пальца по поверхности экрана до интересуемого участка. Такая тактильная механика может быть использована, когда надо приблизить содержание в одной области экрана и затем отдалить в другой.

Сведение/Разведение включают одновременное нажатие двумя пальцами, расположенными вблизи или на некотором расстоянии друг от друга, с дальнейшим их разведением или сближением. Жест завершается поднятием пальцев над поверхностью экрана. Обычно, результатом такой механики становится уменьшение или увеличение масштаба изображения.

Одинарное касание двумя пальцами - нажатие, которое совершается двумя пальцами одновременно. Затем следует незамедлительное поднятие обоих пальцев. Жест обычно служит уменьшению масштаба изображения.

Ведение, перетаскивание или смахивание двумя пальцами - эти жесты требуют использование двух пальцев, когда пользователь прикасается к экрану, «скользит» по нему и поднимает их над экраном. Жесты могут использоваться либо для выбора нескольких элементов, либо для наклона, либо для прокрутки.

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

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

Поворот или вращение используется в работе с анимацией и изображениями на мобильных устройствах. Необходимо двумя пальцами нажать на экран с разных сторон центрального объекта и, вращая пальцы по орбите вокруг объекта, повернуть его. Завершается жест традиционно – отнятием пальцев от сенсорного экрана. Использование вращения также пригодится при работе с картой Google, когда ее нужно развернуть горизонтально, для большего удобства.

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

Тактильная механика векторе

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

Узнайте значения новых терминов! Ознакомьтесь с кратким словариком для владельцев айфонов, смартфонов и планшетов.

Известно всем:

Клик (click) - щелчок по кнопке мыши, короткое нажатие.

Дабл-клик, двойной клик (double click) - два быстрых щелчка по кнопке мыши.

Интерфейс (interface) - то, как устройство или приложение «общается» с вами.

Скроллинг (scrolling) – прокрутка экрана.

Скриншот (screenshot) - снимок («фотография») экрана.

Известно многим:

Драг-энд-дроп, дрэг-энд-дроп (drag-and-drop) - «тащить и бросить» - нажать в одном месте, затем двигать и отпустить в другом месте.

Гестуры, жесты (gestures) - разные формы движения мыши, пальца или другого указующего устройства. Могут быть запрограммированы для выполнения определённых действий. Например, движение пальца сверху вниз по экрану мобильного устройства перезагружает страницу.

Тачпад, тачпэд (touch pad) - поле на клавиатуре ноутбука для нажатий и жестов пальцами.

Тачскрин (touch screen) - сенсорный экран: воспринимает нажатия пальцами. Например, экран планшета или банкомата.

Простые движения для сенсорных устройств:

Тап, тэп (tap) - короткое нажатие пальцем, сродни клику.

Двойной тап, Дабл-тап, дабл-тэп (double tap) - два коротких нажатия пальцем, сродни дабл-клику.

Длинный тап, Тач (touch) - нажатие дольше, чем Тап.

Тач-энд-холд (touch and hold) - нажать и держать.

Новые движения для сенсорных устройств:

Флик (flick) - щелчок наискось по экрану в сторону будущего движения изображения экрана, после флика изображение продолжает двигаться по инерции.

Свайп (swipe), Слайд (slide) - продолжительное скольжение пальцем по экрану.

Пинч (pinch) - щипок, сжимающее движение одновременно двумя пальцами по экрану для уменьшения изображения.

Спред / Спрэд (spread), Стретч (stretch: для Microsoft), Пинч-ит-опен (pinch it open: для Apple) - растягивающее движение одновременно двумя пальцами по экрану для увеличения изображения.

Пан, пэн (pan) - медленное движение пальца по экрану для перемещения и разглядывания увеличенной картинки.

Если пропущено что-то важное или вы не согласны с формулировкой, напишите нам: Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.

С помощью жестов TalkBack вы можете легко управлять устройством Android.

Они делятся на три типа: основные, жесты перехода и угловые. Их необходимо выполнять одним движением, с постоянной скоростью, равномерно надавливая на экран.

Основные жесты

Жесты перехода

Угловые жесты

Эти жесты состоят из двух линий, формирующих прямой угол. Например, чтобы перейти на главный экран, нужно сначала провести вверх, потом резко влево под углом 90 градусов (этот жест установлен по умолчанию).

Примечание . Жест, открывающий панель уведомлений (вправо, затем вниз), поддерживается не во всех версиях TalkBack. Если он не сработал на вашем устройстве, проведите двумя пальцами от верхнего края экрана вниз.

Жесты двумя пальцами

Все жесты TalkBack выполняются одним пальцем. Пока вы касаетесь экрана одним пальцем, ваши жесты отправляются только в TalkBack.

Однако при использовании двух или более пальцев ваше прикосновение или жест распознается непосредственно приложением, а не TalkBack. Например, вы можете прокручивать страницы двумя пальцами.

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

Настройка жестов TalkBack

Все вышеперечисленные жесты установлены по умолчанию. При желании вы можете изменить их назначение.

На устройствах с Android используется сенсорный экран. Пользователям, которые привыкли к кнопочному управлению, бывает непросто перестроиться на работу с сенсорным экраном.

При кнопочном управлении используется клавиатура и мышка, а управление сенсорным экраном происходит при помощи пальцев рук или с помощью стилуса.

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

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

Рассмотрим основные семь приемов, применяемых на сенсорных экранах. Жесты Андроид могут быть следующие:

1. Касание (нажатие)

Касание (или нажатие) - это основное действие, которое чаще всего применяется на сенсорном экране.

Касание необходимо во многих случаях:

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

Выполняется касание просто. Достаточно легко прикоснуться пальцем руки или стилусом в необходимом месте на экране, например, прикоснуться к значку нужного приложения.

Для ввода текста достаточно коснуться нужного поля, автоматически появится виртуальная клавиатура, можно печатать текст, касаясь клавиш с нужными символами.

Невольно вспоминается, как много лет назад я подошла к терминалу, нажала на кнопки терминала, чтобы положить деньги на мобильный телефон. В общем, делала все как обычно, а ничего не происходило на терминале, терминал не реагировал на кнопки. Так я сделала 3 или 4 подхода к терминалу в разные дни с нулевым результатом. В какой-то хороший день молодой человек, который стоял в очереди к терминалу за мной, сказал: «А если нажать пальцем на экран?». И вот оно, счастье: я нажала пальцем на экран и терминал стал реагировать на нажатия, все получилось. Так я впервые встретилась с сенсорным экраном.

2. Двойное касание

Двойное касание (или двойное нажатие) применяется для быстрого масштабирования, для запуска каких-то приложений и других действий.

Для изменения масштаба, например, при просмотре какой-либо веб-страницы, надо 2 раза с минимальным интервалом быстро коснуться экрана. Чтобы вернуться к прежнему состоянию, надо опять сделать двойное касание по экрану.

Одно двойное касание включает соответствующую опцию, повторное двойное касание отменяет эту же опцию.

Если сравнивать Android с Windows, то двойное касание в Андроиде чем-то похоже на двойной щелчок левой кнопкой в Виндовс.

3. Касание с удержанием

Нажатие (касание) с удержанием используется для того, чтобы открыть дополнительные опции, если они есть.

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

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

4. Смахивание (пролистывание)

Смахивание можно также назвать пролистыванием или прокруткой. Слегка прикоснувшись к экрану, надо не отпуская палец, провести пальцем сверху вниз, снизу вверх, слева направо, либо справа налево, то есть, как бы смахнуть слегка «пыль с экрана» в нужном направлении.

Смахивание (пролистывание) применяется для переключения между страницами на Рабочем столе, для прокрутки различных списков и т.п. В зависимости от настройки блокировки экрана Андроида может быть так, что смахивание наискосок (по диагонали) означает разблокировку экрана – такое смахивание наискось тоже применяется, а не только махи снизу вверх или справа налево.

Когда мне впервые на смартфоне понадобилось отправить сообщение на русском языке по , для этого нужно было на виртуальной клавиатуре сменить раскладку с английской на русскую. Перепробовала все варианты, даже зашла в настройки языка - никак не получалось: английская раскладка «стояла как вкопанная». Мне подсказали, что надо просто слегка махнуть пальцем по пробелу слева направо. Кстати, я видела надпись «English» на клавише пробела на виртуальной клавиатуре, нажимала на нее, но безрезультатно. А как только махнула пальцем по пробелу, так раскладка сразу поменялась на русскую. Вот оно смахивание, работает!

5. Перетягивание (перетаскивание)

Перетягивание (или перетаскивание) требуется для перемещения приложений на экране, а также для переноса папок, значков и т.п.

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

6. Сведение и разведение пальцев

Простая и полезная функция для изменения масштаба того, что отображается на экране: картинка, текст, карта, схема и т.п. Можно увеличить масштаб, а при необходимости снова его уменьшить.

Для этого нужно коснуться экрана сразу двумя пальцами (или несколькими) и, не отрывая пальцы от экрана, развести их в стороны. Масштаб пропорционально увеличится.

Если коснуться экрана двумя пальцами (или несколькими) и, не отрывая их от экрана, свести вместе, то масштаб уменьшится.

7. Изменение ориентации экрана

Книжная (вертикальная) ориентация удобна, чтобы читать книги. Альбомная (горизонтальная) ориентация хорошо подойдет при просмотре видеороликов и различных карт. Все это, конечно, на любителя, каждый выбирает сам, какая ориентация лучше в том или ином случае.

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

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

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

P.S. Посмотрите другие материалы:

Получайте актуальные статьи по компьютерной грамотности прямо на ваш почтовый ящик .
Уже более 3.000 подписчиков

Разрабатывая приложения для Android и iPhone с iPad (IOS) используя лишь веб-технологии, перед каждым девелопером встаёт рано или поздно вопрос реализации и использования в своей игре или приложении сложными мультитач действиями, такими как свайп, щепотка, а также обработки длительного тапа (длительное касание одним пальцем без движения) и drag"n"drop.

В этом материале мы рассмотрим способы осуществления обработки тач-событий разной сложности на Javascript Event"ах, без сторонних библиотек (jQuery min только прихватим).

Сразу оговорюсь, что использовать jQuery я буду только для того чтобы отключить дефолтное поведение браузера на событие. Мне не нравится эта библиотека, поэтому всё будет написано на Vanilla JS.

Итак, начнём мы с теории и собственно коснёмся того какие события стоит использовать при создании приложения или игры.

Всего используются 3 ключевых события:

touchstart - Коснулись экрана

touchend - Палец убрали

touchmove - Двигаем пальцем

Если чтобы получить элемент на который заехала мышь или съехала, было достаточно вызвать event.target, то с touch-событиями не так всё просто.

Каждое касание должно идентифицироваться. И для этого используются списки:

touches - Все пальцы которые сейчас взаимодействуют с экраном ("Коснуты" экрана)

targetTouches - Список пальцев которые взаиможействуют с элементом

changedTouches - Список пальцев, которые учавствуют в текущем событии. Если например это событие touchend, то список будет содержать палец который был убран (Даже если остальные 4 пальца до сих пор на экране).

Чтобы было проще понять вот ситуация:

Я ставлю один палец на экран и все 3 списка имеют один элемент.

Я ставлю второй палец и теперь touches имеет 2 элемента, targetTouches будет иметь 2 элемента если второй палец я поставлю на тот же HTML элемент что и первый, а changedTouches в свою очередь будет иметь только второй палец, так как именно он вызвал событие.

Если я поставлю на экран сразу 2 пальца одновременно, тогда changedTouches будет иметь 2 элемента (по каждому на палец).

Если я начну двигать своими пальцами по экрану, то будет меньться только список changedTouches. Количество элементов которое он будет содержать будет равняться количеству пальцев задействованных в движение (как минимум 1).

Если я уберу палец, то списки touches, targetTouches опустеют на один элемент, а changedTouches будет содердать палец, так как он вызвал событие (touchend)

Когда я уберу последний палец, списки touches, targetTouches не будут содержать ничего, а changedTouches будет иметь информацию о этом самом пальце.

Теперь самое время узнать какую именно информацию мы можем получить о пальце:

identifier - Уникальный ID касания

target - Сам объект к которому мы коснулись

PageX,PageY - Координаты касания на странице

Посмотреть уникальный ID единственного касания можно вызвав event.touches.identifier , а на IOS, если я не ошибаюсь надо делать так event.originalEvent.touches.identifier .

Что ж, кой чему я вас уже научил, а теперь самое время перейти к практике.

Перед тем как мы приступим вам следует усвоить кое-что. В каждой игре, приложении которое вы будете делать на Android и IOS вы должны отключить стандартную реакцию компонента WebView на события. Для этого мы и подключали jQuery (Я не смог сделать на Pure JS то что делают функции event.preventDefault() и event.stopPropagation() ).

Итак вам нужно поместить в ваш JS код следующее:

event.preventDefault();
event.stopPropagation();

}, false);

event.preventDefault();
event.stopPropagation();
/* Здесь ваш код обработки события*/
}, false);

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

Отвелеклись. Продолжаем.

Давайте имея полученные знания опишем все основные touch взаимодействия с экраном и элементами.

Tap (Косание)

Это событие выполняется просто когда мы косаемся пальцем экрана и убираем его.

var myclick=event.targetTouches; /*Ваш код*/
}
}, false);

На примере в переменной myclick будет содержаться ваше касание.

Long tap (Длительное косание)

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

Реализация 1:

var ldelay;
var betw={};
document.addEventListener("touchstart", function(event) {
event.preventDefault();
event.stopPropagation();
ldelay=new Date();
betw.x=event.changedTouches.pageX;
betw.y=event.changedTouches.pageY;
}, false);
/*Ловим отпускание пальца*/
document.addEventListener("touchend", function(event) {
var pdelay=new Date();
if(event.changedTouches.pageX==betw.x &&
event.changedTouches.pageY==betw.y &&
(pdelay.getTime()-ldelay.getTime())>800){
/*Здесь ваш код*/
}
}, false);

Это первая реализация Long Tap на яваскрипте. Логика такая: ловим касание, замеряем время этого события, ловим отпускание, замеряем время отпускания, вычитаем первое время из второго и проверяем не изменилось ли положения пальца на экране. Если палец на том же месте и времени прошло более 800 миллисекунд, мы выполняем действия Long Tap.

Теперь давайте разберём вторую реализацию с немного другой логикой:

Реализация 2:

var lttimer;
document.addEventListener("touchstart", function(event) {
event.preventDefault();
event.stopPropagation();
lttimer=setTimeout(longTouch,800);
}, false);
document.addEventListener("touchmove", function(event) {
event.preventDefault();
event.stopPropagation();
clearTimeout(lttimer);
}, false);
document.addEventListener("touchend", function(event) {
clearTimeout(lttimer);
}, false);
function longTouch(){/*Ваш код*/}

Выше приведённая реализация события Long Tap на Javascript является более правильной и наиболее часто применяется в мобильных приложениях. Её главное отличие от предыдущей реализации в том что она не дожидается когда будет отпущен палец и сама в том случае если палец не двигался запускает событие Long Tap, которое вы должны поместить в функцию longTouch.longTouch .

Swipe (Листание)

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

Если вы не хотите заморачиваться и вам нужен только функционал Swipe в мобильном приложении, вы можете почитать в самом низу страницы об этом.

Если же вы зардкорный девелопер - поехали!

Реализация 1:

var initialPoint;
var finalPoint;
document.addEventListener("touchstart", function(event) {
event.preventDefault();
event.stopPropagation();
initialPoint=event.changedTouches;
}, false);
document.addEventListener("touchend", function(event) {
event.preventDefault();
event.stopPropagation();
finalPoint=event.changedTouches;
var xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX);
var yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY);
if (xAbs > 20 || yAbs > 20) {
if (xAbs > yAbs) {
if (finalPoint.pageX < initialPoint.pageX){
/*СВАЙП ВЛЕВО*/}
else{
/*СВАЙП ВПРАВО*/}
}
else {
if (finalPoint.pageY < initialPoint.pageY){
/*СВАЙП ВВЕРХ*/}
else{
/*СВАЙП ВНИЗ*/}
}
}
}, false);

Это у нас первая реализация свайпа на Javascript. Особенность этой реализации в том что событие засчитывается как свайп, когда вы отпускаете палец участвующий в событии. Данный свайп может быть применён в некоторых задачах. Не забывайте в этом и многих других премерах выключать стандартное поведение браузера на тач события (Об этом я писал выше), я не пишу обычно их в приведённых примерах, но вы не забывайте.

А теперь рассмотрим другую - классическую реализацию, когда swipe нужно считать в реальном времени, например при перелистывании страницы:

В этом способе мы пошли немного другим путём и чстично использовали принцип первой реализации. По своей логике это немного более сложный свайп. В том месте где откомментировано /*Обработайте данные*/, вы должны использовать координаты свайпающего пальца. Например, это может быть анимация перелистывания страницы и чем левее палец тем больше отлистывается страница. Для примера мы в той части слушателя события touchmove отслеживали только x-координату, y - прикручивается подобным образом. В переменной otk.x храниться текущее положение пальца относительно точки где он впервые коснулся эрана. Если палец левее этой точки то переменная имеет отрицательное значение, если правее - положительное.

Для примера мы там поставили условие когда палец перемещается на расстояние более 200 пикселей в лево или право от точки касания - мы засчитываем свайп. Для чего это нужно? Например вы можете как только пользователь коснулся и начал двигать палец показывать ему плавное перелистывание страницы, которая идёт за его пальцем, а как только палец уходит за 200 пикселей, совершает окончательная анимация и страница перелистывается. Это как одна из возможных способом применения такого свайпа.

Но зачем тогда событие touchend спросите вы... Иногда пользователь не желает на какое -то расстояние перемещать свой палец для свайпа и во многих приложениях используется свайп как реакция на быстрое перемещение пальца по экрану в сторону на небольшое расстояние. Именно это мы и применили в последнем слушателе событий.

Drag"n"Drop (Перетаскивание элемента)

Нередко в интерфейсах приложений и в играх приходится перетаскивать пальцем один из элементов в определённое место. Давайте сделаем это на javascript заточенным под сенсорные экраны. Начнём:

Как видно это не весь код, у нас пока получился drag без drop"а. Вы уже наверняка обратили внимание что передвижение элемента в конечном счёте производится css параметрами left и top . Можно вместо этих двух строчек, отвечающих за передвижение объкта по экрану поставить:

obj.style.WebkitTransform="translate("+(touch.pageX-touchOffsetX)+"px,"+(touch.pageY-touchOffsetY)+"px)";

Т.е. использовать CSS3, однако в своём случае я не заметил прироста производительности, пожтому лувше top и left . Этим кодом вы можете передвигать предмет по полю, но его отпускание на каком-то определённом месте засчитано не будет. Чтобы это реализовать добавим на объект обработчик touchend с соответствующим кодом внутри:

Для того чтобы всё работало, укажите ваш объект в переменную tarobj и будет вам счастье.

Pitch (Щепотка)

Настало время вспомнить знаменитую щепотку, которую впервые показал Стив Джобс, когда презентовал первый айфон. Именно это движение двумя пальцами друг к друг другу или друг от друг от друга и называется щепоткой. Обычно этот жест используется для увеличения или уменьшения чего-либо.

В примере ниже отмечены комментариями ключевые моменты (чтобы код не сливался в полнейшую пшеничную кашу):

/*Определяем некоторые переменные*/
var objzoom = document.getElementById("dro");
var scaling = false;
var dist = 0;
var scale_factor = 1.0;
var curr_scale = 1.0;
var max_zoom = 8.0;
var min_zoom = 0.5
/*Пишем функцию, которая определяет расстояние меж пальцами*/
function distance (p1, p2) {
return (Math.sqrt(Math.pow((p1.clientX - p2.clientX), 2) + Math.pow((p1.clientY - p2.clientY), 2)));
}
/*Ловим начало косания*/
objzoom.addEventListener("touchstart", function(evt) {
evt.preventDefault();
var tt = evt.targetTouches;
if (tt.length >= 2) {
dist = distance(tt, tt);
scaling = true;
} else {
scaling = false;
}
}, false);
/*Ловим зумирование*/
objzoom.addEventListener("touchmove", function(evt) {
evt.preventDefault();
var tt = evt.targetTouches;
if (scaling) {
curr_scale = distance(tt, tt) / dist * scale_factor;
objzoom.style.WebkitTransform = "scale(" + curr_scale + ", " + curr_scale + ")";
}
}, false);
/*Ловим конец косания*/
objzoom.addEventListener("touchend", function(evt) {
var tt = evt.targetTouches;
if (tt.length < 2) {
scaling = false;
if (curr_scale < min_zoom) {
scale_factor = min_zoom;
} else {
if (curr_scale > max_zoom) {
scale_factor = max_zoom;
} else {
scale_factor = curr_scale;
}
}
objzoom.style.WebkitTransform = "scale(" + scale_factor + ", " + scale_factor + ")";
} else {
scaling = true;
}
}, false);

В примере мы используем для теста объект с id dro , вы можете использовать свой объект, прописав его переменной objzoom . В переменных вы можете поменять данные, например максимальный зум или минимальный.

Слайдинг изображений и HTML

Мы уже выше описали ка сделать swipe на основе которого можно сделать слайдинг изображений или своих данных в HTML коде. Однако некоторых может не устроить такое и если вы в числе тех кто хочет проще и быстрее получить результат не вдаваясь в подробности, для вас этот подраздел.

Первым делом отметим бесплатную JS-разработку под названием Fotorama , которая очень функциональна и пригодится разработчикам мобильных приложений, кто хочет использовать слайдинг.

Есть также красивый слайдинг изображений .

Помимо такого мануального создания тач-оболочки приложения или игры, вы можете использовать фреймворк. Вот список популярных в этой теме фреймворков Sencha Touch , jQ Touch , JQuery Mobile .

Последний вопрос - вопрос совместимости этого всего с мобильными платформами. Что ж, touch поддерживают Android 2.3-4.X и IOS. А вот мультитач поддерживают все кроме Android 2.3.

Не забывайте что вешать обработчики на HTML-объекты стоит тогда когда они уже известны, т.е. в событии window.onload или DOMContentLoaded .

Если есть чем дополнить статью - пишите в комментариях.