use-gesture ile Hareket Tabanlı Animasyonlar

@use-gesture/react, react-spring ile sorunsuz çalışmak üzere tasarlanmış bir hareket tanıma kitaplığıdır. Akıcı ve fizik tabanlı etkileşimler için sürükleme, sıkıştırma, kaydırma, üzerine gelme, hareket ve tekerlek hareketlerini tanır ve doğrudan yay ayarlayıcılarına aktarabileceğiniz normalize edilmiş bir hareket durumu sağlar.

useDrag kancası, her sürükleme olayında bir geri çağırma işlevi çalıştırır. Geri çağırma işlevi, şu temel özelliklere sahip bir hareket durumu nesnesi alır: yer değiştirme (sürüklemenin başlangıcından itibaren toplam yer değiştirme), hız (mevcut hız), yön (her eksen için 1 veya -1), ilk (sürükleme başladığında true) ve son (sürükleme bittiğinde true) ile olay (ham DOM olayı).

Tüm use-gesture kancaları bir bind() işlevi döndürür. bind() işlevinin çağrılması, etkileşimli hâle getirmek istediğiniz öğeye yayacağınız olay işleyicisi özelliklerinden oluşan bir nesne döndürür (onPointerDown, onTouchStart vb.). Bu, hareket tanıyıcı ile DOM öğeniz arasındaki bağlantı noktasıdır.

Standart yaklaşım şudur: zorunlu API ile bir yay oluşturun ([springs, api] = useSpring(...)), ardından her sürükleme olayında api.start({ x: movement[0], y: movement[1] }) çağrısını yapmak için useDrag kullanın. Yay, sürükleme hareketini akıcı biçimde takip ederek normalde katı imleç takibi olacak etkileşime doğal bir fizik hissi katar.

Bir sürükleme sona erdiğinde (hareket durumunda last: true), genellikle öğeyi başlangıç noktasına geri getirirsiniz. Bir if (last) denetiminin içinde api.start({ x: 0, y: 0 }) çağrısını yapın. react-spring, yay fiziğiyle öğeyi geri hareket ettirir; anında sıfırlamak yerine hafifçe zıplatır ve etkileşime tatmin edici bir fiziksel his kazandırır.

Hareket durumundaki velocity değeri, fırlatma davranışını mümkün kılar. Kullanıcı yüksek hızla bıraktığında öğeyi geri getirmek yerine sürükleme yönünde savurabilirsiniz. if (last && velocity[0] > threshold) denetimini yapın, ardından öğeyi ekran dışındaki son konumuna hareket ettirin. Bu, kaydırarak kapatma etkileşimleri için gereklidir.

Sürükleme hareketini bir kapsayıcının içinde sınırlamak için hareket değerlerini yaya aktarmadan önce sınırlayın: x: Math.max(-maxX, Math.min(maxX, movement[0])). Alternatif olarak, hareket durumu değerlerini otomatik olarak sınırlamak için use-gesture'ın yerleşik bounds seçeneğini kullanabilirsiniz: useDrag(handler, { bounds: { left: -100, right: 100 } }).

Mobil cihazlarda kaydırarak kapatma uygulaması için yatay hareketi izlemek üzere useDrag kullanın. Kullanıcı, eşik değerinin üzerinde bir hızla bırakırsa OR ekran genişliğinin yarısından daha fazla hareket etmişse kartı ekran dışına taşıyın (api.start({ x: window.innerWidth })) ve ardından listeden kaldırın. Aksi durumda kartı merkeze geri getirin.

usePinch, dokunmatik ekranlarda iki parmakla yapılan sıkıştırma hareketlerini ve masaüstünde Ctrl+tekerlek hareketlerini tanır. Hareket durumu, scale (sıkıştırmanın başlangıcına göre mevcut yakınlaştırma düzeyi) ve origin (sıkıştırmanın merkez noktası) değerlerini içerir. Görüntülerde veya haritalarda akıcı ve sınırlandırılmış yakınlaştırma etkileşimleri oluşturmak için bir ölçeği izleyen yaya bağlayın.

useHover, işaretçi bir öğeye girdiğinde veya öğeden ayrıldığında çalışır ve bir active boolean değeri sağlar. useMove, bir öğenin içindeki fare konumunu izleyerek normalize edilmiş koordinatlar sağlar. Her ikisi de imleç yaklaştıkça öğelerin imlece doğru hafifçe kaydığı mıknatıs etkili üzerine gelme efektleri için kullanışlıdır.

use-gesture kancaları birlikte birleştirilebilir. Aynı öğede hem useDrag hem de usePinch kullanabilirsiniz: const bindDrag = useDrag(...); const bindPinch = usePinch(...); ardından her iki bağlama işlevini de yayabilirsiniz: ...bindDrag() ...bindPinch(). use-gesture, hareket türleri arasındaki ayrımı otomatik olarak yapar.

use-gesture kancaları tarafından döndürülen bind() işlevi ne yapar?

@use-gesture/react, useDrag, usePinch, useScroll, useHover ve useMove özelliklerini sağlar. Her kanca, yayma sonucu hareket olaylarını DOM öğelerine bağlayan bir bind() işlevi döndürür. Hareket durumu; yer değiştirme, hız, yön, ilk ve son bilgilerini sağlar. Fizik tabanlı etkileşimli animasyonlar için bunu react-spring'in imperatif api.start() işleviyle birleştirin. Fırlatma ve kapatma için hızı, hareketi sınırlamak için de sınırları kullanın.