Dokunma Hareketleri: JavaScript Uygulamaları için Kapsamlı Bir Kılavuz

Günümüzün mobil öncelikli dünyasında, dokunma hareketleri kullanıcı deneyiminin ayrılmaz bir parçası haline gelmiştir. Basit dokunuşlardan karmaşık çok parmaklı etkileşimlere kadar, dokunma hareketleri kullanıcıların web uygulamalarıyla etkileşim kurması için doğal ve sezgisel bir yol sunar. Bu kapsamlı kılavuz, dokunma hareketleri dünyasını keşfeder ve JavaScript projelerinizde bunları uygulamak için adım adım bir yaklaşım sunar.

Dokunma Olaylarını Anlamak

Hareket tanımaya dalmadan önce, bu etkileşimlere güç veren temel dokunma olaylarını anlamak çok önemlidir. JavaScript, bir kullanıcı ekrana dokunduğunda tetiklenen bir dizi olay sağlar. Bu olaylar, dokunmanın konumu ve durumu gibi bilgiler sunar.

Temel Dokunma Olayları:

• touchstart: Bir dokunma noktası dokunmatik yüzeye yerleştirildiğinde tetiklenir.
• touchmove: Bir dokunma noktası dokunmatik yüzey boyunca hareket ettirildiğinde tetiklenir.
• touchend: Bir dokunma noktası dokunmatik yüzeyden kaldırıldığında tetiklenir.
• touchcancel: Bir dokunma etkileşimi kesintiye uğradığında (örneğin, bir sistem uyarısıyla) tetiklenir.

Bu olayların her biri, bir `Touch` nesneleri listesi olan bir `touches` özelliği içerir. Her `Touch` nesnesi, ekrandaki tek bir temas noktasını temsil eder ve aşağıdaki gibi bilgiler içerir:

• clientX: Dokunma noktasının görüntü alanına göre yatay koordinatı.
• clientY: Dokunma noktasının görüntü alanına göre dikey koordinatı.
• screenX: Dokunma noktasının ekrana göre yatay koordinatı.
• screenY: Dokunma noktasının ekrana göre dikey koordinatı.
• target: Dokunulan DOM öğesi.
• identifier: Dokunma noktası için benzersiz bir tanımlayıcı (çoklu dokunma etkileşimleri için kullanışlıdır).

Örnek: Dokunma Koordinatlarını Kaydetme

Bu basit örnek, kullanıcı ekrana dokunduğunda bir dokunma noktasının koordinatlarının nasıl kaydedileceğini gösterir:

 document.addEventListener('touchstart', function(event) {
  event.preventDefault(); // Tarayıcının varsayılan davranışını (ör. kaydırma) engeller
  let touch = event.touches[0];
  console.log('Dokunma başladı X: ' + touch.clientX + ', Y: ' + touch.clientY);
 });

Not: `preventDefault()` yöntemi genellikle tarayıcının kaydırma veya yakınlaştırma gibi varsayılan dokunma davranışını gerçekleştirmesini önlemek için kullanılır.

Temel Hareketleri Uygulama

Dokunma olayları hakkında sağlam bir anlayışla, artık temel hareketleri uygulayabiliriz. Dokunma, kaydırma ve sürükleme gibi örneklere bakalım. Bunlar önce ne oldukları tanımlanarak, ardından Javascript örnekleri verilerek açıklanacaktır.

Dokunma (Tap) Hareketi

Dokunma hareketi, ekrana hızlı bir dokunma ve bırakmadır. Bir dokunma hareketini uygulamak için, `touchstart` ve `touchend` olaylarını takip edebilir ve aralarındaki zaman farkını ölçebiliriz. Zaman farkı belirli bir eşiğin altındaysa (örneğin, 200 milisaniye), bunu bir dokunma olarak kabul ederiz.

 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('Dokunma algılandı!');
  }
 });

Kaydırma (Swipe) Hareketi

