Тъч жестове: Цялостно ръководство за имплементация с JavaScript

В днешния свят, ориентиран към мобилните устройства, тъч жестовете са се превърнали в неразделна част от потребителското изживяване. От обикновени почуквания до сложни взаимодействия с няколко пръста, тъч жестовете предоставят естествен и интуитивен начин за взаимодействие на потребителите с уеб приложения. Това цялостно ръководство изследва света на тъч жестовете и предоставя поетапен подход за тяхното имплементиране във вашите JavaScript проекти.

Разбиране на събитията при докосване (Touch Events)

Преди да се потопим в разпознаването на жестове, е изключително важно да разберем основните събития при докосване, които задвижват тези взаимодействия. JavaScript предоставя набор от събития, които се задействат, когато потребител докосне екрана. Тези събития предоставят информация за докосването, като например неговото местоположение и състояние.

Основни събития при докосване:

touchstart: Задейства се, когато точка на докосване се постави върху сензорната повърхност.
touchmove: Задейства се, когато точка на докосване се движи по сензорната повърхност.
touchend: Задейства се, когато точка на докосване се отстрани от сензорната повърхност.
touchcancel: Задейства се, когато взаимодействието с докосване е прекъснато (напр. от системно известие).

Всяко от тези събития съдържа свойство `touches`, което е списък с `Touch` обекти. Всеки `Touch` обект представлява единична точка на контакт с екрана и съдържа информация като:

clientX: Хоризонталната координата на точката на докосване спрямо прозореца за преглед (viewport).
clientY: Вертикалната координата на точката на докосване спрямо прозореца за преглед (viewport).
screenX: Хоризонталната координата на точката на докосване спрямо екрана.
screenY: Вертикалната координата на точката на докосване спрямо екрана.
target: DOM елементът, който е бил докоснат.
identifier: Уникален идентификатор за точката на докосване (полезен при мултитъч взаимодействия).

Пример: Регистриране на координатите на докосване

Този прост пример демонстрира как да регистрирате координатите на точка на докосване, когато потребителят докосне екрана:


 document.addEventListener('touchstart', function(event) {
  event.preventDefault(); // Предотвратява поведението на браузъра по подразбиране (напр. превъртане)
  let touch = event.touches[0];
  console.log('Докосването започна в X: ' + touch.clientX + ', Y: ' + touch.clientY);
 });

Забележка: Методът `preventDefault()` често се използва, за да се попречи на браузъра да извършва своето поведение по подразбиране при докосване, като превъртане или мащабиране.

Имплементиране на основни жестове

С доброто разбиране на събитията при докосване, вече можем да имплементираме основни жестове. Нека разгледаме примери като почукване (tap), плъзгане (swipe) и влачене (drag). Те ще бъдат обяснени, като първо дефинираме какво представляват, а след това предоставим примери с JavaScript.

Жест „почукване“ (Tap)

Жестът „почукване“ е бързо докосване и освобождаване на екрана. За да имплементираме жест за почукване, можем да проследяваме събитията `touchstart` и `touchend` и да измерваме разликата във времето между тях. Ако разликата във времето е под определен праг (напр. 200 милисекунди), го считаме за почукване.


 let tapStartTime = null;

 document.addEventListener('touchstart', function(event) {
  tapStartTime = new Date().getTime();
 });

 document.addEventListener('touchend', function(event) {
  let tapEndTime = new Date().getTime();
  let tapDuration = tapEndTime - tapStartTime;

  if (tapDuration < 200) {
   console.log('Открито почукване!');
  }
 });

Жест „плъзгане“ (Swipe)

Жестът „плъзгане“ е бързо, насочено движение по екрана. За да открием плъзгане, трябва да проследим началната и крайната позиция на докосването и да изчислим разстоянието и посоката на движението. Трябва също да вземем предвид продължителността на плъзгането.


 let swipeStartX = null;
 let swipeStartY = null;

 document.addEventListener('touchstart', function(event) {
  swipeStartX = event.touches[0].clientX;
  swipeStartY = event.touches[0].clientY;
 });

 document.addEventListener('touchend', function(event) {
  let swipeEndX = event.changedTouches[0].clientX;
  let swipeEndY = event.changedTouches[0].clientY;
  let deltaX = swipeEndX - swipeStartX;
  let deltaY = swipeEndY - swipeStartY;
  let swipeDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

  if (swipeDistance > 50) { // Регулирайте прага според нуждите
   let angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;

   if (angle > -45 && angle <= 45) {
    console.log('Плъзгане надясно!');
   } else if (angle > 45 && angle <= 135) {
    console.log('Плъзгане надолу!');
   } else if (angle > 135 || angle <= -135) {
    console.log('Плъзгане наляво!');
   } else {
    console.log('Плъзгане нагоре!');
   }
  }
 });

