Cara menggunakan REECT Spring ke Menghidupkan Komponen

REECT Spring dapat membantu Anda dengan animasi, yang terkenal rumit untuk diterapkan di web. Animasi css. adalah pilihan terbaik, tetapi menciptakan hasil yang lancar, membutuhkan juggling kelas, durasi, dan acara yang cermat. Melempar a. Kerangka Javascript. Seperti bereaksi ke dalam campuran hanya memperumit hal-hal lebih lanjut.

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

Bereaksi musim semi. adalah perpustakaan yang dibangun untuk berurusan dengan banyak hang-up umum ketika datang ke animasi di web. Dibutuhkan pendekatan yang sedikit berbeda, dengan berfokus pada fisika selama durasi lurus dan fungsi pelonggaran yang ditentukan. Ini membantu menjaga hal-hal tetap lancar dan alami.

Sementara sebagian besar waktu ini digunakan untuk efek visual, perpustakaan akan transisi antara dua nilai terlepas dari apakah nilai itu pernah digunakan untuk gaya atau tidak. Misalnya, dapat digunakan untuk menghitung sejumlah pendaftaran untuk menekankan seberapa besar komunitas.

Dalam tutorial ini, kami akan membuat komponen kartu yang memungkinkan pengguna untuk menilai gambar. Kartu membalik untuk mengungkapkan peringkat bintang dan pengguna dapat mengklik untuk menambahkan sendiri. Kami akan menggunakan implementasi kait baru Springs React, yang memerlukan React Versi 16.8 atau lebih tinggi. Sebelum kamu memulai, Unduh file tutorial di sini (dan mendukung mereka penyimpanan awan ).

Jika Anda ingin membangun situs tanpa proses kode yang kompleks, gunakan yang layak Pembangun Situs Web . Dan pastikan untuk menjelajahi hosting web. Pilihan juga.

01. Instal Ketergantungan

Dengan file yang diunduh, dependensi paket perlu diinstal sebelum kita dapat mulai. Proyek berbasis aplikasi reaksi ini termasuk React-Spring. Paket dan semua server lokal yang diperlukan mengatur untuk memulai.

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

 & gt; benang
& gt; Benang mulai 

02. Hasilkan gambar di negara bagian

Pertama, kami membutuhkan beberapa gambar untuk menilai. Untuk tutorial ini, kita akan menggunakan kode hard-code ke dalam keadaan aplikasi, tetapi data ini dapat berasal dari sumber apa pun. Buka app.js dan buat beberapa gambar dengan Usestate. kait dari reaksi. Ini akan memberi setiap gambar peringkat awal yang dapat kami tampilkan dan diperbarui nanti.

 Const [Kartu] = Usestate ([
CreateImage (image1),
createImage (image2),
CreateImage (image3)
]); 

03. Tampilkan setiap kartu gambar

Saat gambar disimpan dalam array, kami dapat mengulang dari keadaan itu dan membuat komponen terpisah untuk masing-masing. Logika animasi untuk REECT Spring akan hidup di dalam a & lt; ratingscard / & gt; komponen yang dapat kita gunakan di mana saja kita perlu.

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

 {cards.map ((kartu, index) = & gt; (
& lt; ratingscard Key = {index} {... kartu} / & gt;
))} 

04. Tambahkan struktur kartu

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

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

 & lt; div classname = "ratingscard" & gt;
& lt; div
classname = "ratingscard__front"
gaya = {{
latar belakang: `url ($ {gambar})`
}}
/ & gt;
& lt; div classname = "ratingscard__back" / & gt;
& lt; / div & gt; 

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 ketika dilaksanakan. Dalam Ratingscard / style.css. , tambahkan beberapa gaya ekstra untuk membuat kartu melompat dari halaman di arahkan 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. Setel bayangan secara default

Bayangan yang tiba-tiba di hover adalah pengalaman menggelegar. Karena itu kita harus perlahan-lahan beralih di antara negara-negara untuk menjaga segalanya menjadi halus. Tambahkan shadow dropler untuk kartu ketika tidak dilaksanakan. Menggunakan transisi properti untuk menghidupkan antara kedua negara.

 .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

Kita perlu menyimpan dan memperbarui informasi tentang sisi kartu mana yang menghadap ke atas. Kita dapat menggunakan React's built-in Usestate. Hook untuk menentukan nilai awal dan ia mengembalikan nilai saat ini dan metode untuk memperbaruinya.

