Pelajari cara menambahkan animasi sederhana ke aplikasi React Anda dengan sedikit usaha coding.
Animasi adalah bagian penting dari hampir setiap aplikasi web modern. Ini juga salah satu bagian yang paling sulit untuk dilakukan dengan benar.
Framer Motion adalah pustaka yang dibangun untuk React yang memudahkan menganimasikan komponen.
Cara Kerja Framer Motion
Framer Motion menggunakan komponen gerak untuk animasi. Setiap elemen HTML/SVG memiliki komponen gerakan setara yang memiliki alat peraga untuk isyarat dan animasi. Misalnya, div HTML biasa terlihat seperti ini:
<div>div>
Sedangkan padanan Framer Motion terlihat seperti ini:
<motion.div>motion.div>
Komponen gerak mendukung sebuah menghidupkan prop yang memicu animasi saat nilainya berubah. Untuk animasi yang kompleks, gunakan the useAnimate kaitkan dengan ref yang tercakup.
Animasi dalam Framer Motion
Sebelum menggunakan Framer Motion di proyek Anda, Anda harus memiliki waktu proses Node.js dan pengelola paket Yarn diinstal di komputer Anda dan memahami apa itu React dan bagaimana menggunakannya.
Anda dapat melihat dan mengunduh kode sumber proyek ini dari Repositori GitHub. Menggunakan starter-files branch sebagai template awal untuk mengikuti tutorial ini, atau final-files cabang untuk demo lengkap. Anda juga dapat melihat proyek beraksi melalui ini demo langsung.
Buka terminal Anda dan jalankan:
git clone [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-app
benang
dev benang
Ketika Anda membuka host lokal: 5173 di browser Anda, Anda akan melihat ini:
Anda sekarang dapat membuat animasi sederhana pertama Anda, tombol yang tumbuh saat melayang dan menyusut saat kursor pergi.
Buka src/App.jsx file dalam editor kode. File ini berisi komponen fungsional yang mengembalikan fragmen React. Impor Tombol komponen, lalu render, meneruskan a teks menopang:
Tombol Animasi</h4>
Gerakkan mouse Anda ke atas tombol untuk melihat efeknya</div>
Selanjutnya, edit file Button.jsx file dan impor gerakan utilitas dari framer-motion:
impor { gerak } dari"gerakan-pembingkai"
Sekarang, ganti yang biasa tombol elemen dengan gerak.[elemen] komponen. Dalam hal ini, gunakan motion.button komponen.
Kemudian tambahkan a whileHover gesture prop dan teruskan objek nilai yang harus dianimasikan oleh Framer Motion saat pengguna mengarahkan kursor ke tombol.
skala: 1.1 }}> {teks}
</motion.button>
Tombol sekarang akan bernyawa ketika Anda menggerakkan penunjuk tetikus ke atasnya atau keluar darinya:
Anda mungkin bertanya-tanya mengapa demo ini tidak digunakan Animasi CSS alih-alih. Framer Motion memiliki keunggulan dibandingkan CSS karena terintegrasi dengan status React dan umumnya menghasilkan kode yang lebih bersih.
Selanjutnya, coba sesuatu yang lebih kompleks: menganimasikan modal. Di dalam Backdrop.jsx, impor utilitas gerak dan buat komponen fungsional dengan onClick Dan anak-anak Atribut. Kembalikan a motion.div komponen dengan kelas "latar belakang" dan onClick pendengar di BEJ.
eksporbawaanfungsiLatar belakang() {
kembali (<>
</motion.div>
</>)
}
Kemudian tambahkan tiga alat peraga yaitu: awal, menghidupkan, Dan KELUAR. Props ini merepresentasikan status asli komponen, status komponen harus dianimasikan, dan status komponen harus setelah animasi.
Menambahkan onClick Dan anak-anak alat peraga ke motion.div dan atur durasi transisi menjadi 0,34 detik:
eksporbawaanfungsiLatar belakang ({onClick, anak-anak}){
kembali (<>
onClick={onClick}
NamaKelas="latar belakang"
awal={{ kegelapan: 0, backdropFilter:"buram (0px)" }}
animasi={{ kegelapan: 1, backdropFilter:"buram (3,4px)" }}
keluar={{ kegelapan: 0, backdropFilter:"buram (0px)"}}
transisi={{
durasi: 0.34,
}}
>
{anak-anak}
</motion.div>
</>)
}
Itu Latar belakang komponen adalah pembungkus untuk Modal komponen. Mengklik latar belakang menutup modal. Di dalam Modal.jsx, impor gerakan dan komponen Latar Belakang. Komponen fungsional default menerima alat peraga: closeModal Dan teks. Buat variabel varian sebagai objek.
const varian = {
awal: {
y: "-200%",
kegelapan: 1,
},
bisa dilihat: {
y: "50%",
transisi: {
durasi: 0.1,
jenis: "musim semi",
pembasahan: 32,
kekakuan: 500
}
},
KELUAR: {
y: "200%",
}
}
Mengembalikan komponen motion.div yang dibungkus oleh komponen Backdrop dengan prop "varian" yang menunjuk ke objek varian. Varian adalah sekumpulan status animasi yang telah ditentukan di mana komponen dapat berada.
onClick={(e) => e.stopPropagation()}
NamaKelas="modal"
varian={varian}
awal='awal'
menghidupkan='bisa dilihat'
keluar='KELUAR'
>
{teks}
</motion.div>
</Backdrop>
Selanjutnya, Anda perlu menambahkan fungsionalitas untuk menampilkan modal saat pengguna mengklik tombol. Buka Aplikasi.jsx file dan impor useState Bereaksi hook dan Modal komponen.
impor { status penggunaan } dari"reaksi";
impor Modal dari"./komponen/Modal";
Kemudian buat a modalOpen negara dengan nilai default diatur ke PALSU.
const [modalOpen, setModalOpen] = useState(PALSU);
Selanjutnya, tentukan fungsi closeModal yang mengatur modalOpen untuk palsu.
fungsicloseModal() {
setModalBuka(PALSU)
}
Di bagian atas fragmen React, render secara kondisional a Modal komponen dan lulus sesuai teks prop dengan prop closeModal.
{modalBuka && <Modalteks="Ini adalah modal animasi dengan Framer Motion"}
Lalu, di urutan kedua bagian elemen, render a tombol elemen dengan event handler onClick yang menyetel modalOpen ke false.
Anda mungkin memperhatikan bahwa React melepas komponen Modal dari DOM tanpa animasi keluar. Untuk memperbaikinya, Anda memerlukan sebuah AnimatePresence komponen. Impor AnimatePresence dari framer-motion.
impor {AnimatePresence} dari'gerakan-pembingkai';
Sekarang, bungkus komponen Modal di komponen AnimatePresence dan atur awal prop ke false dan mode menunggu".
PALSU} modus="Tunggu">
{modalBuka && <Modalteks="Ini adalah modal animasi dengan Framer Motion"closeModal={closeModal} />}
</AnimatePresence> Komponen AnimatePresence memungkinkan animasi keluar selesai sebelum React melepasnya dari DOM.
Framer Motion dapat menganimasikan komponen pada scroll menggunakan whileInView menopang. Buka ScrollElement.jsx, dan impor gerakan kegunaan. Mengubah div ke motion.div dengan kelas "elemen gulir".
awal={{ kegelapan: 0, skala: 0, memutar: 14 }}
whileInView={{ kegelapan: 1, skala: 1, memutar: 0 }}
transisi={{ durasi: .8 }}
area pandang={{ sekali: BENAR }}
NamaKelas='elemen gulir'
>
Elemen Gulir
</motion.div>
Itu area pandang prop menunjuk ke objek yang ditetapkan sekali ke BENAR. Selanjutnya, di Aplikasi.jsx file, impor ScrollElement komponen dan tentukan variabel scrollElementCount yang menyimpan nilai integer.
membiarkan scrollElementCount=14;
Terakhir bagian elemen, buat array dengan panjang tertentu yang ditentukan oleh scrollElementCount yang memetakan setiap elemen array dan menghasilkan komponen dengan kunci unik berdasarkan indeks Saya.
{[...Array (scrollElementCount)].map((x, saya) =><ScrollElementkunci={Saya} />)}
Sekarang, kembali ke browser, elemen harus dianimasikan saat Anda menggulirnya ke tampilan.
Alternatif untuk Framer Motion
Framer Motion bukan satu-satunya library animasi yang ada di pasaran. Jika Anda tidak menyukai cara Framer Motion melakukan sesuatu, Anda dapat mencoba pustaka lain seperti Bereaksi Musim Semi.
Anda juga dapat menggunakan animasi CSS, yang didukung oleh semua browser modern secara asli, tetapi teknik yang terlibat bisa rumit untuk dipelajari dan disiapkan.
Meningkatkan Pengalaman Pengguna Dengan Animasi
Setiap pengguna mengharapkan pengalaman yang mulus seperti mentega saat menggunakan aplikasi web. Website atau aplikasi tanpa animasi terasa statis dan tidak responsif. Animasi meningkatkan pengalaman pengguna karena Anda dapat menggunakannya untuk mengomunikasikan umpan balik kepada pengguna saat mereka melakukan tindakan tertentu.