Жест „влачене“ (Drag)

Жестът „влачене“ включва докосване на елемент и преместването му по екрана. За да имплементираме жест за влачене, трябва да проследяваме събитието touchmove и да актуализираме позицията на елемента съответно.


 let dragging = false;
 let offsetX, offsetY;
 let element = document.getElementById('draggableElement');

 element.addEventListener('touchstart', function(event) {
  dragging = true;
  offsetX = event.touches[0].clientX - element.offsetLeft;
  offsetY = event.touches[0].clientY - element.offsetTop;
 });

 document.addEventListener('touchmove', function(event) {
  if (dragging) {
   element.style.left = (event.touches[0].clientX - offsetX) + 'px';
   element.style.top = (event.touches[0].clientY - offsetY) + 'px';
  }
 });

 document.addEventListener('touchend', function(event) {
  dragging = false;
 });

Уверете се, че имате елемент с id "draggableElement" във вашия HTML:


 Влачи ме!

Мултитъч жестове

Мултитъч жестовете включват използването на няколко пръста за взаимодействие с екрана. Това позволява по-сложни и изразителни взаимодействия, като например „щипване“ за мащабиране и въртене.

Жест „щипване“ за мащабиране (Pinch-to-Zoom)

„Щипване“ за мащабиране е често срещан жест, използван за увеличаване и намаляване на изображение или карта. За да имплементираме този жест, трябва да проследяваме разстоянието между две точки на докосване и да коригираме мащаба на елемента съответно.


 let initialDistance = null;
 let currentScale = 1;
 let element = document.getElementById('zoomableImage');

 function getDistance(event) {
  let touch1 = event.touches[0];
  let touch2 = event.touches[1];
  let x = touch2.clientX - touch1.clientX;
  let y = touch2.clientY - touch1.clientY;
  return Math.sqrt(x * x + y * y);
 }

 element.addEventListener('touchstart', function(event) {
  if (event.touches.length === 2) {
   initialDistance = getDistance(event);
  }
 });

 element.addEventListener('touchmove', function(event) {
  if (event.touches.length === 2) {
   event.preventDefault();
   let currentDistance = getDistance(event);
   let scaleFactor = currentDistance / initialDistance;
   currentScale *= scaleFactor; // Натрупване на мащабирането
   element.style.transform = 'scale(' + currentScale + ')';
   initialDistance = currentDistance; // Нулиране за следващото движение
  }
 });

 element.addEventListener('touchend', function(event) {
  initialDistance = null;
 });

Уверете се, че имате изображение с id "zoomableImage" във вашия HTML:

Въртеж

Въртежът включва завъртане на елемент с помощта на два пръста. За да имплементираме въртене, трябва да проследяваме ъгъла между две точки на докосване и да завъртим елемента съответно.


 let initialAngle = null;
 let currentRotation = 0;
 let element = document.getElementById('rotatableImage');

 function getAngle(event) {
  let touch1 = event.touches[0];
  let touch2 = event.touches[1];
  return Math.atan2(touch2.clientY - touch1.clientY, touch2.clientX - touch1.clientX) * 180 / Math.PI;
 }

 element.addEventListener('touchstart', function(event) {
  if (event.touches.length === 2) {
   initialAngle = getAngle(event);
  }
 });

 element.addEventListener('touchmove', function(event) {
  if (event.touches.length === 2) {
   event.preventDefault();
   let currentAngle = getAngle(event);
   let rotation = currentAngle - initialAngle;
   currentRotation += rotation; // Натрупване на въртенето
   element.style.transform = 'rotate(' + currentRotation + 'deg)';
   initialAngle = currentAngle; // Нулиране за следващото движение
  }
 });

 element.addEventListener('touchend', function(event) {
  initialAngle = null;
 });

