Sensorli imo-ishoralar: JavaScript-da joriy etish bo'yicha to'liq qo'llanma

Bugungi mobil-birinchi dunyoda sensorli imo-ishoralar foydalanuvchi tajribasining ajralmas qismiga aylandi. Oddiy bosishlardan tortib murakkab ko'p barmoqli o'zaro ta'sirlargacha, sensorli imo-ishoralar foydalanuvchilarga veb-ilovalar bilan o'zaro aloqada bo'lishning tabiiy va intuitiv usulini taqdim etadi. Ushbu keng qamrovli qo'llanma sensorli imo-ishoralar dunyosini o'rganadi va ularni JavaScript loyihalaringizda joriy etish bo'yicha bosqichma-bosqich yondashuvni taqdim etadi.

Sensorli hodisalarni tushunish

Imo-ishoralarni aniqlashga kirishishdan oldin, bu o'zaro ta'sirlarni quvvatlovchi asosiy sensorli hodisalarni tushunish juda muhim. JavaScript foydalanuvchi ekranga teginganida ishga tushadigan hodisalar to'plamini taqdim etadi. Ushbu hodisalar tegish haqida, masalan, uning joylashuvi va holati kabi ma'lumotlarni beradi.

Asosiy sensorli hodisalar:

• touchstart: Sensor yuzasiga teginish nuqtasi qo'yilganda ishga tushadi.
• touchmove: Teginish nuqtasi sensor yuzasi bo'ylab harakatlanganda ishga tushadi.
• touchend: Teginish nuqtasi sensor yuzasidan olib tashlanganda ishga tushadi.
• touchcancel: Teginish o'zaro ta'siri to'xtatilganda (masalan, tizim ogohlantirishi bilan) ishga tushadi.

Ushbu hodisalarning har birida `Touch` obyektlari ro'yxati bo'lgan `touches` xususiyati mavjud. Har bir `Touch` obyekti ekrandagi yagona aloqa nuqtasini ifodalaydi va quyidagi ma'lumotlarni o'z ichiga oladi:

• clientX: Teginish nuqtasining ko'rish maydoniga nisbatan gorizontal koordinatasi.
• clientY: Teginish nuqtasining ko'rish maydoniga nisbatan vertikal koordinatasi.
• screenX: Teginish nuqtasining ekranga nisbatan gorizontal koordinatasi.
• screenY: Teginish nuqtasining ekranga nisbatan vertikal koordinatasi.
• target: Tegilgan DOM elementi.
• identifier: Teginish nuqtasi uchun noyob identifikator (ko'p sensorli o'zaro ta'sirlar uchun foydali).

Misol: Tegish koordinatalarini qayd etish

Ushbu oddiy misol foydalanuvchi ekranga teginganida teginish nuqtasining koordinatalarini qanday qayd etishni ko'rsatadi:

 document.addEventListener('touchstart', function(event) {
  event.preventDefault(); // Brauzerning standart xatti-harakatini oldini oladi (masalan, aylantirish)
  let touch = event.touches[0];
  console.log('Teginish X da boshlandi: ' + touch.clientX + ', Y: ' + touch.clientY);
 });

Eslatma: `preventDefault()` usuli ko'pincha brauzerning aylantirish yoki kattalashtirish kabi standart sensorli harakatlarini bajarishiga yo'l qo'ymaslik uchun ishlatiladi.

Asosiy imo-ishoralarni joriy etish

Sensorli hodisalarni puxta tushungan holda, endi biz asosiy imo-ishoralarni amalga oshirishimiz mumkin. Keling, bosish (tap), surish (swipe) va sudrash (drag) kabi misollarni ko'rib chiqaylik. Ular avval nima ekanligini ta'riflash, so'ngra Javascript misollarini keltirish orqali tushuntiriladi.

Bosish (Tap) imo-ishorasi

Bosish imo-ishorasi - bu ekranga tez tegib, qo'yib yuborish. Bosish imo-ishorasini amalga oshirish uchun biz `touchstart` va `touchend` hodisalarini kuzatib borishimiz va ular orasidagi vaqt farqini o'lchashimiz kerak. Agar vaqt farqi ma'lum bir chegaradan (masalan, 200 millisekund) past bo'lsa, biz buni bosish deb hisoblaymiz.

 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('Bosish aniqlandi!');
  }
 });

Surish (Swipe) imo-ishorasi

