Cara menggunakan React Spring untuk menganimasikan komponen

Isi

• 01. Instal dependensi
• 02. Menghasilkan gambar di negara bagian
• 03. Tampilkan setiap kartu gambar
• 04. Tambahkan struktur kartu
• 05. Terapkan gaya hover
• 06. Atur bayangan secara default
• 07. Tahan status yang dipilih
• 08. Tentukan animasi flip
• 09. Konversi ke wadah animasi
• 10. Animasikan kartu depan
• 11. Animasikan kartu belakang
• 12. Interpolasi nilai
• 13. Alihkan status saat mengklik
• 14. Sesuaikan fisika flip kartu
• 15. Buat pegas untuk efek kemiringan
• 16. Terapkan gaya miring
• 17. Tetapkan nilai pada gerakan mouse
• 18. Hitung nilai animasi
• 19. Tampilkan rating bintang
• 20. Buat animasi bintang
• 21. Terapkan bintang ke komponen

React Spring dapat membantu Anda dengan animasi, yang sangat sulit diterapkan di web. Animasi CSS adalah pilihan terbaik, tetapi untuk menciptakan hasil yang mulus, memerlukan pengaturan kelas, durasi, dan acara yang cermat. Melempar kerangka JavaScript seperti React ke dalam campuran hanya memperumit masalah lebih jauh.

Untuk animasi yang mengandalkan interaksi pengguna, nilai dapat dihitung melalui JavaScript dan diterapkan ke elemen secara langsung. Dengan mengambil pendekatan manual ini, kita perlu menghitung dan menerapkan easing kita sendiri untuk membuat animasi terlihat lebih alami.

React Spring adalah perpustakaan yang dibuat untuk menangani banyak hang-up umum terkait animasi di web. Dibutuhkan pendekatan yang sedikit berbeda, dengan berfokus pada fisika selama durasi lurus dan fungsi easing yang ditentukan. Ini membantu menjaga agar segala sesuatunya terasa mulus dan alami.

Meskipun sebagian besar waktu ini digunakan untuk efek visual, pustaka akan bertransisi di antara dua nilai terlepas dari apakah nilai tersebut pernah digunakan untuk gaya atau tidak. Misalnya, ini dapat digunakan untuk menghitung jumlah pendaftaran untuk menekankan seberapa besar komunitas itu.

Dalam tutorial ini, kita akan membuat komponen kartu yang memungkinkan pengguna untuk menilai gambar. Kartu membalik untuk menampilkan peringkat bintang dan pengguna dapat mengeklik untuk menambahkan milik mereka. Kami akan menggunakan implementasi hook terbaru dari React Spring, yang membutuhkan React versi 16.8 atau lebih tinggi. Sebelum Anda mulai, unduh file tutorial di sini (dan cadangkan di penyimpanan cloud).

Jika Anda ingin membangun situs tanpa proses kode yang rumit, gunakan pembuat situs web yang layak. Dan pastikan untuk menjelajahi opsi hosting web juga.

01. Instal dependensi

Dengan file yang diunduh, dependensi paket perlu diinstal sebelum kita dapat memulai. Proyek berbasis Create React App ini mencakup bereaksi-pegas paket dan semua penyiapan server lokal yang diperlukan untuk memulai.

Pada baris perintah, temukan file proyek dan instal, lalu jalankan.

> benang> benang mulai

02. Menghasilkan gambar di negara bagian

Pertama, kami membutuhkan beberapa gambar untuk dinilai. Untuk tutorial ini, kita akan melakukan hard-code beberapa gambar ke dalam status aplikasi, tetapi data ini dapat berasal dari sumber mana pun. Buka App.js dan buat beberapa gambar dengan useState hook dari React. Ini akan memberi setiap gambar peringkat awal yang dapat kami tampilkan dan perbarui nanti.

const [kartu] = useState ([createImage (gambar1), createImage (gambar2), createImage (gambar3)]);

03. Tampilkan setiap kartu gambar

Saat gambar disimpan dalam array, kita dapat mengulang status itu dan membuat komponen terpisah untuk masing-masing. Logika animasi untuk React Spring akan hidup di dalam a RatingsCard /> komponen yang dapat kita gunakan di mana saja kita perlu.

Di dalam metode render App.js, buat salinan komponen itu untuk setiap kartu dalam larik status. Ini akan menerima setiap nilai di negara bagian, termasuk gambar dan peringkat awal.

{cards.map ((card, index) => (kunci RatingsCard = {index} {... card} />))}

04. Tambahkan struktur kartu

Sebelum kita dapat menambahkan animasi, kartu membutuhkan beberapa konten. Setiap kartu memiliki bagian depan dan belakang, yang diimplementasikan secara terpisah div> elemen berlapis di atas satu sama lain.

Buka RatingsCard / index.js, dan tambahkan struktur kartu. Kita perlu menerapkan gambar sebagai latar belakang ke kartu depan, dengan bagian belakang akhirnya berisi rating.

div className = "RatingsCard"> div className = "RatingsCard__front" style = {{backgroundImage: `url ($ {image})`}} /> div className = "RatingsCard__back" /> / div>

05. Terapkan gaya hover