Di awal Ratingscard. fungsi komponen, buat tentukan ini terpilih negara.

 Const [dipilih, siap]
 = Usestate (Salah); 

08. Tentukan animasi flip

REECT Spring bertanggung jawab atas transisi angka antara satu nilai dan lainnya. Ini dapat dilakukan dengan pegas dan userspring. menghubungkan. Kami menyediakan beberapa informasi pengaturan, dan mengembalikan satu set nilai yang diperbarui sesuai dengan perhitungan fisikanya.

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}
 = usingpring ({
Opacity: Dipilih? 1: 0,
Transformasi: `Rotatey (
$ {dipilih? 180: 0} DEG) `
}); 

09. Konversi ke wadah animasi

Objek dikembalikan oleh userspring. Tentukan animasi mereka, tetapi jangan memberikan nilai numerik yang kita butuhkan. Itu animasi. Fungsi pabrik mencerna informasi ini dan kemudian memasok nilai-nilai sebagai angka ke komponen.

Konversi Ratingscard. elemen untuk menggunakan Animasi. fungsi. Itu animasi.div. Sintaks menceritakan fungsi untuk mengembalikan a & lt; div & gt; .

 & lt; animated.div classname = "ratingscard" & gt;
& lt; animated.div
classname = "ratingscard__front"
gaya = {{
latar belakang: `url ($ {gambar})`
}}
/ & gt;
& lt; animated.div classname =
"RatingsCard__back" / & gt;
& lt; /animated.div> 

10. Animasi kartu depan

REECT Spring hanya menjiwai nilai-nilai dan tidak melakukan animasi elemen itu sendiri. Kami dapat menautkan nilai-nilai itu ke prop gaya dan membuat animasi itu dengan cepat. Perbarui kartu depan untuk memanfaatkan yang baru kegelapan dan mengubah nilai. Dalam hal ini, kita perlu menginterpolasi nilai opacity, yang akan kita tangani segera.

 & lt; animated.div
classname = "ratingscard__front"
gaya = {{
latar belakang: `url ($ {gambar})`,
opacity: opacity.interpolate (
terbalik),
mengubah
}}
/ & gt; 

11. Animasi kartu belakang

Saat membalik kartu, animasi apa pun yang kita lamar untuk satu wajah perlu diterapkan secara terbalik ke yang lain. Ketika dimainkan bersama, mereka akan terlihat seperti mereka bergerak sebagai sepotong.

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

 & lt; animated.div
classname = "ratingscard__back"
gaya = {{
kegelapan,
Transformasi: Transformasi.
.interpolate (inversetransform)
}}
/ & gt; 

12. Interpolasi Nilai

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

Mendefinisikan beberapa fungsi interpolasi ke arah atas Ratingscard / index.js. . Ini menerapkan kebalikan dari opacity dan mengubah animasi saat memilih atau membatalkan pilihan.

const inversopacity = o = & gt; 1 - o;
const inversetransform = t = & gt;
 `$ {t} rotatey (180deg)`; 

13. Toggle State pada Klik

Balik kartu harus diikat ke klik. Sebagai terpilih Nilai negara menentukan wajah mana yang terlihat, kita harus beralih menyatakan bahwa ketika mengklik kartu.

Tambahkan pendengar klik ke luar Ratingscard. elemen. Ketika ini terjadi, itu akan beralih nilai Boolean yang diadakan di negara bagian.

 & lt; animated.div
classname = "ratingscard"
onclick = {() = & gt;
siap (! dipilih)}
& gt; 

14. Sesuaikan Fisika Balik Kartu

Saat ini, animasi kami bekerja, tetapi tampaknya lebih dari float daripada flip. Kita dapat mengubah beberapa nilai pada setiap musim semi untuk mengubah cara perilakunya. Di dalam objek pengaturan untuk musim semi, buat a CONFIG. objek untuk mengurangi gesekan dan meningkatkan ketegangan. Ini akan memberi animasi nuansa Snappier.

 userspring ({
CONFIG: {
Gesekan: 22,
Ketegangan: 500.
},
[...]
}); 

15. Buat pegas untuk efek tilt

Sedangkan efek hover yang ditenagai CSS dari sebelumnya memberikan umpan balik, kita dapat meningkatkannya lebih lanjut dengan memiliki animasi memiringkan 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 musim semi. Buat pegas baru untuk animasi ini dan tahan fungsi yang dikembalikan.

 const [alat peraga, set] = userspring (() = & gt; ({
Negara: [0, 0, 1]
}
)); 

16. Terapkan Gaya Tilt

