Термин gesture — способ объединить движения пальцем по экрану для запуска какого-то действия; движение пальцем в таком случае используется вместо просто касания или клика. Полное касание (complete touch) или mouse — move-capturing функция — нужна для того, чтобы жесты регистрировались и были абсолютно правильными. Сегодня хорошая поддержка этой функции есть только в браузерах Safari и Android.

Если в твоем веб-приложении пользователю нужно использовать жесты, важно научить его правильным действиям — при помощи справки, анимированных примеров или какого-нибудь другого вида подсказок (рисунок 8.5).

Рис. 8.5. Google Fast Flip новый просмотрищик, использующий жесты на iPhone и Android устройств. Слева вы увидите предупреждающий диалог с инструкциями о том, как его использовать. Вы увидите инструкции только один раз.

Жест 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; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Клик (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 для просмотра.

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

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

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

Вы узнаете, как исполнять «танец пальцев», чтобы iPad отвечал на все ваши команды. Вы также освоите несколько сочетаний клавиш и узнаете, как использовать свои пальцы, чтобы найти нужные вещи на iPad. Так что разомните руки и приступайте.

«Мозг» iPad — его операционная система — достаточно умен, чтобы ответить на серию самых разных прикосновений.

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

• Нажатие. Слегка нажмите кончиком пальца на значок, ярлык, название песни или элемент управления, которые вы видите на экране. iPad — это не старый грубый калькулятор, так что вам не нужно сильно надавливать, достаточно легкого прикосновения.
• Перетаскивание. Прижмите палец к стеклу и сдвиньте его в сторону, чтобы перейти к различным частям экрана. Так вы можете управлять регуляторами громкости и перемещаться по фотографиям. Перетаскивание двумя пальцами перемещает окно в окне (например, плавающее окно, которое появляется в окне Facebook, когда вы вызываете список друзей).
• Перемещение. Перемещение похоже на перетаскивание, за исключением того, что используется оно только для одного элемента управления — кнопки Unlock/Confirm (Разблокировать/Подтвердить). Она находится на «дорожке», по которой вы перемещаете ползунок, выводя iPad из Режима сна или подтверждая полное выключение.
• Пролистывание. Легко и быстро проведите пальцем вверх или вниз по экрану и просматривайте веб-страницу или список песен в направлении пролистывания. Чем быстрее вы пролистываете, тем быстрее прокручивается экран. В фотоальбоме пролистывайте из стороны в сторону, чтобы изображения сменяли друг друга на экране.
• Сведение и разведение пальцев. Для увеличения части изображения, документа или веб-страницы сложите большой и указательный пальцы вместе, поместите их на экран, а затем разведите в стороны. Чтобы уменьшить масштаб, поместите разведенные пальцы на экран и сведите их вместе.
• Двойное нажатие. Два поочередных нажатия нужны в нескольких ситуациях. Во-первых, это быстрый способ увеличить фотографию или веб-страницу. Во-вторых, если вы смотрите видео, то это позволяет вам переключать соотношение ширины и высоты. В полноэкранном режиме (на рисунке слева) края кадра обрезаются. Широкоэкранный вид (на рисунке справа) предпочитают любители кино, потому что в таком режиме фильм выглядит так, как задумал режиссер.