Kaydırma hareketi, ekran boyunca hızlı, yönlü bir harekettir. Bir kaydırmayı algılamak için, dokunmanın başlangıç ve bitiş konumlarını izlememiz ve hareketin mesafesini ve yönünü hesaplamamız gerekir. Ayrıca kaydırmanın süresini de dikkate almamız gerekir.

 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) { // Eşiği gerektiği gibi ayarlayın
   let angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;

   if (angle > -45 && angle <= 45) {
    console.log('Sağa kaydırma!');
   } else if (angle > 45 && angle <= 135) {
    console.log('Aşağı kaydırma!');
   } else if (angle > 135 || angle <= -135) {
    console.log('Sola kaydırma!');
   } else {
    console.log('Yukarı kaydırma!');
   }
  }
 });

Sürükleme (Drag) Hareketi

Sürükleme hareketi, bir öğeye dokunup onu ekran boyunca hareket ettirmeyi içerir. Bir sürükleme hareketini uygulamak için, `touchmove` olayını izlememiz ve öğenin konumunu buna göre güncellememiz gerekir.

 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'nizde "draggableElement" id'sine sahip bir öğe olduğundan emin olun:

 
Sürükle Beni!

Çoklu Dokunma Hareketleri

Çoklu dokunma hareketleri, ekranla etkileşim kurmak için birden çok parmak kullanmayı içerir. Bu, çimdikleyerek yakınlaştırma (pinch-to-zoom) ve döndürme gibi daha karmaşık ve etkileyici etkileşimlere olanak tanır.

Çimdikleyerek Yakınlaştırma (Pinch-to-Zoom)

Çimdikleyerek yakınlaştırma, bir görüntüyü veya haritayı yakınlaştırmak ve uzaklaştırmak için kullanılan yaygın bir harekettir. Çimdikleyerek yakınlaştırmayı uygulamak için, iki dokunma noktası arasındaki mesafeyi izlememiz ve öğenin ölçeğini buna göre ayarlamamız gerekir.

 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; // Ölçeklemeyi biriktir
   element.style.transform = 'scale(' + currentScale + ')';
   initialDistance = currentDistance; // Sonraki hareket için sıfırla
  }
 });

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

HTML'nizde "zoomableImage" id'sine sahip bir resim olduğundan emin olun:

Döndürme (Rotation)

Döndürme, bir öğeyi iki parmak kullanarak döndürmeyi içerir. Döndürmeyi uygulamak için, iki dokunma noktası arasındaki açıyı izlememiz ve öğeyi buna göre döndürmemiz gerekir.

 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; // Döndürmeyi biriktir
   element.style.transform = 'rotate(' + currentRotation + 'deg)';
   initialAngle = currentAngle; // Sonraki hareket için sıfırla
  }
 });

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

HTML'nizde "rotatableImage" id'sine sahip bir resim olduğundan emin olun:

Hareket Tanıma Kütüphaneleri

Karmaşık hareketleri sıfırdan uygulamak zorlu ve zaman alıcı olabilir. Neyse ki, birkaç JavaScript kütüphanesi hareket tanıma sürecini basitleştirebilir. Bu kütüphaneler, önceden oluşturulmuş hareket tanıyıcıları ve dokunma olaylarını işlemek için yardımcı programlar sağlar.

Hammer.js

Hammer.js, hareketleri tanımak için popüler bir JavaScript kütüphanesidir. Dokunma, çift dokunma, kaydırma, çimdikleme, döndürme ve kaydırma gibi çok çeşitli hareketleri destekler. Hafif, kullanımı kolay ve son derece özelleştirilebilir. Hammer.js, dokunma olaylarını dinleyerek ve ardından dokunma noktalarının konumuna ve süresine göre kullanıcının hangi eylemi gerçekleştirdiğini belirleyerek çalışır.

 // Hammer.js'i HTML'nize dahil edin
 // 

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

 hammer.on('tap', function(event) {
  console.log('Dokunma olayı algılandı');
 });

 hammer.on('swipe', function(event) {
  console.log('Kaydırma olayı algılandı');
  console.log('Kaydırma yönü: ' + event.direction);
 });

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

 hammer.on('pinch', function(event) {
  console.log('Çimdikleme olayı algılandı');
  element.style.transform = 'scale(' + event.scale + ')';
 });

 hammer.on('rotate', function(event) {
  console.log('Döndürme olayı algılandı');
  element.style.transform = 'rotate(' + event.rotation + 'deg)';
 });

