بیاموزید که چگونه با حداقل تلاش برای کدنویسی، انیمیشن های ساده را به برنامه React خود اضافه کنید.
انیمیشن بخش مهمی از تقریباً هر برنامه وب مدرن است. همچنین یکی از سخت ترین قسمت ها برای درست کردن است.
Framer Motion کتابخانه ای است که برای React ساخته شده است که انیمیشن سازی اجزا را آسان می کند.
نحوه عملکرد Framer Motion
Framer Motion از مولفه حرکت برای انیمیشن ها استفاده می کند. هر عنصر HTML/SVG دارای یک مؤلفه حرکتی معادل است که دارای لوازم حرکتی و انیمیشن است. به عنوان مثال، یک div معمولی HTML به شکل زیر است:
<div> </div>
در حالی که معادل Framer Motion به شکل زیر است:
<motion.div> </motion.div>
مؤلفه‌های حرکت از یک پایه متحرک پشتیبانی می‌کنند که وقتی مقادیر آن تغییر می‌کند انیمیشن‌ها را فعال می‌کند. برای انیمیشن‌های پیچیده، از قلاب useAnimate با یک مرجع دامنه استفاده کنید.
انیمیشن در Framer Motion
قبل از استفاده از Framer Motion در پروژه خود، باید Runtime Node.js و مدیریت بسته Yarn را روی رایانه خود نصب کرده باشید و بدانید React چیست و چگونه از آن استفاده کنید.
می توانید کد منبع این پروژه را از آن مشاهده و دانلود کنید
مخزن GitHub
. استفاده کنید
فایل های شروع
شاخه به عنوان یک الگوی شروع به همراه این آموزش، یا
فایل های نهایی
شعبه برای نسخه ی نمایشی کامل. شما همچنین می توانید پروژه را در عمل از این طریق مشاهده کنید
نسخه ی نمایشی زنده
.
ترمینال خود را باز کنید و اجرا کنید:
git clone git@github.com:makeuseofcode/framer-motion-app.git
cd framer-motion-app
yarn
yarn dev
وقتی localhost:5173 را در مرورگر خود باز می کنید، این را خواهید دید:
اکنون می توانید اولین انیمیشن ساده خود را ایجاد کنید، دکمه ای که در حالت شناور رشد می کند و با خروج مکان نما کوچک می شود.
فایل src/App.jsx را در یک ویرایشگر کد باز کنید. این فایل حاوی یک جزء تابعی است که یک قطعه React را برمی گرداند. کامپوننت Button را وارد کنید، سپس آن را رندر کنید و در یک صفحه متنی ارسال کنید:
<section>
<h4>Animated Button</h4>
<div>Move your mouse over the button to see the effect</div>
<Button text="Hover Me"/>
</section>
سپس فایل Button.jsx را ویرایش کنید و ابزار حرکت را از framer-motion وارد کنید:
import { motion } from "framer-motion"
اکنون، عنصر دکمه معمولی را با مولفه motion.[element] جایگزین کنید. در این حالت از مولفه motion.button استفاده کنید.
سپس یک ژست نگهدارنده whileHover اضافه کنید و یک شی از مقادیری را که Framer Motion باید به آن متحرک کند، هنگامی که کاربر روی دکمه قرار می‌گیرد، ارسال کنید.
<motion.button whileHover={{ scale: 1.1 }}>
{text}
</motion.button>
اکنون زمانی که نشانگر ماوس خود را روی آن یا خارج از آن حرکت دهید، دکمه متحرک می شود:
شاید تعجب کنید که چرا این نسخه آزمایشی از انیمیشن‌های CSS استفاده نمی‌کند. Framer Motion نسبت به CSS مزیت هایی دارد زیرا با React حالت ادغام می شود و به طور کلی منجر به کدهای تمیزتر می شود.
بعد، چیز پیچیده‌تری را امتحان کنید: متحرک سازی یک مودال. در Backdrop.jsx، ابزار حرکت را وارد کنید و یک مؤلفه کاربردی با onClick و لوازم کودک ایجاد کنید. یک مؤلفه motion.div را با کلاس «پس زمینه» و شنونده onClick در JSX برگردانید.
export default function Backdrop() {
return (<>
<motion.div>
</motion.div>
</>)
}
سپس سه پایه به نام های اولیه، متحرک و خروج اضافه کنید. این برجستگی ها به ترتیب نشان دهنده وضعیت اصلی مولفه، حالتی است که مولفه باید به آن متحرک شود و حالتی که جزء باید بعد از انیمیشن باشد.
لوازم onClick و Children را به motion.div اضافه کنید و مدت زمان انتقال را روی 0.34 ثانیه تنظیم کنید:
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>
</>)
}
مولفه Backdrop پوششی برای مولفه Modal است. کلیک کردن روی پس‌زمینه، مودال را رد می‌کند. در Modal.jsx، حرکت و مولفه Backdrop را وارد کنید. مؤلفه عملکردی پیش‌فرض موارد زیر را می‌پذیرد: closeModal و text. یک متغیر متغیر به عنوان یک شی ایجاد کنید.
const variants = {
initial: {
y: "-200%",
opacity: 1,
},
visible: {
y: "50%",
transition: {
duration: 0.1,
type: "spring",
damping: 32,
stiffness: 500
}
},
exit: {
y: "200%",
}
}
یک مؤلفه motion.div را که توسط یک مؤلفه Backdrop پیچیده شده است، با یک پایه «Variants» که به شی variants اشاره می کند، برگردانید. واریانت ها مجموعه ای از حالت های انیمیشن از پیش تعریف شده هستند که مولفه می تواند در آن باشد.
<Backdrop onClick={closeModal}>
<motion.div
onClick={(e) => e.stopPropagation()}
className="modal"
variants={variants}
initial='initial'
animate='visible'
exit='exit'
>
{text}
</motion.div>
</Backdrop>
در مرحله بعد، باید عملکردی را اضافه کنید تا زمانی که کاربر روی دکمه کلیک می‌کند، مدال نمایش داده شود. فایل App.jsx را باز کنید و قلاب useState React و جزء Modal را وارد کنید.
import { useState } from "react";
import Modal from "./components/Modal";
سپس یک حالت modalOpen با مقدار پیش فرض false ایجاد کنید.
const [modalOpen, setModalOpen] = useState(false);
سپس یک تابع closeModal تعریف کنید که modalOpen را روی false قرار می دهد.
function closeModal() {
setModalOpen(false)
}
در بالای قطعه React، یک جزء Modal را به صورت مشروط رندر کنید و متن مناسب را با prop closeModal ارسال کنید.
{modalOpen && <Modal text="This is a modal animated with Framer Motion"}
سپس، در عنصر بخش دوم، یک عنصر دکمه را با یک کنترل کننده رویداد onClick که modalOpen را روی false تنظیم می کند، رندر کنید.
<button onClick={() => setModalOpen(true)}>Show Modal</button>
ممکن است متوجه شوید که React مؤلفه Modal را از DOM بدون انیمیشن خروجی جدا می کند. برای رفع آن، به یک جزء AnimatePresence نیاز دارید. وارد کردن AnimatePresence از framer-motion.
import {AnimatePresence} from 'framer-motion';
حالا مولفه Modal را در کامپوننت AnimatePresence بپیچید و پایه اولیه را روی false و حالت را روی “wait” قرار دهید.
<AnimatePresence initial={false} mode="wait">
{modalOpen && <Modal text="This is a modal animated with Framer Motion" closeModal={closeModal} />}
</AnimatePresence>
مؤلفه AnimatePresence به انیمیشن‌های خروجی اجازه می‌دهد قبل از اینکه React آن را از DOM خارج کند، کامل شوند.
متحرک سازی اجزا در اسکرول در Framer
Framer Motion می‌تواند با استفاده از پایه whileInView، اجزای اسکرول را متحرک کند. ScrollElement.jsx را باز کنید و ابزار حرکت را وارد کنید. div را با کلاس “scroll-element” به motion.div تغییر دهید.
<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>
قسمت viewport به یک شی اشاره می کند که یک بار روی true تنظیم می شود. سپس، در فایل App.jsx، مولفه ScrollElement را وارد کرده و یک متغیر scrollElementCount تعریف کنید که دارای یک مقدار صحیح است.
let scrollElementCount=14;
در آخرین عنصر بخش، یک آرایه با طول مشخصی که توسط scrollElementCount تعریف شده است ایجاد کنید که روی هر عنصر آرایه نقشه می‌کشد و یک جزء با یک کلید منحصر به فرد بر اساس شاخص i ایجاد می‌کند.
{[...Array(scrollElementCount)].map((x, i) => <ScrollElement key={i} />)}
اکنون، با بازگشت به مرورگر، عناصر باید زمانی که آنها را برای مشاهده اسکرول می کنید، متحرک شوند.
جایگزین های Framer Motion
Framer Motion تنها کتابخانه انیمیشن موجود در بازار نیست. اگر روشی را که Framer Motion انجام می دهد دوست ندارید، می توانید کتابخانه های دیگری مانند React Spring را امتحان کنید.
همچنین می‌توانید از انیمیشن‌های CSS استفاده کنید، که تمام مرورگرهای مدرن به صورت بومی از آنها پشتیبانی می‌کنند، اما یادگیری و راه‌اندازی تکنیک‌های مربوطه می‌تواند دشوار باشد.
بهبود تجربه کاربری با انیمیشن ها
هر کاربر در هنگام استفاده از یک برنامه وب، انتظار تجربه ای روان را دارد. یک وب سایت یا برنامه بدون انیمیشن احساس می شود ایستا و پاسخگو نیست. انیمیشن‌ها تجربه کاربر را بهبود می‌بخشند زیرا می‌توانید از آنها برای ارسال بازخورد به کاربر هنگام انجام یک عمل خاص استفاده کنید.