Skārienžesti: Visaptveroša rokasgrāmata par JavaScript ieviešanu

Mūsdienu pasaulē, kurā prioritāte ir mobilās ierīces, skārienžesti ir kļuvuši par neatņemamu lietotāja pieredzes sastāvdaļu. Sākot ar vienkāršiem pieskārieniem līdz sarežģītām vairāku pirkstu mijiedarbībām, skārienžesti nodrošina dabisku un intuitīvu veidu, kā lietotāji var mijiedarboties ar tīmekļa lietojumprogrammām. Šī visaptverošā rokasgrāmata izpēta skārienžestu pasauli un sniedz soli pa solim pieeju to ieviešanai jūsu JavaScript projektos.

Izpratne par skāriennotikumiem

Pirms iedziļināties žestu atpazīšanā, ir svarīgi izprast pamatā esošos skāriennotikumus, kas nodrošina šīs mijiedarbības. JavaScript nodrošina notikumu kopu, kas tiek aktivizēti, kad lietotājs pieskaras ekrānam. Šie notikumi sniedz informāciju par pieskārienu, piemēram, tā atrašanās vietu un stāvokli.

Pamata skāriennotikumi:

touchstart: Tiek aktivizēts, kad pieskāriena punkts tiek novietots uz skārienjutīgās virsmas.
touchmove: Tiek aktivizēts, kad pieskāriena punkts tiek pārvietots pa skārienjutīgo virsmu.
touchend: Tiek aktivizēts, kad pieskāriena punkts tiek noņemts no skārienjutīgās virsmas.
touchcancel: Tiek aktivizēts, kad pieskāriena mijiedarbība tiek pārtraukta (piemēram, ar sistēmas brīdinājumu).

Katrs no šiem notikumiem satur `touches` īpašību, kas ir `Touch` objektu saraksts. Katrs `Touch` objekts attēlo vienu saskares punktu uz ekrāna un satur informāciju, piemēram:

clientX: Pieskāriena punkta horizontālā koordināta attiecībā pret skatvietu.
clientY: Pieskāriena punkta vertikālā koordināta attiecībā pret skatvietu.
screenX: Pieskāriena punkta horizontālā koordināta attiecībā pret ekrānu.
screenY: Pieskāriena punkta vertikālā koordināta attiecībā pret ekrānu.
target: DOM elements, kuram tika pieskarts.
identifier: Unikāls identifikators pieskāriena punktam (noderīgs vairākpieskārienu mijiedarbībām).

Piemērs: Skārienpunkta koordinātu reģistrēšana

Šis vienkāršais piemērs demonstrē, kā reģistrēt skārienpunkta koordinātas, kad lietotājs pieskaras ekrānam:


 document.addEventListener('touchstart', function(event) {
  event.preventDefault(); // Novērš pārlūkprogrammas noklusējuma darbību (piemēram, ritināšanu)
  let touch = event.touches[0];
  console.log('Pieskāriens sākās pie X: ' + touch.clientX + ', Y: ' + touch.clientY);
 });

Piezīme: `preventDefault()` metode bieži tiek izmantota, lai novērstu pārlūkprogrammas noklusējuma skāriendarbību, piemēram, ritināšanu vai tālummaiņu.

Pamata žestu ieviešana

Ar stabilu izpratni par skāriennotikumiem mēs varam ieviest pamata žestus. Aplūkosim piemērus, piemēram, pieskārienu, vilkšanu un pārvilkšanu. Tie tiks izskaidroti, vispirms definējot, kas tie ir, un pēc tam sniedzot Javascript piemērus.

Pieskāriena žests

Pieskāriena žests ir ātrs pieskāriens un atlaišana uz ekrāna. Lai ieviestu pieskāriena žestu, mēs varam sekot `touchstart` un `touchend` notikumiem un izmērīt laika starpību starp tiem. Ja laika starpība ir zem noteikta sliekšņa (piemēram, 200 milisekundes), mēs to uzskatām par pieskārienu.


 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('Pieskāriens atpazīts!');
  }
 });

Vilkšanas (swipe) žests