REECT Spring dapat menghidupkan berbagai jenis nilai, yang mencakup array. Menyimpan nilai-nilai kami dalam satu array memungkinkan kami untuk menginterpolasi semuanya ke mengubah properti dalam satu lintasan.

Membuat TransformCard. fungsi interpolasi dan menerapkan gaya ke utama Ratingscard. elemen.

 Constr TransformCard = (x, y, skala) = & gt;
 `Perspektif (1000px) RotateX ($ {x} deg)
Rotatey ($ {y} deg) skala ($ {skala}) `;
[...]
& lt; animated.div
 classname = "ratingscard"
 onclick = {() = & gt; siap (! dipilih)}
 style = {{transform :! terpilih & amp; & amp;
alat peraga.state.interpolate (
TransformCard)}} & gt; 

17. Atur nilai pada gerakan mouse

Acara mouse menyediakan koordinat kursor pada waktu itu. Kami tertarik pada koordinat klien untuk mendapatkan posisi kursor dalam viewport. Tambahkan mouse bergerak dan tinggalkan acara ke luar & lt; div & gt; . Kami meneruskan koordinat ke fungsi saat bergerak dan mengatur ulang ke nilai default ketika kursor meninggalkan & lt; div & gt; .

 onmouseleave = {() = & gt; set({
 Negara: [0, 0, 1]})}
onmousemove = {({clientx: x,
 Clienty: Y}) = & gt; set({
 Negara: Hitung nilai (x, y)})
} 

18. Hitung Nilai Animasi

Kami hanya ingin kemiringan kecil untuk menghindari kartu bergerak terlalu banyak ketika pengguna berinteraksi dengannya. Itu HitungValues. Fungsi akan bekerja di sisi layar kursor menyala dan memiringkannya ke arah itu.

Buat fungsi untuk mengisi nilai-nilai itu. Membagi dengan 40 mengurangi efek tilt untuk membuatnya lebih bermanfaat. Nilai akhir secara visual akan menaikkan kartu dari layar.

 const calculateValues ​​= (x, y) = & gt; [
- (y - window.innerheight / 2) / 40,
(x - window.innerwidth / 2) / 40,
1.1]; 

19. Tampilkan Peringkat Bintang

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

Pertama, buat negara baru untuk memegang peringkat, lalu buat & lt; starrating & gt; komponen di dalam kembali menghadap & lt; div & gt; .

 Const [currentrating, setrating]
 = Usestate (peringkat);
[...]
{terpilih & amp; & amp; (
 & lt; rating starrating = {currentrating}
setrating = {setrating} / & gt;
)} 

20. Buat Animasi Bintang

Peringkat bintang akan memudar setelah kartu terbalik. Dengan menggunakan usetrail. Hook dari Spring React, kita dapat menerapkan mata air ke beberapa komponen, satu demi satu.

Buka Starrating / index.js. dan tambahkan kait. Argumen pertama akan menentukan jumlah pegas untuk dibuat.

 Const Animatedstars = usetrail (5, {
CONFIG: {
Gesekan: 22,
Ketegangan: 500.
},
dari: {opacity: 0,
mengubah: "skala (0,8)"},
Opacity: 1,
Transformasi: "Skala (1)"
}); 

21. Oleskan Bintang ke Komponen

Hal terakhir yang perlu kita lakukan sebenarnya menampilkan bintang-bintang itu. Itu Animatedstars. Variabel sekarang berisi array pegas, yang dapat kita beredot dan terapkan pada kartu.

Untuk setiap bintang, tunjukkan & lt; animatedstar & gt; komponen di dalam utama Starrating. div. Sebarkan alat peraga gaya untuk menerapkan semua efek ke setiap komponen. Saat diklik, kirim peringkat baru ke induk & lt; ratingcard & gt; komponen.

 {animatedstars.map ((alat peraga, indeks) = & gt; (
& lt; animatedstar
aktif = {index + 1 & lt; = rating}
onclick = {e = & gt; {
E.StopPropagation ();
mengatur (indeks + 1);
}}
Kunci = {index}
gaya = {{... alat peraga}}
/ & gt;
))} 

Artikel ini awalnya diterbitkan di Majalah Desain Web Kreatif Desainer web . Beli Masalah 288. atau langganan .

Baca lebih lajut:

• Mengembangkan komponen reaksi yang dapat digunakan kembali
• Laptop terbaik untuk pemrograman pada tahun 2019
• 35 alat desain web untuk membantu Anda bekerja lebih pintar