M

MLOG

Bahasa Indonesia

Jelajahi dunia gestur sentuh dan pelajari cara mengimplementasikannya dalam proyek JavaScript Anda. Panduan ini mencakup semua hal, mulai dari event sentuh dasar hingga teknik pengenalan gestur tingkat lanjut.

Gestur Sentuh: Panduan Komprehensif untuk Implementasi JavaScript

Di dunia yang mengutamakan seluler saat ini, gestur sentuh telah menjadi bagian integral dari pengalaman pengguna. Dari ketukan sederhana hingga interaksi multi-jari yang kompleks, gestur sentuh menyediakan cara yang alami dan intuitif bagi pengguna untuk berinteraksi dengan aplikasi web. Panduan komprehensif ini menjelajahi dunia gestur sentuh dan menyediakan pendekatan langkah demi langkah untuk mengimplementasikannya dalam proyek JavaScript Anda.

Memahami Event Sentuh

Sebelum mendalami pengenalan gestur, sangat penting untuk memahami event sentuh yang mendasari interaksi ini. JavaScript menyediakan serangkaian event yang terpicu saat pengguna menyentuh layar. Event-event ini memberikan informasi tentang sentuhan tersebut, seperti lokasi dan statusnya.

Event Sentuh Dasar:

Setiap event ini berisi properti `touches`, yang merupakan daftar objek `Touch`. Setiap objek `Touch` mewakili satu titik kontak di layar dan berisi informasi seperti:

Contoh: Mencatat Koordinat Sentuhan

Contoh sederhana ini mendemonstrasikan cara mencatat koordinat titik sentuh saat pengguna menyentuh layar:


 document.addEventListener('touchstart', function(event) {
  event.preventDefault(); // Mencegah perilaku default browser (mis., menggulir)
  let touch = event.touches[0];
  console.log('Sentuhan dimulai pada X: ' + touch.clientX + ', Y: ' + touch.clientY);
 });

Catatan: Metode `preventDefault()` sering digunakan untuk mencegah browser melakukan perilaku sentuhan default-nya, seperti menggulir atau memperbesar.

Mengimplementasikan Gestur Dasar

Dengan pemahaman yang kuat tentang event sentuh, kita sekarang dapat mengimplementasikan gestur dasar. Mari kita lihat contoh seperti ketuk, geser, dan seret. Ini akan dijelaskan dengan mendefinisikan apa itu, lalu memberikan contoh Javascript.

Gestur Ketuk (Tap)

Gestur ketuk adalah sentuhan cepat dan lepas di layar. Untuk mengimplementasikan gestur ketuk, kita dapat melacak event `touchstart` dan `touchend` dan mengukur perbedaan waktu di antara keduanya. Jika perbedaan waktu di bawah ambang batas tertentu (misalnya, 200 milidetik), kita menganggapnya sebagai ketukan.


 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('Ketukan terdeteksi!');
  }
 });

Gestur Geser (Swipe)

Gestur geser adalah gerakan cepat dan berarah di seluruh layar. Untuk mendeteksi gesekan, kita perlu melacak posisi awal dan akhir sentuhan dan menghitung jarak serta arah gerakan. Kita juga perlu mempertimbangkan durasi gesekan.


 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) { // Sesuaikan ambang batas sesuai kebutuhan
   let angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;

   if (angle > -45 && angle <= 45) {
    console.log('Geser ke kanan!');
   } else if (angle > 45 && angle <= 135) {
    console.log('Geser ke bawah!');
   } else if (angle > 135 || angle <= -135) {
    console.log('Geser ke kiri!');
   } else {
    console.log('Geser ke atas!');
   }
  }
 });

Gestur Seret (Drag)

Gestur seret melibatkan menyentuh elemen dan memindahkannya di layar. Untuk mengimplementasikan gestur seret, kita perlu melacak event touchmove dan memperbarui posisi elemen sesuai dengan itu.


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

Pastikan Anda memiliki elemen dengan id "draggableElement" di HTML Anda:


 
Seret Aku!

Gestur Multi-Sentuh

Gestur multi-sentuh melibatkan penggunaan beberapa jari untuk berinteraksi dengan layar. Ini memungkinkan interaksi yang lebih kompleks dan ekspresif, seperti cubit untuk memperbesar (pinch-to-zoom) dan putar.

Cubit untuk Memperbesar (Pinch-to-Zoom)

Cubit untuk memperbesar adalah gestur umum yang digunakan untuk memperbesar dan memperkecil gambar atau peta. Untuk mengimplementasikan cubit untuk memperbesar, kita perlu melacak jarak antara dua titik sentuh dan menyesuaikan skala elemen sesuai dengan itu.


 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; // Akumulasi penskalaan
   element.style.transform = 'scale(' + currentScale + ')';
   initialDistance = currentDistance; // Atur ulang untuk gerakan berikutnya
  }
 });

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

Pastikan Anda memiliki gambar dengan id "zoomableImage" di HTML Anda:

Rotasi (Rotation)

Rotasi melibatkan memutar elemen menggunakan dua jari. Untuk mengimplementasikan rotasi, kita perlu melacak sudut antara dua titik sentuh dan memutar elemen sesuai dengan itu.


 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; // Akumulasi rotasi
   element.style.transform = 'rotate(' + currentRotation + 'deg)';
   initialAngle = currentAngle; // Atur ulang untuk gerakan berikutnya
  }
 });

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

