Пролистывание страницы движением пальца экрану. Что такое гестура, тап, тач, флик, свайп, слайд, пинч, стретч, пан: для смартфона и айфона. Жесты двумя пальцами
На устройствах с Android используется сенсорный экран. Пользователям, которые привыкли к кнопочному управлению, бывает непросто перестроиться на работу с сенсорным экраном.
При кнопочном управлении используется клавиатура и мышка, а управление сенсорным экраном происходит при помощи пальцев рук или с помощью стилуса.
С одной стороны, управление жестами кажется немного примитивным. С другой стороны, жесты Андроид открывают новые горизонты для различных программ, которые реализовать в кнопочном варианте было бы очень сложно, либо невозможно.
Управление сенсорным экраном заключается в том, что он реагирует на прикосновение пальцами или стилусом, и, если надо, повторяет в точности эти движения. Если устройство распознает прикосновения или движения как команды, то они выполняются именно как команды. Задача пользователя простая – освоить нажатия на сенсорный экран так, чтобы они приводили к выполнению тех команд, которые будут понятны устройству и которые нужны пользователю.
Рассмотрим основные семь приемов, применяемых на сенсорных экранах. Жесты Андроид могут быть следующие:
1. Касание (нажатие)Касание (или нажатие) - это основное действие, которое чаще всего применяется на сенсорном экране.
Касание необходимо во многих случаях:
- для включения функций,
- для запуска какого-либо приложения,
- активации того или иного параметра, элемента,
- для выбора нужного значка или соответствующего параметра в списке,
- для ввода текста
- и т.д.
Выполняется касание просто. Достаточно легко прикоснуться пальцем руки или стилусом в необходимом месте на экране, например, прикоснуться к значку нужного приложения.
Для ввода текста достаточно коснуться нужного поля, автоматически появится виртуальная клавиатура, можно печатать текст, касаясь клавиш с нужными символами.
Невольно вспоминается, как много лет назад я подошла к терминалу, нажала на кнопки терминала, чтобы положить деньги на мобильный телефон. В общем, делала все как обычно, а ничего не происходило на терминале, терминал не реагировал на кнопки. Так я сделала 3 или 4 подхода к терминалу в разные дни с нулевым результатом. В какой-то хороший день молодой человек, который стоял в очереди к терминалу за мной, сказал: «А если нажать пальцем на экран?». И вот оно, счастье: я нажала пальцем на экран и терминал стал реагировать на нажатия, все получилось. Так я впервые встретилась с сенсорным экраном.
2. Двойное касаниеДвойное касание (или двойное нажатие) применяется для быстрого масштабирования, для запуска каких-то приложений и других действий.
Для изменения масштаба, например, при просмотре какой-либо веб-страницы, надо 2 раза с минимальным интервалом быстро коснуться экрана. Чтобы вернуться к прежнему состоянию, надо опять сделать двойное касание по экрану.
Одно двойное касание включает соответствующую опцию, повторное двойное касание отменяет эту же опцию.
Если сравнивать Android с Windows, то двойное касание в Андроиде чем-то похоже на двойной щелчок левой кнопкой в Виндовс.
3. Касание с удержанием
Нажатие (касание) с удержанием используется для того, чтобы открыть дополнительные опции, если они есть.
Нужно коснуться необходимой области на экране и удерживать палец в течение нескольких секунд. В момент касания и удержания ничего не происходит, и это на первых порах может вызывать некоторое удивление. Но стоит отпустить палец, как сразу же появится дополнительное меню или произойдет иное действие как следствие касания с удержанием.
Это действие очень похоже на нажатие правой кнопкой мыши в Windows, когда после клика правой кнопкой мыши по какому-либо объекту появляется так называемое контекстное меню с дополнительными опциями объекта.
4. Смахивание (пролистывание)
Смахивание можно также назвать пролистыванием или прокруткой. Слегка прикоснувшись к экрану, надо не отпуская палец, провести пальцем сверху вниз, снизу вверх, слева направо, либо справа налево, то есть, как бы смахнуть слегка «пыль с экрана» в нужном направлении.
Смахивание (пролистывание) применяется для переключения между страницами на Рабочем столе, для прокрутки различных списков и т.п. В зависимости от настройки блокировки экрана Андроида может быть так, что смахивание наискосок (по диагонали) означает разблокировку экрана – такое смахивание наискось тоже применяется, а не только махи снизу вверх или справа налево.
Когда мне впервые на смартфоне понадобилось отправить сообщение на русском языке по , для этого нужно было на виртуальной клавиатуре сменить раскладку с английской на русскую. Перепробовала все варианты, даже зашла в настройки языка - никак не получалось: английская раскладка «стояла как вкопанная». Мне подсказали, что надо просто слегка махнуть пальцем по пробелу слева направо. Кстати, я видела надпись «English» на клавише пробела на виртуальной клавиатуре, нажимала на нее, но безрезультатно. А как только махнула пальцем по пробелу, так раскладка сразу поменялась на русскую. Вот оно смахивание, работает!
5. Перетягивание (перетаскивание)Перетягивание (или перетаскивание) требуется для перемещения приложений на экране, а также для переноса папок, значков и т.п.
Надо коснуться необходимого элемента, дождаться его выделения, затем, не отпуская пальца, переместить этот элемент (папку, файл, значок и т.п.) в нужную точку сенсорного экрана.
6. Сведение и разведение пальцев
Простая и полезная функция для изменения масштаба того, что отображается на экране: картинка, текст, карта, схема и т.п. Можно увеличить масштаб, а при необходимости снова его уменьшить.
Для этого нужно коснуться экрана сразу двумя пальцами (или несколькими) и, не отрывая пальцы от экрана, развести их в стороны. Масштаб пропорционально увеличится.
Если коснуться экрана двумя пальцами (или несколькими) и, не отрывая их от экрана, свести вместе, то масштаб уменьшится.
7. Изменение ориентации экрана
Книжная (вертикальная) ориентация удобна, чтобы читать книги. Альбомная (горизонтальная) ориентация хорошо подойдет при просмотре видеороликов и различных карт. Все это, конечно, на любителя, каждый выбирает сам, какая ориентация лучше в том или ином случае.
Чтобы поменять ориентацию с одной на другую, надо просто повернуть смартфон. При этом в параметрах экрана должна быть активирована функция Поворот экрана. Если функция деактивирована, то поворот изображения происходить не будет.
Это далеко не все возможные варианты жестов, но, пожалуй, самые основные и часто используемые. Другие жесты, например, поворот по кругу и т.п. применяются реже, и эти жесты могут работать не в каждой программе. Как правило, перечисленных жестов хватает на все случаи жизни, или почти на все.
Осваиваются они легко и быстро, только для начала надо немного потренироваться. Жесты логически понятны, от них ожидаешь именно этого действия. Разве что касание с удержанием – это немного неестественно. Остальные жесты интуитивно понятны. Потому легко запоминаются.
P.S. Посмотрите другие материалы:
Получайте актуальные статьи по компьютерной грамотности прямо на ваш почтовый ящик
.
Уже более 3.000 подписчиков
Дорогие друзья, начинающие осваивать смартфон!
Если вы перешли с обычного кнопочного мобильника на смартфон с сенсорным экраном (touch screen - тачскрин), то некоторые из вас поначалу испытывают трудности с освоением именно сенсорного экрана . Вам не очень понятно, как нужно касаться экрана, сколько задерживать касание, как перемещаться по странице и т.п. В этой статье постараюсь кратко описать основные особенности управления смартфоном .
Должен сразу сказать, что переход с механических кнопок на виртуальные является огромным шагом вперед в развитии мобильных устройств. Он позволяет увеличить площадь экрана почти до всей лицевой поверхности смартфона и облегчить управление. Но вместе с тем поначалу появляется и некоторое неудобство . Обычный телефон можно было брать в руку как угодно и касаться любых частей передней панели и экрана. У смартфонов нужно быть более осторожным, поскольку любое случайное касание поверхности экрана может вызвать нежелательное действие. Нужно выработать привычку держать в руке смартфон, не касаясь экрана без нужды, по крайней мере, пока он находится в разблокированном состоянии.
Итак, вот основные приемы управления сенсорным экраном:
Одиночное касание (tap)Это быстрое (практически без задержки) касание экрана одним пальцем . Задержка не должна превышать 0.5 секунды. Любое касание достаточно делать легко, так как современные емкостные сенсорные экраны очень чувствительны (в отличие от уже ушедших в прошлое резистивных).
На главном экране (и любом рабочем экране – рабочем столе) одиночное касание иконки приложения вызывает запуск приложения. Это аналог нажатия левой кнопки мыши на обычном компьютере. В остальных случаях внутри приложения это может быть выбор варианта из нескольких предложенных, выбор контакта в списке контактов, подтверждение действия и т.п.
Одиночное касание в текстовых полях вставляет курсор в место касания.
Касание с задержкой (long tap)Это касание одним пальцем с задержкой более 1 сек (до появления результата). Результат может быть различным в зависимости от ситуации. В большинстве случаев это действие приводит к появлению контекстного меню (аналог правой кнопки мыши).
Нажатие с задержкой иконки на главном экране приводит к «прилипанию» к пальцу этой иконки, что дает возможность ее перемещения по экрану, в том числе на соседний рабочий экран, а также удаления иконки (не самого приложения) в возникающую на экране корзину.
В текстовых полях задержка приводит к выделению фрагмента текста под пальцем с возможностью дальнейшего расширения выделения с помощью возникающих концевых меток, одновременно появляется меню Копировать, Выбрать все, Вырезать, Вставить . Задержка на метке курсора приводит к появлению меню Вставить (последнее содержимое буфера обмена), Вставить из буфера обмена (любое из 20 последних содержимых буфера обмена).
Двойное касание (double tap)Двойное касание одним пальцем с коротким интервалом между касаниями (не более 0.2 сек). Применяется для попеременного увеличения и уменьшения масштаба веб страницы в браузере, картинки в Галерее и т.п. Кликнуть нужно именно на той области экрана, которую вы хотите рассмотреть крупнее и подробнее.
Касание с перемещением (tap & drag)Это касание одним пальцем с немедленным (задержка не более 0.2 сек) началом перемещения пальца по экрану, не отпуская пальца. Дальнейшая задержка на одном месте уже после начала перемещения не играет роли: содержимое экрана как бы прилипает к пальцу до момента отпускания. Так делается пролистывание рабочих столов (экранов), страниц в браузере в любом направлении, пролистывание списков (например, контактов) и т.п. Этот жест также служит для перемещения движков различных виртуальных регуляторов (например, громкости, яркости и т.п.).
Смахивание (swipe)Это действие одним пальцем похоже на предыдущее, но только делается без длительного перемещения по экрану, напоминает быстрый мазок кистью по бумаге. При этом содержимое экрана продолжает перемещаться даже после отрыва пальца от экрана в процессе «мазка» с постепенным замедлением. Я помню видео, как первая демонстрация этого эффекта Стивом Джобсом на презентации Apple iPhone 2G в 2007 году сорвала шквал аплодисментов.
Теперь рассмотрим приемы касания двумя пальцами . При этом пальцы могут быть на одной руке или на разных, это безразлично.
Сведение (щипок) и разведение двух пальцев (pinch, zoom)Этот прием используется для плавного уменьшения и соответственно увеличения масштаба изображения на экране (картинки, веб страницы). Вы ставите оба пальца на экран практически одновременно, а затем делаете движение по сведению пальцев (щипок) или их разведению. Направление перемещения пальцев (вправо-влево, вверх-вниз или промежуточные движения) роли не играет.
Вращение двумя пальцами (rotate)Это еще один прием, применяемый для вращения изображения на экране. Два пальца после прикосновения к экрану совершают перемещение каждый по дуге окружности в одинаковом направлении (по часовой или же против часовой стрелки). Или же один палец стоит неподвижно в центре вращения, а другой перемещается по дуге вокруг этого центра. Этот способ применяется достаточно редко. Например, я пользовался им при редактировании изображения в приложении MDScan для получения отсканированных копий документов.
Узнайте значения новых терминов! Ознакомьтесь с кратким словариком для владельцев айфонов, смартфонов и планшетов.
Известно всем:Клик (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 для просмотра.
Разрабатывая приложения для 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);
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 нужно считать в реальном времени, например при перелистывании страницы:
var startPoint={};
var nowPoint;
var ldelay;
document.addEventListener("touchstart", function(event) {
event.preventDefault();
event.stopPropagation();
startPoint.x=event.changedTouches.pageX;
startPoint.y=event.changedTouches.pageY;
ldelay=new Date();
}, false);
/*Ловим движение пальцем*/
document.addEventListener("touchmove", function(event) {
event.preventDefault();
event.stopPropagation();
var otk={};
otk.x=nowPoint.pageX-startPoint.x;
/*Обработайте данные*/
/*Для примера*/
if(Math.abs(otk.x)>200){
if(otk.x0){/*СВАЙП ВПРАВО(СЛЕД.СТРАНИЦА)*/}
startPoint={x:nowPoint.pageX,y:nowPoint.pageY};
}
}, false);
/*Ловим отпускание пальца*/
document.addEventListener("touchend", function(event) {
var pdelay=new Date();
nowPoint=event.changedTouches;
var xAbs = Math.abs(startPoint.x - nowPoint.pageX);
var yAbs = Math.abs(startPoint.y - nowPoint.pageY);
if ((xAbs > 20 || yAbs > 20) && (pdelay.getTime()-ldelay.getTime()) yAbs) {
if (nowPoint.pageX < startPoint.x){/*СВАЙП ВЛЕВО*/}
else{/*СВАЙП ВПРАВО*/}
}
else {
if (nowPoint.pageY < startPoint.y){/*СВАЙП ВВЕРХ*/}
else{/*СВАЙП ВНИЗ*/}
}
}
}, false);
В этом способе мы пошли немного другим путём и чстично использовали принцип первой реализации. По своей логике это немного более сложный свайп. В том месте где откомментировано /*Обработайте данные*/, вы должны использовать координаты свайпающего пальца. Например, это может быть анимация перелистывания страницы и чем левее палец тем больше отлистывается страница. Для примера мы в той части слушателя события touchmove отслеживали только x-координату, y - прикручивается подобным образом. В переменной otk.x храниться текущее положение пальца относительно точки где он впервые коснулся эрана. Если палец левее этой точки то переменная имеет отрицательное значение, если правее - положительное.
Для примера мы там поставили условие когда палец перемещается на расстояние более 200 пикселей в лево или право от точки касания - мы засчитываем свайп. Для чего это нужно? Например вы можете как только пользователь коснулся и начал двигать палец показывать ему плавное перелистывание страницы, которая идёт за его пальцем, а как только палец уходит за 200 пикселей, совершает окончательная анимация и страница перелистывается. Это как одна из возможных способом применения такого свайпа.
Но зачем тогда событие touchend спросите вы... Иногда пользователь не желает на какое -то расстояние перемещать свой палец для свайпа и во многих приложениях используется свайп как реакция на быстрое перемещение пальца по экрану в сторону на небольшое расстояние. Именно это мы и применили в последнем слушателе событий.
Drag"n"Drop (Перетаскивание элемента)Нередко в интерфейсах приложений и в играх приходится перетаскивать пальцем один из элементов в определённое место. Давайте сделаем это на javascript заточенным под сенсорные экраны. Начнём:
var obj = document.getElementById("sat");
/*Ловим касание*/
obj.addEventListener("touchstart", function(event) {
if (event.targetTouches.length == 1) {
var touch=event.targetTouches;
touchOffsetX = touch.pageX - touch.target.offsetLeft;
touchOffsetY = touch.pageY - touch.target.offsetTop;
}
}, false);
/*Передвигаем объект*/
obj.addEventListener("touchmove", function(event) {
if (event.targetTouches.length == 1) {
var touch = event.targetTouches;
obj.style.left = touch.pageX-touchOffsetX + "px";
obj.style.top = touch.pageY-touchOffsetY + "px";
}
}, false);
Как видно это не весь код, у нас пока получился drag без drop"а. Вы уже наверняка обратили внимание что передвижение элемента в конечном счёте производится css параметрами left и top . Можно вместо этих двух строчек, отвечающих за передвижение объкта по экрану поставить:
obj.style.WebkitTransform="translate("+(touch.pageX-touchOffsetX)+"px,"+(touch.pageY-touchOffsetY)+"px)";
Т.е. использовать CSS3, однако в своём случае я не заметил прироста производительности, пожтому лувше top и left . Этим кодом вы можете передвигать предмет по полю, но его отпускание на каком-то определённом месте засчитано не будет. Чтобы это реализовать добавим на объект обработчик touchend с соответствующим кодом внутри:
var tarobj=document.getElementById("dro");
obj.addEventListener("touchend", function(event) {
if (event.changedTouches.length == 1) {
var tarWidth=tarobj.offsetWidth;
var tarHeight=tarobj.offsetHeight;
var tarX=tarobj.offsetLeft;
var tarY=tarobj.offsetTop;
if(
(event.changedTouches.pageX > tarX) &&
(event.changedTouches.pageX < (tarX + tarWidth)) &&
(event.changedTouches.pageY > tarY) &&
(event.changedTouches.pageY < (tarY + tarHeight))){
/*Мы над объектом tarobj*/
}
}
}, false);
Для того чтобы всё работало, укажите ваш объект в переменную 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 .
Если есть чем дополнить статью - пишите в комментариях.
Термин gesture — способ объединить движения пальцем по экрану для запуска какого-то действия; движение пальцем в таком случае используется вместо просто касания или клика. Полное касание (complete touch) или mouse — move-capturing функция — нужна для того, чтобы жесты регистрировались и были абсолютно правильными. Сегодня хорошая поддержка этой функции есть только в браузерах Safari и Android.
Если в твоем веб-приложении пользователю нужно использовать жесты, важно научить его правильным действиям — при помощи справки, анимированных примеров или какого-нибудь другого вида подсказок (рисунок 8.5).
Рис. 8.5. Google Fast Flip новый просмотрищик, использующий жесты на iPhone и Android устройств. Слева вы увидите предупреждающий диалог с инструкциями о том, как его использовать. Вы увидите инструкции только один раз.
Жест SwipeЖест swipe (также известен как flip) — технология для тач-браузеров, обычно используется для перемещения контента вперед-назад. Этот жест используется, например, во многих фото-галереях для смены выведенного на экран изображения и в презентациях для перелистывания слайдов. Суть жеста — простое движение пальцем по оси Х слева направо (горизонтальный swipe) или по оси Y сверху вниз (вертикальный swipe). swipe-жест поддерживается практически в каждом сенсорном устройстве, так как осуществляется одним пальцем.
Для перехвата swipe-действия нет специального стандартного события, поэтому будем эмулировать его, используя имеющиеся стандартные события
В устройствах Symbian 5-го поколения если вместо курсора использовать палец, то для событий mouse down, move и up получаются довольно странные результаты. Событие генерируется только один раз во время действия пальцем «перетащить» (drag), а событие вообще не срабатывает, если палец перемещен из точки начальных mouse-down координат. Поэтому, для обнаружения swipe в некоторых ситуациях нужны разные подходы.
Последовательность действий:
Последний пункт может быть заменен проверкой жеста на-лету внутри события onmousemove.
Если ты используешь в работе jQuery, можно для обнаружения горизонтального жеста swipe на устройствах iPhone использовать бесплатный плагин отсюда http://plugins.jquery.com/project/swipe .
При помощи следующего кода мы можем создать объектно-ориентированную библиотеку для обнаружения swipe (совместимо iPhone, Android и другими устройствами):
/** Creates a swipe gesture event handler */ function MobiSwipe(id) { // Constants this.HORIZONTAL = 1; this.VERTICAL = 2; this.AXIS_THRESHOLD = 30; // The user will not define a perfect line this.GESTURE_DELTA = 60; // The min delta in the axis to fire the gesture // Public members this.direction = this.HORIZONTAL; this.element = document.getElementById(id); this.onswiperight = null; this.onswipeleft = null; this.onswipeup = null; this.onswipedown = null; this.inGesture = false; // Private members this._originalX = 0 this._originalY = 0 var _this = this; // Makes the element clickable on iPhone this.element.onclick = function() {void(0)}; var mousedown = function(event) { // Finger press event.preventDefault(); _this.inGesture = true; _this._originalX = (event.touches) ? event.touches.pageX: event.pageX; _this._originalY = (event.touches) ? event.touches.pageY: event.pageY; // Only for iPhone if (event.touches && event.touches.length!=1) { _this.inGesture = false; // Cancel gesture on multiple touch } }; var mousemove = function(event) { // Finger moving event.preventDefault(); var delta = 0; // Get coordinates using iPhone or standard technique var currentX = (event.touches) ? event.touches.pageX: event.pageX; var currentY = (event.touches) ? event.touches.pageY: event.pageY; // Check if the user is still in line with the axis if (_this.inGesture) { if ((_this.direction==_this.HORIZONTAL)) { delta = Math.abs(currentY-_this._originalY); } else { delta = Math.abs(currentX-_this._originalX); } if (delta >_this.AXIS_THRESHOLD) { // Cancel the gesture, the user is moving in the other axis _this.inGesture = false; } } // Check if we can consider it a swipe if (_this.inGesture) { if (_this.direction==_this.HORIZONTAL) { delta = Math.abs(currentX-_this._originalX); if (currentX>_this._originalX) { direction = 0; } else { direction = 1; } } else { delta = Math.abs(currentY-_this._originalY); if (currentY>_this._originalY) { direction = 2; } else { direction = 3; } } if (delta >= _this.GESTURE_DELTA) { // Gesture detected! var handler = null; switch(direction) { case 0: handler = _this.onswiperight; break; case 1: handler = _this.onswipeleft; break; case 2: handler = _this.onswipedown; break; case 3: handler = _this.onswipeup; break; } if (handler!=null) { // Call to the callback with the optional delta handler(delta); } _this.inGesture = false; } } }; // iPhone and Android"s events this.element.addEventListener("touchstart", mousedown, false); this.element.addEventListener("touchmove", mousemove, false); this.element.addEventListener("touchcancel", function() { _this.inGesture = false; }, false); // We should also assign our mousedown and mousemove functions to // standard events on compatible devices }
Вот простой пример использования нашей бибилотеки swipe.js с с горизонтальным обнаружением swipe и другим с вертикальным обнаружением:
Swipe Gesture Detection window.onload = function() { var swipev = new MobiSwipe("vertical"); swipev.direction = swipev.VERTICAL; swipev.onswipedown = function() { alert("down"); }; swipev.onswipeup = function() { alert("up"); }; var swipeh = new MobiSwipe("horizontal"); swipeh.direction = swipeh.HORIZONTAL; swipeh.onswiperight = function() { alert("right"); }; swipeh.onswipeleft = function() { alert("left"); }; } Vertical Swipe Horizontal Swipe
Во многих сенсорных устройствах жест «перетащить» (drag) используется для прокрутки содержимого страницы и, при этом, не поддерживается функция preventDefault (о функции предотвращения поведения по умолчанию мы говорили чуть ранее в этой главе). Именно поэтому мы должны помимо жеста swipe рассмотреть и другие доступные способы навигации.
Жесты машстабирования и поворотаКогда iPhone только появился, самыми крутыми функциями в нем были именно жесты изменения масштаба и поворота. Используя жест pinching (сдвигая и раздвигая два пальца в щепотке) пользователь мог увеличить или уменьшить масштаб контента — это, как правило, изображение — на странице, а поворачивая два пальца по кругу изображение можно повернуть.
В устройствах, где нет поддержки мультитач функции изменения масштаба нужно реализовывать при помощи обычных плавающих кнопок и ползунков.
К счастью, начиная с iOS 2.0 эти жесты можно обнаружить не прибегая с низкоуровневой математике в тач-событиях. В таблице 8.35 перечислены три расширения WebKit, которые доступны в качестве событий. В браузере Android также добавлена поддержка этих событий.
Для масштабирования и поворота используются эти же события. Все три получают параметр GestureEvent. У этого параметра есть типичные для события свойства, а также дополнительные свойства scale и rotation.
Свойство scale определяет расстояние между двумя пальцами как множитель с плавающей точкой от начала дистанции, где было начало жеста. Если значение больше 1.0, значит это открытый pinch (увеличение), а если значение 1.0 — pinch закрытия (уменьшение).
rotation дает значение (в градусах) дельты (расстояния) вращения от начальной точки. Если пользователь вращает объект по часовой стрелке, то мы получаем положительное значение, а если против — то значение будет отрицательным.
Я знаю, что ты сейчас думаешь: «Вращение и изменение масштаба — это отлично, но какой нам от них толк, если мы работаем с HTML?». Здесь нам приходят на помощь CSS расширения для Safari на iOS (и в других браузеров с соответствующей поддержкой) с одним свойством и двумя функциями для управлением его значением: rotate и scale.
Функция rotate получает параметр в градусах и нам нужно определить deg unit после числа (например, rotate(90deg)). Узнать это мы можем из скрипта при помощи element.style.webkitTransform.
Давай рассмотри простой пример:
Gesture Management function gesture(event) { // We round values with two decimals event.target.innerHTML = "Rotation: " + Math.round(event.rotation*100)/100 + " Scale: " + Math.round(event.scale*100)/100; // We apply the transform functions to the element event.target.style.webkitTransform = "rotate(" + event.rotation%360 + "deg)" + " scale(" + event.scale + ")"; }
Как работает пример можешь увидеть на Рисунке 8-6. На совместимых устройствах ты можешь двумя пальцами поворачивать и масштабировать (вместе со всем содержимым). Только вот в чем проблема? Стиль преобразования всегда применяется к исходному элементу. Так, если мы применим к элементу масштаб 2.0, а потом еще раз увеличим на 0.5, то новое значение будет 0.5, а не 1.0, как можно было бы ожидать.
Рис. 8.6. Сочетая сенсорные события с CSS трансформациями, можно вращать и масштабировать элементы на своем сайте.
Для типичного zoom-rotate поведения мы должны заменить функцию на следующее:
var rotation = 0; var scale = 1; function gesture(event) { event.target.innerHTML = "Rotation: " + Math.round((event.rotation+rotation)*100)/100 + " Scale: " + Math.round((event.scale*scale)*100)/100; event.target.style.webkitTransform = "rotate(" + (event.rotation+rotation)%360 + "deg)" + " scale(" + event.scale*scale + ")"; } function gestureend(event) { rotation = event.rotation+rotation; scale = event.scale*scale; }