Vilkšanas žests ir ātra, virzīta kustība pāri ekrānam. Lai atpazītu vilkšanu, mums ir jāseko pieskāriena sākuma un beigu pozīcijām un jāaprēķina kustības attālums un virziens. Mums ir jāņem vērā arī vilkšanas ilgums.


 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) { // Pielāgojiet slieksni pēc nepieciešamības
   let angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;

   if (angle > -45 && angle <= 45) {
    console.log('Vilkšana pa labi!');
   } else if (angle > 45 && angle <= 135) {
    console.log('Vilkšana uz leju!');
   } else if (angle > 135 || angle <= -135) {
    console.log('Vilkšana pa kreisi!');
   } else {
    console.log('Vilkšana uz augšu!');
   }
  }
 });

Pārvilkšanas (drag) žests

Pārvilkšanas žests ietver pieskaršanos elementam un tā pārvietošanu pāri ekrānam. Lai ieviestu pārvilkšanas žestu, mums ir jāseko `touchmove` notikumam un atbilstoši jāatjaunina elementa pozīcija.


 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;
 });

Pārliecinieties, ka jūsu HTML kodā ir elements ar ID "draggableElement":


 Pārvilkt mani!

Vairākpieskārienu žesti

Vairākpieskārienu žesti ietver vairāku pirkstu izmantošanu, lai mijiedarbotos ar ekrānu. Tas ļauj veikt sarežģītākas un izteiksmīgākas mijiedarbības, piemēram, savilkšanu tālummaiņai un rotāciju.

Savilkšana tālummaiņai (Pinch-to-Zoom)

Savilkšana tālummaiņai ir izplatīts žests, ko izmanto, lai tuvinātu un tālinātu attēlu vai karti. Lai ieviestu savilkšanu tālummaiņai, mums ir jāseko attālumam starp diviem pieskāriena punktiem un atbilstoši jāpielāgo elementa mērogs.


 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; // Uzkrāj mērogojumu
   element.style.transform = 'scale(' + currentScale + ')';
   initialDistance = currentDistance; // Atiestatīt nākamajai kustībai
  }
 });

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

Pārliecinieties, ka jūsu HTML kodā ir attēls ar ID "zoomableImage":

Rotācija

Rotācija ietver elementa pagriešanu, izmantojot divus pirkstus. Lai ieviestu rotāciju, mums ir jāseko leņķim starp diviem pieskāriena punktiem un atbilstoši jāpagriež elements.


 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; // Uzkrāj rotāciju
   element.style.transform = 'rotate(' + currentRotation + 'deg)';
   initialAngle = currentAngle; // Atiestatīt nākamajai kustībai
  }
 });

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

Pārliecinieties, ka jūsu HTML kodā ir attēls ar ID "rotatableImage":

Žestu atpazīšanas bibliotēkas

Sarežģītu žestu ieviešana no nulles var būt sarežģīta un laikietilpīga. Par laimi, vairākas JavaScript bibliotēkas var vienkāršot žestu atpazīšanas procesu. Šīs bibliotēkas nodrošina iepriekš izveidotus žestu atpazinējus un utilītas skāriennotikumu apstrādei.

Hammer.js

Hammer.js ir populāra JavaScript bibliotēka žestu atpazīšanai. Tā atbalsta plašu žestu klāstu, tostarp pieskārienu, dubultpieskārienu, vilkšanu, savilkšanu, rotāciju un panoramēšanu. Tā ir viegla, viegli lietojama un ļoti pielāgojama. Hammer.js darbojas, klausoties skāriennotikumus un pēc tam nosakot, kādu darbību lietotājs veic, pamatojoties uz pieskāriena punktu atrašanās vietu un ilgumu.


 // Iekļaujiet Hammer.js savā HTML
 // 

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

 hammer.on('tap', function(event) {
  console.log('Pieskāriena notikums atpazīts');
 });

 hammer.on('swipe', function(event) {
  console.log('Vilkšanas notikums atpazīts');
  console.log('Vilkšanas virziens: ' + event.direction);
 });

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

 hammer.on('pinch', function(event) {
  console.log('Savilkšanas notikums atpazīts');
  element.style.transform = 'scale(' + event.scale + ')';
 });

 hammer.on('rotate', function(event) {
  console.log('Rotācijas notikums atpazīts');
  element.style.transform = 'rotate(' + event.rotation + 'deg)';
 });