Surish imo-ishorasi - bu ekran bo'ylab tez, yo'naltirilgan harakat. Surishni aniqlash uchun biz teginishning boshlanish va tugash pozitsiyalarini kuzatib borishimiz va harakatning masofasi va yo'nalishini hisoblashimiz kerak. Shuningdek, surish davomiyligini ham hisobga olishimiz kerak.

 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) { // Kerak bo'lsa, chegarani sozlang
   let angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;

   if (angle > -45 && angle <= 45) {
    console.log('O\'ngga surish!');
   } else if (angle > 45 && angle <= 135) {
    console.log('Pastga surish!');
   } else if (angle > 135 || angle <= -135) {
    console.log('Chapga surish!');
   } else {
    console.log('Yuqoriga surish!');
   }
  }
 });

Sudrash (Drag) imo-ishorasi

Sudrash imo-ishorasi elementga tegib, uni ekran bo'ylab harakatlantirishni o'z ichiga oladi. Sudrash imo-ishorasini amalga oshirish uchun biz touchmove hodisasini kuzatib borishimiz va elementning pozitsiyasini mos ravishda yangilashimiz kerak.

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

HTML-da "draggableElement" id-ga ega element mavjudligiga ishonch hosil qiling:

 
SUDRA!

Ko'p sensorli (Multi-Touch) imo-ishoralar

Ko'p sensorli imo-ishoralar ekran bilan o'zaro ta'sir qilish uchun bir nechta barmoqlardan foydalanishni o'z ichiga oladi. Bu chimchilash (pinch-to-zoom) va aylantirish (rotate) kabi murakkabroq va ifodali o'zaro ta'sirlarga imkon beradi.

Kattalashtirish uchun chimchilash (Pinch-to-Zoom)

Kattalashtirish uchun chimchilash - bu tasvir yoki xaritani kattalashtirish va kichiklashtirish uchun ishlatiladigan keng tarqalgan imo-ishora. Chimchilashni amalga oshirish uchun biz ikkita teginish nuqtasi orasidagi masofani kuzatib borishimiz va elementning masshtabini shunga mos ravishda sozlashimiz kerak.

 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; // Masshtabni jamlash
   element.style.transform = 'scale(' + currentScale + ')';
   initialDistance = currentDistance; // Keyingi harakat uchun qayta o'rnatish
  }
 });

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

HTML-da "zoomableImage" id-ga ega tasvir mavjudligiga ishonch hosil qiling:

Aylantirish

Aylantirish ikki barmoq yordamida elementni aylantirishni o'z ichiga oladi. Aylantirishni amalga oshirish uchun biz ikkita teginish nuqtasi orasidagi burchakni kuzatib borishimiz va elementni shunga mos ravishda aylantirishimiz kerak.

 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; // Aylanishni jamlash
   element.style.transform = 'rotate(' + currentRotation + 'deg)';
   initialAngle = currentAngle; // Keyingi harakat uchun qayta o'rnatish
  }
 });

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

HTML-da "rotatableImage" id-ga ega tasvir mavjudligiga ishonch hosil qiling:

Imo-ishoralarni aniqlash kutubxonalari

Murakkab imo-ishoralarni noldan amalga oshirish qiyin va ko'p vaqt talab qilishi mumkin. Yaxshiyamki, bir nechta JavaScript kutubxonalari imo-ishoralarni aniqlash jarayonini soddalashtirishi mumkin. Ushbu kutubxonalar oldindan tayyorlangan imo-ishoralarni aniqlagichlar va sensorli hodisalarni boshqarish uchun yordamchi dasturlarni taqdim etadi.

Hammer.js

Hammer.js imo-ishoralarni aniqlash uchun mashhur JavaScript kutubxonasidir. U bosish, ikki marta bosish, surish, chimchilash, aylantirish va panorama kabi keng ko'lamli imo-ishoralarni qo'llab-quvvatlaydi. U yengil, ishlatish uchun qulay va yuqori darajada sozlanishi mumkin. Hammer.js sensorli hodisalarni tinglash orqali ishlaydi va keyin teginish nuqtalarining joylashuvi va davomiyligiga asoslanib, foydalanuvchi qanday harakatni amalga oshirayotganini aniqlaydi.

 // Hammer.js-ni HTML-ga qo'shing
 // 

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

 hammer.on('tap', function(event) {
  console.log('Bosish hodisasi aniqlandi');
 });

 hammer.on('swipe', function(event) {
  console.log('Surish hodisasi aniqlandi');
  console.log('Surish yo\'nalishi: ' + event.direction);
 });

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

 hammer.on('pinch', function(event) {
  console.log('Chimchilash hodisasi aniqlandi');
  element.style.transform = 'scale(' + event.scale + ')';
 });

 hammer.on('rotate', function(event) {
  console.log('Aylantirish hodisasi aniqlandi');
  element.style.transform = 'rotate(' + event.rotation + 'deg)';
 });