AlloyFinger

AlloyFinger, özellikle mobil cihazlar için hareket tanıma konusunda uzmanlaşmış bir başka popüler JavaScript kütüphanesidir. Küçük boyutu ve iyi performansıyla bilinir. Dokunma, kaydırma, çimdikleme, döndürme ve basma gibi yaygın dokunma hareketlerine odaklanır. Hareketleri öğelere bağlamak için kullanımı kolay bir API sağlar.

 // AlloyFinger'ı HTML'nize dahil edin
 //  // AlloyFinger yolunuzla değiştirin

 let element = document.getElementById('myElement');
 let af = new AlloyFinger(element, {
  tap: function() {
   console.log('Dokunma olayı algılandı');
  },
  swipe: function(evt) {
   console.log('Kaydırma olayı algılandı');
   console.log('Kaydırma yönü: ' + evt.direction); // yukarı, aşağı, sol, sağ
  },
  pinch: function(evt) {
   console.log('Çimdikleme olayı algılandı');
   element.style.transform = 'scale(' + evt.scale + ')';
  },
  rotate: function(evt) {
   console.log('Döndürme olayı algılandı');
   element.style.transform = 'rotate(' + evt.angle + 'deg)';
  }
 });

Erişilebilirlik Hususları

Dokunma hareketlerini uygularken, engelli kullanıcılar için erişilebilirliği göz önünde bulundurmak esastır. Bazı kullanıcılar motor bozuklukları nedeniyle dokunma hareketlerini kullanamayabilir. Klavye kontrolleri veya sesli komutlar gibi alternatif giriş yöntemleri sağlamak, uygulamanızın daha geniş bir kitle tarafından erişilebilir olmasını sağlar.

• Klavye ile Gezinme: Tüm etkileşimli öğelere klavye kullanılarak erişilebildiğinden ve bunların yönetilebildiğinden emin olun.
• Ekran Okuyucu Uyumluluğu: Ekran okuyuculara dokunma hareketleri hakkında anlamsal bilgi sağlamak için ARIA niteliklerini kullanın.
• Yeterli Kontrast: Arayüzün az gören kullanıcılar için okunabilir olmasını sağlamak amacıyla metin ve arka plan renkleri arasında yeterli kontrast olduğundan emin olun.
• Dokunma Hedefi Boyutu: Dokunma hedeflerinin motor bozukluğu olan kullanıcılar tarafından kolayca dokunulabilecek kadar büyük (en az 44x44 piksel) olduğundan emin olun.

Performans Optimizasyonu

Dokunma olayları, özellikle karmaşık hareketleri işlerken hesaplama açısından maliyetli olabilir. Kodunuzu performans için optimize etmek, sorunsuz ve duyarlı bir kullanıcı deneyimi sağlamak için çok önemlidir.

• Olay Delegasyonu Kullanın: Olay dinleyicilerinin sayısını azaltmak için olay dinleyicilerini tek tek öğeler yerine bir üst öğeye ekleyin.
• Olay İşleyicilerini Yavaşlatın (Throttle): Performans darboğazlarını önlemek için olay işleyicilerinin yürütülme sıklığını sınırlayın.
• requestAnimationFrame Kullanın: Animasyonları ve güncellemeleri planlamak için `requestAnimationFrame` kullanın, böylece tarayıcının oluşturma döngüsüyle senkronize olmalarını sağlayın.
• Aşırı DOM Manipülasyonundan Kaçının: Bir performans darboğazı olabileceğinden, DOM manipülasyonunu en aza indirin.
• Gerçek Cihazlarda Test Edin: Performans sorunlarını belirlemek için kodunuzu her zaman gerçek cihazlarda test edin. Emülatörler, gerçek cihazların performansını doğru bir şekilde yansıtmayabilir.

Tarayıcılar Arası Uyumluluk

Dokunma olayı desteği farklı tarayıcılar ve cihazlar arasında değişiklik gösterir. Tarayıcılar arası uyumluluğu sağlamak için kodunuzu çeşitli tarayıcılarda ve cihazlarda test etmek çok önemlidir. Tarayıcı farklılıklarını soyutlayan polyfill'ler veya kütüphaneler kullanmayı düşünün.