AlloyFinger

AlloyFinger ir vēl viena populāra JavaScript bibliotēka, kas specializējas žestu atpazīšanā, īpaši mobilajām ierīcēm. Tā ir pazīstama ar savu mazo izmēru un labo veiktspēju. Tā koncentrējas uz biežāk sastopamajiem skārienžestiem, piemēram, pieskārienu, vilkšanu, savilkšanu, rotāciju un nospiešanu. Tā nodrošina viegli lietojamu API žestu piesaistīšanai elementiem.


 // Iekļaujiet AlloyFinger savā HTML
 //  // Aizstājiet ar savu AlloyFinger ceļu

 let element = document.getElementById('myElement');
 let af = new AlloyFinger(element, {
  tap: function() {
   console.log('Pieskāriena notikums atpazīts');
  },
  swipe: function(evt) {
   console.log('Vilkšanas notikums atpazīts');
   console.log('Vilkšanas virziens: ' + evt.direction); // uz augšu, uz leju, pa kreisi, pa labi
  },
  pinch: function(evt) {
   console.log('Savilkšanas notikums atpazīts');
   element.style.transform = 'scale(' + evt.scale + ')';
  },
  rotate: function(evt) {
   console.log('Rotācijas notikums atpazīts');
   element.style.transform = 'rotate(' + evt.angle + 'deg)';
  }
 });

Pieejamības apsvērumi

Ieviešot skārienžestus, ir svarīgi ņemt vērā pieejamību lietotājiem ar invaliditāti. Daži lietotāji, iespējams, nevar izmantot skārienžestus kustību traucējumu dēļ. Nodrošinot alternatīvas ievades metodes, piemēram, tastatūras vadīklas vai balss komandas, tiek nodrošināts, ka jūsu lietojumprogramma ir pieejama plašākai auditorijai.

Navigācija ar tastatūru: Pārliecinieties, ka visiem interaktīvajiem elementiem var piekļūt un tos var manipulēt, izmantojot tastatūru.
Ekrāna lasītāju saderība: Izmantojiet ARIA atribūtus, lai sniegtu semantisko informāciju par skārienžestiem ekrāna lasītājiem.
Pietiekams kontrasts: Pārliecinieties, ka starp teksta un fona krāsām ir pietiekams kontrasts, lai saskarne būtu lasāma lietotājiem ar vāju redzi.
Pieskāriena mērķa izmērs: Pārliecinieties, ka pieskāriena mērķi ir pietiekami lieli (vismaz 44x44 pikseļi), lai lietotāji ar kustību traucējumiem tos varētu viegli nospiest.

Veiktspējas optimizācija

Skāriennotikumi var būt skaitļošanas ziņā dārgi, īpaši apstrādājot sarežģītus žestus. Koda optimizēšana veiktspējas uzlabošanai ir ļoti svarīga, lai nodrošinātu vienmērīgu un atsaucīgu lietotāja pieredzi.

Izmantojiet notikumu deleģēšanu: Pievienojiet notikumu klausītājus vecākelementam, nevis atsevišķiem elementiem, lai samazinātu notikumu klausītāju skaitu.
Ierobežojiet notikumu apstrādātājus: Ierobežojiet biežumu, ar kādu tiek izpildīti notikumu apstrādātāji, lai novērstu veiktspējas problēmas.
Izmantojiet requestAnimationFrame: Izmantojiet `requestAnimationFrame`, lai ieplānotu animācijas un atjauninājumus, nodrošinot, ka tie ir sinhronizēti ar pārlūkprogrammas renderēšanas ciklu.
Izvairieties no pārmērīgas DOM manipulācijas: Samaziniet DOM manipulācijas, jo tās var radīt veiktspējas problēmas.
Testējiet uz reālām ierīcēm: Vienmēr pārbaudiet savu kodu uz reālām ierīcēm, lai identificētu veiktspējas problēmas. Emulatori var neatspoguļot reālo ierīču veiktspēju precīzi.

Starppārlūku saderība