Уверете се, че имате изображение с id "rotatableImage" във вашия HTML:

Библиотеки за разпознаване на жестове

Имплементирането на сложни жестове от нулата може да бъде предизвикателство и да отнеме много време. За щастие, няколко JavaScript библиотеки могат да опростят процеса на разпознаване на жестове. Тези библиотеки предоставят предварително изградени разпознаватели на жестове и помощни програми за обработка на събития при докосване.

Hammer.js

Hammer.js е популярна JavaScript библиотека за разпознаване на жестове. Тя поддържа широк набор от жестове, включително почукване (tap), двойно почукване (double-tap), плъзгане (swipe), щипване (pinch), въртене (rotate) и панорамиране (pan). Тя е лека, лесна за използване и силно адаптивна. Hammer.js работи, като слуша за събития при докосване и след това определя какво действие извършва потребителят въз основа на местоположението и продължителността на точките на докосване.


 // Включете Hammer.js във вашия HTML
 // 

 let element = document.getElementById('myElement');
 let hammer = new Hammer(element);

 hammer.on('tap', function(event) {
  console.log('Открито събитие за почукване');
 });

 hammer.on('swipe', function(event) {
  console.log('Открито събитие за плъзгане');
  console.log('Посока на плъзгане: ' + event.direction);
 });

 hammer.get('pinch').set({ enable: true });
 hammer.get('rotate').set({ enable: true });

 hammer.on('pinch', function(event) {
  console.log('Открито събитие за щипване');
  element.style.transform = 'scale(' + event.scale + ')';
 });

 hammer.on('rotate', function(event) {
  console.log('Открито събитие за въртене');
  element.style.transform = 'rotate(' + event.rotation + 'deg)';
 });

AlloyFinger

AlloyFinger е друга популярна JavaScript библиотека, специализирана в разпознаването на жестове, особено за мобилни устройства. Тя е известна с малкия си размер и добра производителност. Фокусира се върху често срещани тъч жестове като почукване (tap), плъзгане (swipe), щипване (pinch), въртене (rotate) и натискане (press). Предоставя лесен за използване API за свързване на жестове с елементи.


 // Включете AlloyFinger във вашия HTML
 //  // Заменете с вашия път до AlloyFinger

 let element = document.getElementById('myElement');
 let af = new AlloyFinger(element, {
  tap: function() {
   console.log('Открито събитие за почукване');
  },
  swipe: function(evt) {
   console.log('Открито събитие за плъзгане');
   console.log('Посока на плъзгане: ' + evt.direction); // up, down, left, right
  },
  pinch: function(evt) {
   console.log('Открито събитие за щипване');
   element.style.transform = 'scale(' + evt.scale + ')';
  },
  rotate: function(evt) {
   console.log('Открито събитие за въртене');
   element.style.transform = 'rotate(' + evt.angle + 'deg)';
  }
 });

Съображения за достъпност

При имплементирането на тъч жестове е важно да се вземе предвид достъпността за потребители с увреждания. Някои потребители може да не могат да използват тъч жестове поради двигателни увреждания. Предоставянето на алтернативни методи за въвеждане, като например управление с клавиатура или гласови команди, гарантира, че вашето приложение е достъпно за по-широка аудитория.

Навигация с клавиатура: Уверете се, че всички интерактивни елементи са достъпни и могат да бъдат управлявани с клавиатура.
Съвместимост с екранни четци: Използвайте ARIA атрибути, за да предоставите семантична информация за тъч жестовете на екранните четци.
Достатъчен контраст: Уверете се, че има достатъчен контраст между цветовете на текста и фона, за да бъде интерфейсът четим за потребители с намалено зрение.
Размер на целта за докосване: Уверете се, че целите за докосване са достатъчно големи (поне 44x44 пиксела), за да могат лесно да бъдат докоснати от потребители с двигателни увреждания.

Оптимизация на производителността

Събитията при докосване могат да бъдат изчислително скъпи, особено при обработката на сложни жестове. Оптимизирането на вашия код за производителност е от решаващо значение за осигуряване на гладко и отзивчиво потребителско изживяване.