Pastikan Anda memiliki gambar dengan id "rotatableImage" di HTML Anda:

Pustaka Pengenalan Gestur

Mengimplementasikan gestur kompleks dari awal bisa jadi menantang dan memakan waktu. Untungnya, beberapa pustaka JavaScript dapat menyederhanakan proses pengenalan gestur. Pustaka-pustaka ini menyediakan pengenal gestur bawaan dan utilitas untuk menangani event sentuh.

Hammer.js

Hammer.js adalah pustaka JavaScript yang populer untuk mengenali gestur. Ini mendukung berbagai macam gestur, termasuk ketuk, ketuk ganda, geser, cubit, putar, dan geser (pan). Pustaka ini ringan, mudah digunakan, dan sangat dapat disesuaikan. Hammer.js bekerja dengan mendengarkan event sentuh dan kemudian menentukan tindakan apa yang dilakukan pengguna berdasarkan lokasi dan durasi titik sentuh.


 // Sertakan Hammer.js di HTML Anda
 // 

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

 hammer.on('tap', function(event) {
  console.log('Event ketuk terdeteksi');
 });

 hammer.on('swipe', function(event) {
  console.log('Event geser terdeteksi');
  console.log('Arah geser: ' + event.direction);
 });

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

 hammer.on('pinch', function(event) {
  console.log('Event cubit terdeteksi');
  element.style.transform = 'scale(' + event.scale + ')';
 });

 hammer.on('rotate', function(event) {
  console.log('Event putar terdeteksi');
  element.style.transform = 'rotate(' + event.rotation + 'deg)';
 });

AlloyFinger

AlloyFinger adalah pustaka JavaScript populer lainnya yang berspesialisasi dalam pengenalan gestur, terutama untuk perangkat seluler. Pustaka ini dikenal karena ukurannya yang kecil dan kinerja yang baik. Ini berfokus pada gestur sentuh umum seperti ketuk, geser, cubit, putar, dan tekan. Ini menyediakan API yang mudah digunakan untuk mengikat gestur ke elemen.


 // Sertakan AlloyFinger di HTML Anda
 //  // Ganti dengan path AlloyFinger Anda

 let element = document.getElementById('myElement');
 let af = new AlloyFinger(element, {
  tap: function() {
   console.log('Event ketuk terdeteksi');
  },
  swipe: function(evt) {
   console.log('Event geser terdeteksi');
   console.log('Arah geser: ' + evt.direction); // atas, bawah, kiri, kanan
  },
  pinch: function(evt) {
   console.log('Event cubit terdeteksi');
   element.style.transform = 'scale(' + evt.scale + ')';
  },
  rotate: function(evt) {
   console.log('Event putar terdeteksi');
   element.style.transform = 'rotate(' + evt.angle + 'deg)';
  }
 });

Pertimbangan Aksesibilitas

Saat mengimplementasikan gestur sentuh, penting untuk mempertimbangkan aksesibilitas bagi pengguna dengan disabilitas. Beberapa pengguna mungkin tidak dapat menggunakan gestur sentuh karena gangguan motorik. Menyediakan metode input alternatif, seperti kontrol keyboard atau perintah suara, memastikan bahwa aplikasi Anda dapat diakses oleh audiens yang lebih luas.

Optimisasi Kinerja

Event sentuh bisa jadi mahal secara komputasi, terutama saat menangani gestur yang kompleks. Mengoptimalkan kode Anda untuk kinerja sangat penting untuk memastikan pengalaman pengguna yang lancar dan responsif.

Kompatibilitas Lintas Browser

Dukungan event sentuh bervariasi di berbagai browser dan perangkat. Sangat penting untuk menguji kode Anda di berbagai browser dan perangkat untuk memastikan kompatibilitas lintas browser. Pertimbangkan untuk menggunakan polyfill atau pustaka yang mengabstraksi perbedaan browser.

Pertimbangan Internasionalisasi (i18n)

Saat mengimplementasikan gestur sentuh, ingatlah untuk mempertimbangkan internasionalisasi (i18n). Meskipun interaksi sentuh itu sendiri umumnya agnostik terhadap bahasa, elemen UI di sekitarnya dan mekanisme umpan balik harus dilokalkan untuk berbagai bahasa dan wilayah.

Contoh dan Pertimbangan Global

Mari kita pertimbangkan bagaimana gestur sentuh dapat diterapkan secara berbeda dalam berbagai konteks global:

Kesimpulan

Gestur sentuh adalah alat yang ampuh untuk menciptakan pengalaman pengguna yang menarik dan intuitif. Dengan memahami event sentuh yang mendasarinya dan menggunakan teknik pengenalan gestur yang sesuai, Anda dapat mengimplementasikan berbagai macam gestur dalam proyek JavaScript Anda. Ingatlah untuk mempertimbangkan aksesibilitas, kinerja, dan kompatibilitas lintas browser untuk memastikan bahwa aplikasi Anda berfungsi dengan baik untuk semua pengguna. Seiring kemajuan teknologi, harapkan untuk melihat jenis gestur dan interaksi baru, teruslah belajar untuk tetap berada di garis depan pengalaman digital.