Gaya apa pun yang tidak diperbarui secara langsung melalui animasi kami dapat diterapkan melalui CSS. Ini termasuk efek bayangan 3D dasar untuk setiap kartu saat diarahkan ke atas. Dalam RatingsCard / style.css, tambahkan beberapa gaya ekstra untuk membuat kartu melompat keluar dari halaman saat mengarahkan kursor dengan menerapkan filter.

.RatingsCard: hover {filter: drop-shadow (0 14px 28px rgba (0, 0, 0, 0.25)) drop-shadow (0 10px 10px rgba (0, 0, 0, 0.1)); }

06. Atur bayangan secara default

Bayangan tiba-tiba saat melayang adalah pengalaman yang mengejutkan. Oleh karena itu, kita harus perlahan-lahan melakukan transisi antar negara bagian untuk menjaga semuanya tetap lancar. Tambahkan drop-shadow yang lebih halus untuk kartu saat tidak diarahkan ke atas. Menggunakan transisi properti untuk dianimasikan di antara dua status tersebut.

.RatingsCard {[...] filter: drop-shadow (0 3px 6px rgba (0, 0, 0, 0.16)) drop-shadow (0 3px 6px rgba (0, 0, 0, 0.1)); transisi: filter 0,5s; }

07. Tahan status yang dipilih

Kami perlu menyimpan dan memperbarui informasi tentang sisi mana dari kartu yang menghadap ke atas. Kita bisa menggunakan built-in React useState hook untuk menentukan nilai awal dan mengembalikan nilai saat ini dan metode untuk memperbaruinya.

Di awal RatingsCard fungsi komponen, buat definisikan ini terpilih negara.

const [dipilih, setSelected] = useState (false);

08. Tentukan animasi flip

React Spring bertanggung jawab untuk mentransisikan angka antara satu nilai dan nilai lainnya. Ini dapat dilakukan dengan pegas dan useSpring menghubungkan. Kami memberinya beberapa informasi penyiapan, dan mengembalikan sekumpulan nilai yang diperbarui sesuai dengan kalkulasi fisiknya.

Buat pegas untuk animasi flip. Yang ini akan memudar dan memutar kartu tergantung pada apakah kartu itu ada di dalamnya terpilih negara.

const {opacity, transform} = useSpring ({opacity: selected? 1: 0, transform: `rotateY ($ {selected? 180: 0} deg)`});

09. Konversi ke wadah animasi

Benda-benda yang dikembalikan useSpring definisikan animasinya, tetapi jangan berikan nilai numerik yang kita butuhkan. Itu animasi fungsi pabrik mencerna informasi ini dan kemudian memberikan nilai sebagai angka ke komponen.

Ubah file RatingsCard elemen untuk menggunakan animasi fungsi. Itu animated.div sintaks memberitahu fungsi untuk mengembalikan div>.

animated.div className = "RatingsCard"> animated.div className = "RatingsCard__front" style = {{backgroundImage: `url ($ {image})`}} /> animated.div className = "RatingsCard__back" /> /animated.div >

10. Animasikan kartu depan

React Spring hanya menganimasikan nilai dan tidak melakukan animasi elemen itu sendiri. Kita bisa menghubungkan nilai-nilai itu ke prop gaya dan membuat animasi itu dengan cepat. Perbarui kartu depan untuk memanfaatkan yang baru kegelapan dan mengubah nilai-nilai. Dalam kasus ini, kita perlu menginterpolasi nilai opacity, yang akan segera kita bahas.

animated.div className = "RatingsCard__front" style = {{backgroundImage: `url ($ {image})`, opacity: opacity.interpolate (inverseOpacity), transform}} />

11. Animasikan kartu belakang

Saat membalik kartu, animasi apa pun yang kami terapkan ke satu wajah perlu diterapkan secara terbalik ke wajah lainnya. Saat dimainkan bersama, mereka akan terlihat seperti bergerak sebagai satu kesatuan.

Dalam hal ini, kita perlu menerapkan gaya yang sama ke kartu belakang, tapi kali ini menginterpolasi mengubah nilai sebagai gantinya.

animated.div className = "RatingsCard__back" style = {{opacity, transform: transform .interpolate (inverseTransform)}} />

12. Interpolasi nilai

Alih-alih langsung menerapkan nilai ke properti CSS, kita dapat menerapkan beberapa jenis fungsi padanya, untuk memetakan nilainya ke yang berbeda. Proses ini disebut interpolasi.

Tentukan beberapa fungsi interpolasi di bagian atas RatingsCard / index.js. Ini menerapkan kebalikan dari opasitas dan animasi transformasi saat memilih atau membatalkan pilihan.

const inverseOpacity = o => 1 - o; const inverseTransform = t => `$ {t} rotateY (180deg)`;

13. Alihkan status saat mengklik

Pembalikan kartu harus dikaitkan dengan satu klik. Sebagai terpilih nilai status menentukan wajah mana yang terlihat, kita harus mengalihkan status tersebut saat mengklik kartu.

Tambahkan pendengar klik ke luar RatingsCard elemen. Jika ini terjadi, ini akan mengubah nilai Boolean yang ditahan.