AlloyFinger

AlloyFinger - bu ayniqsa mobil qurilmalar uchun imo-ishoralarni aniqlashga ixtisoslashgan yana bir mashhur JavaScript kutubxonasi. U o'zining kichik hajmi va yaxshi ishlashi bilan mashhur. U bosish, surish, chimchilash, aylantirish va bosib turish kabi umumiy sensorli imo-ishoralarga e'tibor qaratadi. U imo-ishoralarni elementlarga bog'lash uchun ishlatish uchun qulay API-ni taqdim etadi.

 // AlloyFinger-ni HTML-ga qo'shing
 //  // O'zingizning AlloyFinger yo'lingiz bilan almashtiring

 let element = document.getElementById('myElement');
 let af = new AlloyFinger(element, {
  tap: function() {
   console.log('Bosish hodisasi aniqlandi');
  },
  swipe: function(evt) {
   console.log('Surish hodisasi aniqlandi');
   console.log('Surish yo\'nalishi: ' + evt.direction); // yuqoriga, pastga, chapga, o'ngga
  },
  pinch: function(evt) {
   console.log('Chimchilash hodisasi aniqlandi');
   element.style.transform = 'scale(' + evt.scale + ')';
  },
  rotate: function(evt) {
   console.log('Aylantirish hodisasi aniqlandi');
   element.style.transform = 'rotate(' + evt.angle + 'deg)';
  }
 });

Maxsus imkoniyatlarni hisobga olish

Sensorli imo-ishoralarni amalga oshirayotganda, nogironligi bo'lgan foydalanuvchilar uchun maxsus imkoniyatlarni hisobga olish muhimdir. Ba'zi foydalanuvchilar harakat buzilishlari tufayli sensorli imo-ishoralardan foydalana olmasligi mumkin. Klaviatura boshqaruvi yoki ovozli buyruqlar kabi muqobil kiritish usullarini taqdim etish ilovangizning kengroq auditoriya uchun ochiq bo'lishini ta'minlaydi.

• Klaviatura navigatsiyasi: Barcha interaktiv elementlarga klaviatura yordamida kirish va ularni boshqarish mumkinligiga ishonch hosil qiling.
• Ekran o'qish dasturi mosligi: Ekran o'qish dasturlariga sensorli imo-ishoralar haqida semantik ma'lumot berish uchun ARIA atributlaridan foydalaning.
• Yetarli kontrast: Interfeysni ko'rish qobiliyati past foydalanuvchilar uchun o'qilishi mumkin qilish uchun matn va fon ranglari o'rtasida yetarli kontrast mavjudligiga ishonch hosil qiling.
• Teginish nishoni o'lchami: Harakat buzilishlari bo'lgan foydalanuvchilar tomonidan oson bosilishi uchun teginish nishonlari yetarlicha katta (kamida 44x44 piksel) ekanligiga ishonch hosil qiling.

Ishlash samaradorligini optimallashtirish

Sensorli hodisalar, ayniqsa murakkab imo-ishoralarni boshqarishda, hisoblash jihatidan qimmatga tushishi mumkin. Foydalanuvchining silliq va sezgir tajribasini ta'minlash uchun kodingizni ishlash samaradorligi uchun optimallashtirish juda muhimdir.

• Hodisalarni delegatsiya qilishdan foydalaning: Hodisa tinglovchilarining sonini kamaytirish uchun ularni alohida elementlar o'rniga ota-elementga biriktiring.
• Hodisa ishlovchilarini cheklang: Ishlashdagi to'siqlarni oldini olish uchun hodisa ishlovchilarining bajarilish chastotasini cheklang.
• requestAnimationFrame-dan foydalaning: Animatsiyalar va yangilanishlarni rejalashtirish uchun `requestAnimationFrame` dan foydalaning, ularning brauzerning renderlash sikli bilan sinxronlashishini ta'minlang.
• Haddan tashqari DOM manipulyatsiyasidan saqlaning: DOM manipulyatsiyasini minimallashtiring, chunki bu ishlash samaradorligini pasaytirishi mumkin.
• Haqiqiy qurilmalarda sinab ko'ring: Ishlash muammolarini aniqlash uchun kodingizni har doim haqiqiy qurilmalarda sinab ko'ring. Emulatorlar haqiqiy qurilmalarning ishlashini to'g'ri aks ettirmasligi mumkin.

Brauzerlararo moslik

