Cara Menambahkan Animasi ke Aplikasi React Anda Dengan Framer Motion
Table of content:
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:
Baca Juga:
<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 runtime Node.js dan manajer paket Yarn yang diinstal di komputer Anda dan memahami apa itu React dan bagaimana cara 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 git@github.com:makeuseofcode/framer-motion-app.git
cd framer-motion-app
yarn
yarn dev
Ketika Anda membuka localhost: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:
<section>
<h4>Animated Button</h4>
<div>Move your mouse over the button to see the effect</div>
<Button text="Hover Me"/>
</section>
Selanjutnya, edit file Button.jsx file dan impor gerakan utilitas dari framer-motion:
import { motion } from "framer-motion"
Sekarang, ganti yang biasa tombol elemen dengan gerakan.[element] 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.
<motion.button whileHover={{ scale: 1.1 }}>{text}
</motion.button>
Tombol sekarang akan bernyawa ketika Anda menggerakkan penunjuk tetikus ke atasnya atau keluar darinya:
Anda mungkin bertanya-tanya mengapa demo ini tidak menggunakan CSS Animations. 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.jsximpor 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.
export default function Backdrop() {
return (<>
<motion.div>
</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:
export default function Backdrop ({onClick, children}){
return (<>
<motion.div
onClick={onClick}
className="backdrop"
initial={{ opacity: 0, backdropFilter:"blur(0px)" }}
animate={{ opacity: 1, backdropFilter:"blur(3.4px)" }}
exit={{ opacity: 0, backdropFilter:"blur(0px)"}}
transition={{
duration: 0.34,
}}
>
{children}
</motion.div>
</>)
}
Itu Latar belakang komponen adalah pembungkus untuk Modal komponen. Mengklik latar belakang menutup modal. Di dalam Modal.jsximpor gerakan dan komponen Latar Belakang. Komponen fungsional default menerima alat peraga: closeModal Dan teks. Buat variabel varian sebagai objek.
const variants = {
initial: {
y: "-200%",
opacity: 1,
},
visible: {
y: "50%",
transition: {
duration: 0.1,
type: "spring",
damping: 32,
stiffness: 500
}
},
exit: {
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.
<Backdrop onClick={closeModal}>
<motion.div
onClick={(e) => e.stopPropagation()}
className="modal"
variants={variants}
initial='initial'
animate='visible'
exit='exit'
>
{text}
</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.
import { useState } from "react";
import Modal from "./components/Modal";
Kemudian buat a modalOpen negara dengan nilai default diatur ke PALSU.
const [modalOpen, setModalOpen] = useState(false);
Selanjutnya, tentukan fungsi closeModal yang mengatur modalOpen untuk palsu.
function closeModal() {
setModalOpen(false)
}
Di bagian atas fragmen React, render secara kondisional a Modal komponen dan lulus sesuai teks prop dengan prop closeModal.
{modalOpen && <Modal text="This is a modal animated with Framer Motion"}
Lalu, di urutan kedua bagian elemen, render a tombol elemen dengan event handler onClick yang menyetel modalOpen ke false.
<button onClick={() => setModalOpen(true)}>Show Modal</button>
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.
import {AnimatePresence} from 'framer-motion';
Sekarang, bungkus komponen Modal di komponen AnimatePresence dan atur awal prop ke false dan mode menunggu”.
<AnimatePresence initial={false} mode="wait">
{modalOpen && <Modal text="This is a modal animated with 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.jsxdan impor gerakan kegunaan. Mengubah div ke motion.div dengan kelas “elemen gulir”.
<motion.div
initial={{ opacity: 0, scale: 0, rotate: 14 }}
whileInView={{ opacity: 1, scale: 1, rotate: 0 }}
transition={{ duration: .8 }}
viewport={{ once: true }}
className='scroll-element'
>
Scroll Element
</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.
let 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, i) => <ScrollElement key={i} />)}
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.
Artikel Terkait