Skāriennotikumu atbalsts dažādās pārlūkprogrammās un ierīcēs atšķiras. Ir svarīgi pārbaudīt savu kodu dažādās pārlūkprogrammās un ierīcēs, lai nodrošinātu starppārlūku saderību. Apsveriet polyfills vai bibliotēku izmantošanu, kas abstrahē pārlūkprogrammu atšķirības.

Izmantojiet Modernizr: Izmantojiet Modernizr, lai noteiktu skāriennotikumu atbalstu un nodrošinātu rezerves mehānismus pārlūkprogrammām, kas neatbalsta skāriennotikumus.
Testējiet uz dažādām ierīcēm: Pārbaudiet savu kodu dažādās ierīcēs, tostarp viedtālruņos, planšetdatoros un klēpjdatoros ar skārienekrāniem.
Apsveriet polyfills izmantošanu: Izmantojiet polyfills, lai nodrošinātu skāriennotikumu atbalstu vecākās pārlūkprogrammās.

Internacionalizācijas (i18n) apsvērumi

Ieviešot skārienžestus, atcerieties ņemt vērā internacionalizāciju (i18n). Lai gan pašas skārienmijiedarbības parasti ir valodu neatkarīgas, apkārtējiem lietotāja saskarnes elementiem un atgriezeniskās saites mehānismiem jābūt lokalizētiem dažādām valodām un reģioniem.

Teksta virziens: Pareizi apstrādājiet valodas, kas tiek rakstītas no labās puses uz kreiso (RTL). Piemēram, vilkšanas žestus RTL izkārtojumos varētu būt nepieciešams apgriezt.
Skaitļu un datumu formāti: Nodrošiniet, ka atgriezeniskās saites ziņojumos izmantotie skaitļi un datumi tiek formatēti atbilstoši lietotāja lokalizācijai.
Kultūras jutīgums: Esiet uzmanīgi pret kultūras atšķirībām žestu interpretācijā. Žests, kas ir izplatīts vienā kultūrā, var būt aizskarošs citā. Izpētiet un attiecīgi pielāgojiet savu dizainu.
Pielāgojama lietotāja saskarne: Nodrošiniet, ka jūsu lietotāja saskarne var pielāgoties dažādiem teksta garumiem, kad tā tiek tulkota dažādās valodās. Tas var ietekmēt pieskāriena mērķu izvietojumu un izmēru.

Globāli piemēri un apsvērumi

Apskatīsim, kā skārienžestus varētu atšķirīgi pielietot dažādos globālos kontekstos:

E-komercija Āzijā: Daudzas Āzijas e-komercijas lietotnes izmanto sarežģītu, uz žestiem balstītu navigāciju produktu pārlūkošanai un iegādei. Apsveriet iespēju piedāvāt racionalizētas skārienmijiedarbības lietotājiem reģionos ar ierobežotu datu savienojamību.
Spēles Latīņamerikā: Mobilās spēles ir ļoti populāras Latīņamerikā. Skārienvadības optimizēšana ātrām spēlēm ir svarīga lieliskai lietotāja pieredzei.
Izglītība Āfrikā: Uz skārieniem balstītas izglītības lietotnes tiek izmantotas, lai mācītu bērnus skolās. Vienkārši un intuitīvi skārienžesti var uzlabot mācīšanās pieredzi.
Navigācija Eiropā: Karšu lietotnes Eiropā gūst labumu no vienmērīgiem tālummaiņas un rotācijas žestiem, īpaši, pētot vēsturiskas vietas.

Noslēgums

Skārienžesti ir spēcīgs rīks, lai radītu saistošu un intuitīvu lietotāja pieredzi. Izprotot pamatā esošos skāriennotikumus un izmantojot atbilstošas žestu atpazīšanas metodes, jūs varat ieviest plašu žestu klāstu savos JavaScript projektos. Atcerieties ņemt vērā pieejamību, veiktspēju un starppārlūku saderību, lai nodrošinātu, ka jūsu lietojumprogramma labi darbojas visiem lietotājiem. Tehnoloģijām attīstoties, sagaidiet jaunus žestu un mijiedarbības veidus, turpiniet mācīties, lai paliktu digitālās pieredzes priekšgalā.