Animasi yang Digerakkan Gestur dengan use-gesture

@use-gesture/react adalah pustaka pengenalan gestur yang dirancang untuk bekerja mulus dengan react-spring. Pustaka ini mengenali seretan, cubitan, guliran, arahan kursor, gerakan, dan roda, serta menyediakan status gestur yang dinormalisasi yang dapat langsung Anda salurkan ke pengatur pegas untuk interaksi lancar berbasis fisika.

Pengait useDrag menjalankan fungsi panggilan balik pada setiap peristiwa seret. Fungsi panggilan balik tersebut menerima objek status gestur dengan properti utama: perpindahan (total perpindahan sejak awal seretan), kecepatan (kecepatan saat ini), arah (1 atau -1 pada setiap sumbu), pertama (bernilai true saat seretan dimulai), terakhir (bernilai true saat seretan berakhir), dan peristiwa (peristiwa DOM mentah).

Semua pengait use-gesture mengembalikan fungsi bind(). Memanggil bind() mengembalikan objek berisi properti penangan peristiwa (onPointerDown, onTouchStart, dll.) yang Anda terapkan pada elemen yang ingin dibuat interaktif. Inilah titik penghubung antara pengenal gestur dan elemen DOM Anda.

Pola standarnya: buat animasi pegas dengan API imperatif ([springs, api] = useSpring(...)), lalu gunakan useDrag untuk memanggil api.start({ x: movement[0], y: movement[1] }) pada setiap peristiwa seret. Animasi pegas mengikuti gerakan seretan dengan mulus, sehingga menambahkan fisika alami pada pelacakan kursor yang jika tidak demikian akan kaku.

Saat seretan berakhir (last: true dalam status gestur), biasanya Anda mengembalikan elemen ke titik asalnya. Panggil api.start({ x: 0, y: 0 }) di dalam pemeriksaan if (last). react-spring menganimasikan gerakan kembali dengan fisika pegas — pantulan lembut, bukan pengaturan ulang seketika — sehingga interaksi terasa memuaskan dan alami.

Nilai velocity dalam status gestur memungkinkan perilaku lempar. Saat pengguna melepas elemen dengan kecepatan tinggi, Anda dapat melemparkannya ke arah seretan alih-alih mengembalikannya ke posisi awal. Periksa if (last && velocity[0] > threshold), lalu animasikan elemen ke posisi akhirnya di luar layar. Hal ini penting untuk interaksi geser untuk menutup.

Untuk membatasi perpindahan seretan di dalam wadah, batasi nilai perpindahan sebelum meneruskannya ke animasi pegas: x: Math.max(-maxX, Math.min(maxX, movement[0])). Atau, gunakan opsi bounds bawaan use-gesture: useDrag(handler, { bounds: { left: -100, right: 100 } }) untuk membatasi status gestur secara otomatis.

Implementasi seluler untuk geser-menutup: gunakan useDrag untuk melacak perpindahan horizontal. Jika pengguna melepas dengan kecepatan di atas ambang OR telah berpindah lebih dari setengah lebar layar, animasikan kartu ke luar layar (api.start({ x: window.innerWidth })), lalu hapus kartu dari daftar. Jika tidak, kembalikan kartu ke tengah.

usePinch mengenali gestur cubit dua jari pada layar sentuh dan gerakan roda dengan Ctrl pada komputer desktop. Status gestur mencakup scale (tingkat pembesaran saat ini relatif terhadap awal cubitan) dan origin (titik pusat cubitan). Hubungkan gestur ini ke animasi pegas yang melacak skala untuk membuat interaksi pembesaran pada gambar atau peta menjadi mulus dan terbatas.

useHover dijalankan saat penunjuk memasuki atau meninggalkan elemen, serta menyediakan nilai boolean active. useMove melacak posisi tetikus di dalam elemen dan menyediakan koordinat yang dinormalisasi. Keduanya berguna untuk efek arahkan kursor magnetis, saat elemen sedikit bergeser mendekati kursor ketika kursor mendekat.

Pengait use-gesture dapat disusun bersama. Anda dapat menggunakan useDrag dan usePinch pada elemen yang sama: const bindDrag = useDrag(...); const bindPinch = usePinch(...), lalu terapkan kedua fungsi bind: ...bindDrag() ...bindPinch(). use-gesture menangani pembedaan antara jenis gestur secara otomatis.

Apa yang dilakukan fungsi bind() yang dikembalikan oleh pengait use-gesture?

@use-gesture/react menyediakan useDrag, usePinch, useScroll, useHover, dan useMove. Setiap pengait mengembalikan fungsi bind() yang hasil penerapan spread-nya menghubungkan peristiwa gestur ke elemen DOM. Status gestur menyediakan perpindahan, kecepatan, arah, pertama, dan terakhir. Gabungkan dengan api.start() imperatif dari react-spring untuk animasi interaktif berbasis fisika. Gunakan kecepatan untuk lempar dan tutup, serta batas untuk membatasi perpindahan.