animated.div className = "RatingsCard" onClick = {() => setSelected (! selected)}>

14. Sesuaikan fisika flip kartu

Saat ini, animasi kami berfungsi, tetapi tampaknya lebih seperti float daripada flip. Kita dapat mengubah beberapa nilai pada setiap pegas untuk mengubah perilakunya. Di dalam objek penyiapan untuk pegas, buat file config benda untuk mengurangi gesekan dan meningkatkan ketegangan. Ini akan membuat animasi terasa lebih tajam.

useSpring ({config: {friction: 22, tension: 500}, [...]});

15. Buat pegas untuk efek kemiringan

Sementara efek hover bertenaga CSS dari sebelumnya memberikan beberapa umpan balik, kita dapat meningkatkannya lebih jauh dengan memiliki animasi miring yang bereaksi terhadap posisi kursor. Saat memperbarui pegas pada frekuensi tinggi, seperti gerakan mouse, kita bisa mendapatkan kinerja yang lebih baik dengan menggunakan set fungsi yang dikembalikan oleh setiap pegas. Buat pegas baru untuk animasi ini dan pertahankan fungsi yang dikembalikan.

const [alat peraga, set] = useSpring (() => ({status: [0, 0, 1]}));

16. Terapkan gaya miring

React Spring dapat menganimasikan berbagai jenis nilai, termasuk array. Menyimpan nilai kita dalam satu array memungkinkan kita untuk menginterpolasi semuanya ke file mengubah properti dalam satu kali jalan.

Membuat transformCard fungsi interpolasi dan menerapkan gaya ke utama RatingsCard elemen.

const transformCard = (x, y, skala) => `perspektif (1000px) rotateX ($ {x} derajat) rotateY ($ {y} derajat) skala ($ {skala})`; [...] animated.div className = "RatingsCard" onClick = {() => setSelected (! selected)} style = {{transform:! selected && props.state.interpolate (transformCard)}}>

17. Tetapkan nilai pada gerakan mouse

Peristiwa mouse memberikan koordinat kursor pada saat itu. Kami tertarik dengan koordinat klien untuk mendapatkan posisi kursor dalam viewport. Tambahkan gerakan mouse dan tinggalkan peristiwa ke luar div>. Kami meneruskan koordinat ke fungsi saat bergerak dan mengatur ulang ke nilai default saat kursor meninggalkan div>.

onMouseLeave = {() => set ({state: [0, 0, 1]})} onMouseMove = {({clientX: x, clientY: y}) => set ({state: countValues ​​(x, y)} )}

18. Hitung nilai animasi

Kami hanya ingin sedikit kemiringan untuk menghindari kartu bergerak terlalu banyak saat pengguna berinteraksi dengannya. Itu countValues Fungsi ini akan bekerja di sisi layar tempat kursor berada dan memiringkannya ke arah itu.

Buat fungsi untuk mengisi nilai tersebut. Membagi dengan 40 mengurangi efek kemiringan agar lebih bermanfaat. Nilai akhir secara visual akan mengangkat kartu dari layar.

const countValues ​​= (x, y) => [- (y - window.innerHeight / 2) / 40, (x - window.innerWidth / 2) / 40, 1.1];

19. Tampilkan rating bintang

Setiap gambar memiliki peringkat yang perlu kami tampilkan di bintang di bagian belakang kartu. Logika ini diadakan di dalam komponennya sendiri, tetapi itu perlu diterapkan ke bagian belakang terlebih dahulu.

Pertama, buat negara bagian baru untuk menampung peringkat, lalu buat StarRating> komponen di dalam menghadap ke belakang div>.

const [currentRating, setRating] = useState (peringkat); [...] {dipilih && (Peringkat StarRating = {currentRating} setRating = {setRating} />)}

20. Buat animasi bintang

Peringkat bintang akan memudar begitu kartu dibalik. Dengan menggunakan useTrail hook dari React Spring, kita dapat menerapkan pegas ke beberapa komponen, satu demi satu.

Buka StarRating / index.js dan tambahkan pengait. Argumen pertama akan menentukan jumlah pegas yang akan dibuat.

const animatedStars = useTrail (5, {config: {friction: 22, tension: 500}, dari: {opacity: 0, transform: "scale (0.8)"}, opacity: 1, transform: "scale (1)"} );

21. Terapkan bintang ke komponen

Hal terakhir yang perlu kita lakukan adalah menampilkan bintang-bintang itu. Itu animatedStars variabel sekarang berisi larik pegas, yang dapat kita iterasi dan diterapkan ke kartu.

Untuk setiap bintang, tunjukkan AnimatedStar> komponen di dalam utama StarRating div. Sebarkan alat peraga gaya untuk menerapkan semua efek ke setiap komponen. Saat diklik, kirim rating baru ke induknya RatingCard> komponen.

{animatedStars.map ((props, index) => (AnimatedStar active = {index + 1 = rating} onClick = {e => {e.stopPropagation (); setRating (index + 1);}} key = {index} style = {{... props}} />))}

Artikel ini awalnya diterbitkan di majalah desain web kreatifDesainer web.Beli edisi 288 atau langganan.