Sensorli hodisalarni qo'llab-quvvatlash turli brauzerlar va qurilmalarda farq qiladi. Brauzerlararo moslikni ta'minlash uchun kodingizni turli xil brauzerlar va qurilmalarda sinab ko'rish juda muhimdir. Brauzer farqlarini yo'qotadigan polifillar yoki kutubxonalardan foydalanishni o'ylab ko'ring.

• Modernizr-dan foydalaning: Sensorli hodisalarni qo'llab-quvvatlashni aniqlash va sensorli hodisalarni qo'llab-quvvatlamaydigan brauzerlar uchun zaxira mexanizmlarini ta'minlash uchun Modernizr-dan foydalaning.
• Turli qurilmalarda sinab ko'ring: Kodingizni smartfonlar, planshetlar va sensorli ekranli noutbuklar kabi turli xil qurilmalarda sinab ko'ring.
• Polifillarni ko'rib chiqing: Eski brauzerlarda sensorli hodisalarni qo'llab-quvvatlash uchun polifillardan foydalaning.

Xalqarolashtirish (i18n) masalalari

Sensorli imo-ishoralarni joriy etishda xalqarolashtirishni (i18n) hisobga olishni unutmang. Sensorli o'zaro ta'sirlarning o'zi odatda tildan mustaqil bo'lsa-da, atrofdagi UI elementlari va fikr-mulohaza mexanizmlari turli tillar va mintaqalar uchun mahalliylashtirilishi kerak.

• Matn yo'nalishi: O'ngdan chapga (RTL) yoziladigan tillarni to'g'ri boshqaring. Masalan, surish imo-ishoralarini RTL maketlarida teskari qilish kerak bo'lishi mumkin.
• Raqam va sana formatlari: Fikr-mulohaza xabarlarida ishlatiladigan raqamlar va sanalar foydalanuvchining mahalliy sozlamalariga muvofiq formatlanganligiga ishonch hosil qiling.
• Madaniy sezgirlik: Imo-ishoralarni talqin qilishdagi madaniy farqlarga e'tibor bering. Bir madaniyatda keng tarqalgan imo-ishora boshqasida haqoratli bo'lishi mumkin. Dizaynlaringizni tadqiq qiling va moslashtiring.
• Moslashuvchan UI: UI turli tillarga tarjima qilinganda har xil matn uzunliklariga moslasha olishiga ishonch hosil qiling. Bu teginish nishonlarining joylashuvi va o'lchamiga ta'sir qilishi mumkin.

Global misollar va mulohazalar

Keling, sensorli imo-ishoralarning turli global kontekstlarda qanday farqli qo'llanilishi mumkinligini ko'rib chiqaylik:

• Osiyoda elektron tijorat: Ko'pgina Osiyo elektron tijorat ilovalari mahsulotlarni ko'rish va xarid qilish uchun murakkab imo-ishoralarga asoslangan navigatsiyadan foydalanadi. Ma'lumotlar ulanishi cheklangan mintaqalardagi foydalanuvchilar uchun soddalashtirilgan sensorli o'zaro ta'sirlarni taklif qilishni o'ylab ko'ring.
• Lotin Amerikasida o'yinlar: Mobil o'yinlar Lotin Amerikasida juda mashhur. Tez sur'atli o'yinlar uchun sensorli boshqaruvni optimallashtirish ajoyib foydalanuvchi tajribasi uchun muhimdir.
• Afrikada ta'lim: Sensorli ta'lim ilovalari maktablarda bolalarga o'qitish uchun ishlatiladi. Oddiy va intuitiv sensorli imo-ishoralar o'rganish tajribasini yaxshilashi mumkin.
• Yevropada navigatsiya: Yevropadagi xarita ilovalari, ayniqsa tarixiy obidalarni o'rganishda, silliq kattalashtirish va aylantirish imo-ishoralaridan foyda oladi.

Xulosa

Sensorli imo-ishoralar jozibali va intuitiv foydalanuvchi tajribasini yaratish uchun kuchli vositadir. Asosiy sensorli hodisalarni tushunib va tegishli imo-ishoralarni aniqlash usullaridan foydalanib, siz JavaScript loyihalaringizda keng ko'lamli imo-ishoralarni amalga oshirishingiz mumkin. Ilovangiz barcha foydalanuvchilar uchun yaxshi ishlashini ta'minlash uchun maxsus imkoniyatlar, ishlash samaradorligi va brauzerlararo moslikni hisobga olishni unutmang. Texnologiya rivojlanib borar ekan, yangi turdagi imo-ishoralar va o'zaro ta'sirlarni kutish mumkin, raqamli tajribalarning oldingi safida qolish uchun o'rganishni davom eting.