Teras React Spring: Hook useSpring

Animasi CSS tradisional menggunakan tempoh tetap: animasi dimainkan selama X milisaat dan berhenti. react-spring menganimasikan nilai menggunakan fizik pegas—animasi dipacu oleh ketegangan (kekakuan pegas) dan geseran (sejauh mana pegas menahan pergerakan). Ini menghasilkan pergerakan yang nyahpecut secara semula jadi dan terasa organik.

Cangkuk useSpring({ from, to }) mentakrifkan nilai beranimasi. Anda menentukan nilai permulaan dalam from dan nilai sasaran dalam to. useSpring mengembalikan objek pegas yang setiap kuncinya ialah SpringValue—versi beranimasi bagi nilai angka atau warna yang sepadan.

Pilihan config mengawal tingkah laku pegas. ketegangan (lalai 170) mengawal kekakuan—nilai yang lebih tinggi kembali dengan lebih pantas. geseran (lalai 26) mengawal redaman—nilai yang lebih rendah menghasilkan lebih banyak lantunan. jisim (lalai 1) menambahkan inersia. Ketiga-tiga nilai ini bersama-sama menentukan ciri animasi.

react-spring menyediakan konfigurasi pratetap yang boleh anda gunakan tanpa pelarasan: config.default seimbang dan sesuai untuk kegunaan umum, config.gentle perlahan dan lancar, config.wobbly melantun dengan geseran rendah, config.stiff pantas dan cepat bertindak balas, manakala config.slow sangat beransur-ansur. Importkan konfigurasi ini daripada react-spring.

Nilai yang dikembalikan oleh useSpring ialah objek SpringValue, bukannya nombor biasa. Anda tidak boleh memaparkannya secara terus dalam JSX atau menggunakannya dalam objek gaya biasa. Nilai ini mesti digunakan pada komponen animated.* yang tahu cara melanggan kemas kini spring dan menggunakannya pada DOM dengan cekap.

Memberikan immediate: true kepada useSpring menyebabkan nilai melompat terus ke sasarannya, sekali gus memintas animasi spring. Ini berguna untuk paparan awal, apabila pengguna mendayakan ciri pengurangan gerakan dalam tetapan OS, atau apabila anda perlu menetapkan semula kedudukan secara programatik tanpa sebarang pergerakan visual.

Anda boleh menterbalikkan animasi spring dengan menukar nilai yang berada dalam from dan to. Satu corak lazim ialah menyimpan keadaan togol benar atau palsu dan mengira nilai mula serta nilai akhir berdasarkan keadaan itu: apabila togol adalah palsu, animasikan dari 0 ke 1; apabila benar, animasikan dari 1 ke 0. react-spring membuat peralihan antara keadaan ini dengan lancar.

useSpring boleh mengembalikan tatasusunan dua unsur: const [springs, api] = useSpring(() => ({ from: { x: 0 } })). Objek api memberikan anda kawalan secara programatik. Panggil api.start({ x: 100 }) untuk menganimasikan kepada nilai baharu, api.stop() untuk membekukan animasi, dan api.set({ x: 50 }) untuk melompat kepada nilai tersebut tanpa animasi.

Gunakan bentuk deklaratif useSpring({ from, to }) apabila animasi bergantung pada keadaan React yang berubah secara biasa. Gunakan bentuk imperatif dengan api.start() apabila anda perlu mencetuskan animasi daripada pengendali peristiwa, gerak isyarat atau operasi tak segerak tanpa menyebabkan React memaparkan semula komponen.

useSpring menerima panggilan balik kitar hayat dalam konfigurasinya. onStart dicetuskan apabila spring mula menganimasikan. onChange dicetuskan pada setiap bingkai dengan nilai semasa — berguna untuk kesan sampingan yang menjejaki kedudukan. onRest dicetuskan apabila spring stabil pada nilai akhirnya, menandakan bahawa animasi telah selesai.

Dalam bentuk deklaratif, useSpring menjalankan semula animasi secara automatik apabila nilai yang diberikan kepadanya berubah. Contohnya, useSpring({ opacity: isVisible ? 1 : 0 }) akan menganimasikan kelegapan setiap kali isVisible berubah. Ini ialah cara paling mudah untuk mengaitkan animasi spring dengan keadaan komponen.

react-spring menganimasikan berdasarkan fizik: ketegangan (kekakuan), geseran (redaman) dan jisim menentukan pergerakan. useSpring({ from, to }) mengembalikan objek SpringValue yang digunakan pada komponen animated.*. Konfigurasi pratetap (lembut, bergoyang, tegar, perlahan) merangkumi kes lazim. API imperatif [nilai spring, antara muka kawalan] membolehkan kawalan secara programatik melalui api.start(), api.stop() dan api.set(). onRest dicetuskan apabila animasi stabil.