Използвайте делегиране на събития: Прикачвайте слушатели на събития към родителски елемент вместо към отделни елементи, за да намалите броя на слушателите.
Ограничете честотата на обработчиците на събития (Throttling): Ограничете честотата, с която се изпълняват обработчиците на събития, за да предотвратите затруднения в производителността.
Използвайте requestAnimationFrame: Използвайте `requestAnimationFrame` за планиране на анимации и актуализации, като гарантирате, че те са синхронизирани с цикъла на рендиране на браузъра.
Избягвайте прекомерна манипулация на DOM: Минимизирайте манипулацията на DOM, тъй като тя може да бъде тесно място за производителността.
Тествайте на реални устройства: Винаги тествайте кода си на реални устройства, за да идентифицирате проблеми с производителността. Емулаторите може да не отразяват точно производителността на реалните устройства.

Съвместимост с различни браузъри

Поддръжката на събития при докосване варира в различните браузъри и устройства. От решаващо значение е да тествате кода си на различни браузъри и устройства, за да осигурите съвместимост. Обмислете използването на полифили или библиотеки, които абстрахират разликите между браузърите.

Използвайте Modernizr: Използвайте Modernizr, за да откриете поддръжката на събития при докосване и да предоставите резервни механизми за браузъри, които не поддържат такива събития.
Тествайте на различни устройства: Тествайте кода си на различни устройства, включително смартфони, таблети и лаптопи със сензорни екрани.
Обмислете полифили (Polyfills): Използвайте полифили, за да осигурите поддръжка на събития при докосване в по-стари браузъри.

Съображения за интернационализация (i18n)

Когато имплементирате тъч жестове, не забравяйте да вземете предвид интернационализацията (i18n). Въпреки че самите взаимодействия с докосване обикновено са независими от езика, заобикалящите ги елементи на потребителския интерфейс и механизмите за обратна връзка трябва да бъдат локализирани за различните езици и региони.

Посока на текста: Обработвайте правилно езиците с писане отдясно наляво (RTL). Например, жестовете за плъзгане може да се наложи да бъдат обърнати в RTL оформления.
Формати на числа и дати: Уверете се, че числата и датите, използвани в съобщенията за обратна връзка, са форматирани според локала на потребителя.
Културна чувствителност: Бъдете внимателни към културните различия в тълкуването на жестовете. Жест, който е често срещан в една култура, може да бъде обиден в друга. Проучете и адаптирайте дизайна си съответно.
Адаптивен UI: Уверете се, че вашият потребителски интерфейс може да се адаптира към различни дължини на текста при превод на различни езици. Това може да повлияе на разположението и размера на целите за докосване.

Глобални примери и съображения

Нека разгледаме как тъч жестовете могат да се прилагат по различен начин в различни глобални контексти:

Електронна търговия в Азия: Много азиатски приложения за електронна търговия използват сложна навигация, базирана на жестове, за разглеждане и закупуване на продукти. Обмислете предлагането на опростени тъч взаимодействия за потребители в региони с ограничена свързаност на данните.
Игри в Латинска Америка: Мобилните игри са много популярни в Латинска Америка. Оптимизирането на тъч контролите за бързи игри е важно за страхотно потребителско изживяване.
Образование в Африка: Образователни приложения, базирани на докосване, се използват за обучение на деца в училищата. Простите и интуитивни тъч жестове могат да подобрят учебния процес.
Навигация в Европа: Приложенията за карти в Европа се възползват от плавни жестове за мащабиране и въртене, особено при разглеждане на исторически обекти.

Заключение

Тъч жестовете са мощен инструмент за създаване на ангажиращи и интуитивни потребителски изживявания. Като разбирате основните събития при докосване и използвате подходящи техники за разпознаване на жестове, можете да имплементирате широк набор от жестове във вашите JavaScript проекти. Не забравяйте да вземете предвид достъпността, производителността и съвместимостта с различни браузъри, за да гарантирате, че вашето приложение работи добре за всички потребители. С напредването на технологиите очаквайте да видите нови видове жестове и взаимодействия, продължавайте да се учите, за да останете в челните редици на дигиталните изживявания.