Dasar React Spring: Hook useSpring

Animasi CSS tradisional menggunakan durasi tetap: animasi berjalan selama X milidetik lalu berhenti. react-spring menganimasikan nilai menggunakan fisika pegas — animasi digerakkan oleh ketegangan (kekakuan pegas) dan gesekan (seberapa besar pegas menahan gerakan). Hasilnya adalah gerakan yang melambat secara alami dan terasa organik.

Kait useSpring({ from, to }) mendefinisikan nilai yang dianimasikan. Anda menentukan nilai awal dalam from dan nilai target dalam to. useSpring mengembalikan objek pegas yang setiap kuncinya merupakan SpringValue — versi animasi dari nilai numerik atau warna yang sesuai.

Opsi config mengatur perilaku pegas. Ketegangan (bawaan 170) mengatur kekakuan — nilai yang lebih tinggi kembali dengan lebih cepat. Gesekan (bawaan 26) mengatur redaman — nilai yang lebih rendah menghasilkan lebih banyak pantulan. Massa (bawaan 1) menambahkan inersia. Ketiga nilai ini bersama-sama menentukan karakter animasi.

react-spring menyediakan konfigurasi prasetel yang dapat digunakan tanpa penyesuaian: config.default seimbang dan serbaguna, config.gentle lambat dan halus, config.wobbly memantul dengan gesekan rendah, config.stiff cepat dan responsif, sedangkan config.slow berjalan sangat bertahap. Impor konfigurasi tersebut dari react-spring.

Nilai yang dikembalikan oleh useSpring adalah objek SpringValue, bukan angka biasa. Anda tidak dapat merendernya secara langsung di JSX atau menggunakannya dalam objek gaya biasa. Nilai tersebut harus diterapkan pada komponen animated.* yang mengetahui cara berlangganan pembaruan pegas dan menerapkannya ke DOM secara efisien.

Memberikan immediate: true kepada useSpring membuat nilai langsung berpindah ke sasaran, sehingga melewati animasi pegas. Ini berguna untuk tampilan awal, ketika pengguna mengaktifkan "kurangi gerakan" dalam pengaturan OS, atau ketika Anda perlu mengatur ulang posisi secara terprogram tanpa gerakan visual apa pun.

Anda dapat membalikkan animasi pegas dengan mengubah nilai mana yang berada dalam from dan to. Pola yang umum adalah menyimpan status pengalih benar/salah dan menghitung from/to berdasarkan status tersebut: ketika pengalih bernilai false, animasikan dari 0 ke 1; ketika bernilai true, animasikan dari 1 ke 0. react-spring melakukan transisi antarstatus dengan mulus.

useSpring dapat mengembalikan larik dua elemen: const [springs, api] = useSpring(() => ({ from: { x: 0 } })). Objek api memberi Anda kendali terprogram. Panggil api.start({ x: 100 }) untuk menganimasikan ke nilai baru, api.stop() untuk membekukan animasi, dan api.set({ x: 50 }) untuk berpindah secara langsung tanpa animasi.

Gunakan bentuk deklaratif useSpring({ from, to }) ketika animasi bergantung pada status React yang berubah secara normal. Gunakan bentuk imperatif dengan api.start() ketika Anda perlu memicu animasi dari penangan acara, gestur, atau operasi asinkron tanpa menyebabkan React merender ulang.

useSpring menerima panggilan balik siklus hidup dalam konfigurasinya. onStart dipanggil ketika pegas mulai beranimasi. onChange dipanggil pada setiap bingkai dengan nilai saat ini—berguna untuk efek samping yang melacak posisi. onRest dipanggil ketika pegas stabil pada nilai akhirnya, yang menandakan bahwa animasi telah selesai.

Dalam bentuk deklaratif, useSpring secara otomatis menjalankan ulang animasi ketika nilai yang diberikan kepadanya berubah. Misalnya, useSpring({ opacity: isVisible ? 1 : 0 }) akan menganimasikan opasitas setiap kali isVisible berubah. Ini adalah cara paling sederhana untuk menghubungkan animasi pegas dengan status komponen.

Dalam konfigurasi react-spring, apa yang dikendalikan oleh tegangan dan gesekan?

react-spring menganimasikan dengan fisika: tegangan (kekakuan), gesekan (redaman), dan massa menentukan gerakan. useSpring({ from, to }) mengembalikan objek SpringValue yang diterapkan pada komponen animated.*. Konfigurasi prasetel (lembut, bergoyang, kaku, lambat) mencakup kasus umum. API imperatif [springs, api] memungkinkan kendali terprogram melalui api.start(), api.stop(), dan api.set(). onRest dipanggil ketika animasi stabil.