• Modernizr Kullanın: Dokunma olayı desteğini algılamak ve dokunma olaylarını desteklemeyen tarayıcılar için geri dönüş mekanizmaları sağlamak üzere Modernizr'ı kullanın.
• Farklı Cihazlarda Test Edin: Kodunuzu akıllı telefonlar, tabletler ve dokunmatik ekranlı dizüstü bilgisayarlar da dahil olmak üzere çeşitli cihazlarda test edin.
• Polyfill'leri Değerlendirin: Eski tarayıcılarda dokunma olayı desteği sağlamak için polyfill'ler kullanın.

Uluslararasılaştırma (i18n) Hususları

Dokunma hareketlerini uygularken uluslararasılaştırmayı (i18n) göz önünde bulundurmayı unutmayın. Dokunma etkileşimlerinin kendisi genellikle dilden bağımsız olsa da, çevreleyen kullanıcı arayüzü öğeleri ve geri bildirim mekanizmaları farklı diller ve bölgeler için yerelleştirilmelidir.

• Metin Yönü: Sağdan sola (RTL) dilleri doğru şekilde ele alın. Örneğin, kaydırma hareketlerinin RTL düzenlerinde tersine çevrilmesi gerekebilir.
• Sayı ve Tarih Biçimleri: Geri bildirim mesajlarında kullanılan sayıların ve tarihlerin kullanıcının yerel ayarına göre biçimlendirildiğinden emin olun.
• Kültürel Duyarlılık: Hareket yorumlamadaki kültürel farklılıklara dikkat edin. Bir kültürde yaygın olan bir hareket, başka bir kültürde rahatsız edici olabilir. Araştırma yapın ve tasarımlarınızı buna göre uyarlayın.
• Uyarlanabilir Kullanıcı Arayüzü: Kullanıcı arayüzünüzün çeşitli dillere çevrildiğinde farklı metin uzunluklarına uyum sağlayabildiğinden emin olun. Bu, dokunma hedeflerinin yerleşimini ve boyutunu etkileyebilir.

Küresel Örnekler ve Hususlar

Dokunma hareketlerinin çeşitli küresel bağlamlarda nasıl farklı şekilde uygulanabileceğini düşünelim:

• Asya'da E-ticaret: Birçok Asya e-ticaret uygulaması, ürün tarama ve satın alma için karmaşık hareket tabanlı gezinme kullanır. Sınırlı veri bağlantısı olan bölgelerdeki kullanıcılar için modernize edilmiş dokunma etkileşimleri sunmayı düşünün.
• Latin Amerika'da Oyun: Mobil oyunlar Latin Amerika'da çok popülerdir. Hızlı tempolu oyunlar için dokunmatik kontrolleri optimize etmek, harika bir kullanıcı deneyimi için önemlidir.
• Afrika'da Eğitim: Dokunmatik tabanlı eğitim uygulamaları, okullarda çocuklara öğretmek için kullanılır. Basit ve sezgisel dokunma hareketleri öğrenme deneyimini geliştirebilir.
• Avrupa'da Navigasyon: Avrupa'daki harita uygulamaları, özellikle tarihi yerleri keşfederken akıcı yakınlaştırma ve döndürme hareketlerinden yararlanır.

Sonuç

Dokunma hareketleri, ilgi çekici ve sezgisel kullanıcı deneyimleri oluşturmak için güçlü bir araçtır. Temel dokunma olaylarını anlayarak ve uygun hareket tanıma tekniklerini kullanarak, JavaScript projelerinizde çok çeşitli hareketler uygulayabilirsiniz. Uygulamanızın tüm kullanıcılar için iyi çalıştığından emin olmak için erişilebilirlik, performans ve tarayıcılar arası uyumluluğu göz önünde bulundurmayı unutmayın. Teknoloji ilerledikçe, yeni türde hareketler ve etkileşimler görmeyi bekleyin; dijital deneyimlerin ön saflarında kalmak için öğrenmeye devam edin.