Komponen Animasi dan Interpolasi Gaya

react-spring menyediakan versi beranimasi untuk semua elemen HTML: animated.div, animated.span, animated.img, animated.button, dan seterusnya. Komponen-komponen ini merupakan pengganti langsung untuk padanan bawaannya, dengan satu perbedaan penting: komponen-komponen tersebut dapat menerima objek SpringValue sebagai properti gaya.

Elemen React biasa menerima gaya sebagai objek biasa dengan nilai statis. SpringValues adalah objek khusus yang diperbarui pada setiap bingkai animasi tanpa melalui siklus render ulang React. Hanya komponen animated.* yang mengetahui cara berlangganan pembaruan SpringValue dan mengubah gaya DOM secara langsung, sehingga React sepenuhnya dilewati demi performa maksimal.

Terapkan nilai pegas secara langsung sebagai properti gaya CSS pada komponen animated.*. Misalnya: style={{ opacity: opacity, transform: transform }} ketika opacity dan transform adalah SpringValues dari useSpring. animated.div membaca nilai-nilai ini pada setiap detak RAF (requestAnimationFrame) dan menerapkannya ke simpul DOM.

SpringValue memiliki metode .to() untuk mengubah keluarannya. Salah satu penggunaan yang umum adalah mengubah nilai pegas numerik menjadi string CSS: x.to(v => "translateX(" + v + "px)"). Fungsi tersebut menerima nilai numerik saat ini dan mengembalikan keluaran yang telah diubah, yang kemudian diterapkan sebagai gaya.

Metode .to() juga menerima masukan berupa larik untuk pemetaan rentang: x.to([0, 1], ["#ff0000", "#00ff00"]) memetakan nilai pegas dari rentang [0, 1] ke rentang warna merah hingga hijau. Dengan cara inilah Anda menginterpolasikan pegas numerik ke warna, string, atau nilai apa pun yang tidak dapat direpresentasikan sebagai angka biasa.

Ketika sebuah pegas melacak beberapa nilai secara bersamaan, Anda dapat menginterpolasikan nilai-nilai tersebut bersama-sama. Untuk pegas yang melacak { x, y }, Anda dapat menulis: x.to((xVal, yVal) => "translate(" + xVal + "px," + yVal + "px)"). Panggilan balik .to() menerima semua nilai sesuai urutannya dalam konfigurasi pegas.

Anda dapat membungkus komponen sendiri dengan animated(): const AnimatedCard = animated(Card). Komponen yang dibungkus harus menerima properti style dan meneruskannya ke elemen DOM. Kini AnimatedCard dapat menerima SpringValues dalam properti gayanya, sama seperti animated.div.

Animasi kompleks sering menggabungkan beberapa pegas. Misalnya, animasi masuk mungkin menggunakan satu pegas untuk opasitas dan pegas lain untuk posisi vertikal. Anda dapat menerapkan keduanya pada animated.div yang sama: style={{ opacity: opacitySpring.opacity, transform: positionSpring.y.to(y => "translateY(" + y + "px)") }}.

Karakteristik performa paling penting dari react-spring adalah pembaruan nilai beranimasi melewati mesin rekonsiliasi React. Saat pegas beranimasi, React TIDAK merender ulang komponen pada setiap bingkai. Sebagai gantinya, komponen animated.* memperbarui properti gaya simpul DOM secara langsung dalam setiap panggilan balik requestAnimationFrame, sehingga animasi 60 fps dapat berjalan tanpa beban tambahan dari React.

Pola animasi umum dengan interpolasi: memudar masuk saat dipasang menggunakan opacity.to([0, 1], [0, 1]), memperbesar saat diarahkan menggunakan scale.to(s => "scale(" + s + ")"), dan memutar saat pengalih diubah menggunakan rotation.to(r => "rotate(" + r + "deg)"). Merangkai transformasi-transformasi ini akan menghasilkan efek gabungan.

Secara bawaan, .to() dengan larik rentang dapat mengekstrapolasi melampaui rentang yang ditentukan. Anda dapat mengendalikannya dengan opsi extrapolate: x.to({ range: [0, 1], output: [0, 100], extrapolate: "clamp" }) mencegah keluaran berada di bawah 0 atau di atas 100, meskipun pegas melampaui sasaran. Ini berguna untuk bilah kemajuan dan animasi yang dibatasi.

Mengapa Anda harus menggunakan animated.div, bukan div biasa, ketika menerapkan nilai pegas?

animated.div, animated.span, dan animated(CustomComponent) adalah pengganti langsung yang menerima SpringValues sebagai properti gaya. Metode .to() menginterpolasikan nilai pegas: memetakannya ke string CSS, rentang warna, atau format keluaran apa pun. Beberapa pegas dapat digabungkan secara alami pada satu elemen. Manfaat performa utamanya: pembaruan pegas melewati render ulang React dengan mengubah gaya DOM secara langsung dalam panggilan balik RAF.