کتابخانه Framer Motion مجموعه کاملی از قابلیت های انیمیشن را به برنامه های React شما می آورد.
متحرک سازی کامپوننت React در هنگام ورود یا خروج از صفحه می تواند چالش برانگیز باشد. این به این دلیل است که وقتی یک کامپوننت را مخفی می‌کنید، React آن را از DOM حذف می‌کند که باعث می‌شود برای انیمیشن در دسترس نباشد. وقتی کامپوننت را دوباره نشان می‌دهید، React آن را دوباره به DOM اضافه می‌کند که ممکن است منجر به ظاهر ناگهانی و بدون انیمیشن شود.
شما می توانید این مشکل را با یک کتابخانه انیمیشن مانند Framer Motion حل کنید.
Framer Motion چیست؟
Framer Motion یک کتابخانه انیمیشن آماده تولید برای React است. طیف وسیعی از مولفه ها، قلاب ها، فریم های کلیدی، و توابع کاهش سفارشی را برای ایجاد و کنترل انیمیشن ها فراهم می کند.
یکی از مزایای Framer Motion این است که ایجاد انیمیشن های روان و روان را بدون نیاز به نوشتن کدهای جاوا اسکریپت زیاد یا محاسبه محاسبات برای هر انتقال آسان می کند.
همچنین دارای یک سیستم رویداد است که می‌توانید از آن برای راه‌اندازی انیمیشن‌ها بر اساس ورودی‌های کاربر مانند کلیک‌های دکمه‌ها و ژست‌ها، ایجاد رابط‌های تعاملی و پویا استفاده کنید که پاسخگو هستند.
برای نشان دادن نحوه استفاده از Framer Motion در React، کامپوننتی را متحرک می‌کنید که با کلیک روی یک دکمه وارد صفحه می‌شود و از آن خارج می‌شود.
ایجاد یک پروژه React
برای ایجاد یک پروژه React، باید Node.js و npm (Node Package Manager) را روی دستگاه خود نصب کنید، اگر این کار را نکرده اید.
هنگامی که این وابستگی ها را نصب کردید، می توانید با اجرای دستور yarn vite در ترمینال خود یک پروژه React جدید با استفاده از Vite ایجاد کنید.
yarn vite
این دستور یک پوشه جدید با تمام فایل های لازم و وابستگی های از پیش نصب شده ایجاد می کند. به پوشه بروید و سرور توسعه را با دستور yarn start راه اندازی کنید.
yarn start
نصب Framer Motion در React
با اجرای این دستور Framer Motion را نصب کنید:
npm install framer-motion
این دستور Framer Motion را به عنوان یک وابستگی به پروژه شما اضافه می کند.
متحرک سازی یک جزء
برای متحرک سازی یک کامپوننت هنگام ورود و خروج از صفحه نمایش در React با استفاده از Framer Motion، باید آن را در مولفه حرکت بپیچید.
مؤلفه حرکت مجموعه ای از ویژگی ها را برای متحرک سازی ورودی و خروجی مؤلفه ارائه می دهد. می توانید از پایه های اولیه، متحرک و خروجی برای کنترل دید و موقعیت آن استفاده کنید.
برای مشاهده آن در عمل، کد زیر را در بالای App.jsx اضافه کنید تا مولفه حرکت را از framer-motion وارد کنید.
import { motion } from "framer-motion";
سپس، مؤلفه‌ای را که می‌خواهید متحرک کنید، آن را با مولفه حرکتی بپیچید. این مثال از یک عنصر div استفاده می کند اما می توانید از هر عنصر دیگری مانند دکمه، li و p در میان سایر موارد استفاده کنید.
import { motion, AnimatePresence } from "framer-motion"
function App() {
return (
<>
<AnimatePresence>
<motion.div
initial={{ x: -100, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
exit={{ x: -100, opacity: 0 }}
>
<p>Sent!</p>
</motion.div>
<AnimatePresence>
</>
)
}
مولفه حرکت به شما امکان می دهد عنصر div حاوی متن “ارسال شده!” را متحرک کنید.
ویژگی های اولیه، متحرک و خروجی مولفه حرکت، انیمیشن های ورودی و خروجی مولفه را مشخص می کند. هنگامی که کامپوننت در ابتدا رندر می شود، با موقعیت x 100- (خارج از صفحه به سمت چپ) و کدورت 0 شروع می شود و نامرئی می شود.
خاصیت animate نحوه متحرک سازی مولفه را در هنگام ورود به صفحه تعریف می کند، در این حالت از موقعیت x از 100- به موقعیت x 0 (از سمت چپ به داخل لغزش می شود) و به تدریج در یک کدورت 1 محو می شود و کاملاً تبدیل می شود. قابل رویت.
در نهایت، ویژگی exit تعریف می‌کند که وقتی کامپوننت را از صفحه حذف می‌کنید، چگونه باید متحرک شود. در این حالت، مولفه با موقعیت x برابر 100- از صفحه به سمت چپ می لغزد و به تدریج تا تیرگی 0 محو می شود.
همچنین باید مولفه حرکت را با مولفه AnimatePresence از فریمر-موشن بپیچید تا اجزای متحرک را زمانی که آنها را از درخت React DOM حذف می کنید، بپیچید.
اکنون که انیمیشن های ورودی و خروجی را تعریف کرده اید، می توانید یک دکمه برای فعال کردن انیمیشن اضافه کنید. این کامپوننت اصلاح شده با دکمه است:
import { AnimatePresence, motion } from "framer-motion";
import { useState } from "react";
function App() {
const [isVisible, setIsVisible] = useState(true);
const toggleVisibility = () => {
setIsVisible(!isVisible);
};
return (
<>
<AnimatePresence>
{isVisible && ( <motion.div
initial={{ x: -100, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
exit={{ x: -100, opacity: 0 }}
>
<p>Sent!</p>
</motion.div>)}
</AnimatePresence>
<button onClick={toggleVisibility}>
Notify
</button>
</>
)
}
این کد به روز شده یک متغیر حالت به نام isVisible را با استفاده از قلاب useState اضافه می کند. این متغیر ردیابی می کند که آیا جزء باید قابل مشاهده باشد یا خیر. تابع toggleVisibility وقتی روی دکمه کلیک می‌کنید مقدار isVisible را بین true و false تغییر می‌دهد.
اکنون کامپوننت را بسته به مقدار isVisible به صورت مشروط رندر می کنید. اگر isVisible درست باشد، مولفه حرکت با انیمیشن ورودی ارائه می شود.
در نهایت، یک کنترل کننده رویداد onClick را به دکمه اضافه کنید که تابع toggleVisibility را فراخوانی می کند، وضعیت isVisible را به روز می کند و انیمیشن ورودی یا خروجی مولفه حرکت را فعال می کند.
افزودن یک تابع تسهیل کننده
یک تابع کاهش سرعت تغییر انیمیشن در طول زمان را کنترل می کند. زمان بندی انیمیشن را با مشخص کردن اینکه انیمیشن چگونه باید در حین پیشرفت سرعت یا کم شدن آن را افزایش دهد، تعیین می کند. بدون عملکرد آسان‌سازی، انیمیشن ممکن است خیلی سریع نمایش داده شود.
Framer Motion چندین عملکرد آسان‌کننده از جمله easeInOut را فراهم می‌کند. آن را در بالای App.jsx از framer-motion وارد کنید تا از آن استفاده کنید.
import { motion, easeInOut } from "framer-motion";
سپس آن را به شی انتقال در مولفه حرکت اضافه کنید:
<motion.div
initial={{ x: -100, opacity: 0 }}
animate={{ x: 0, opacity: 1, transition: { duration: 0.5, ease: easeInOut } }}
exit={{ x: -100, opacity: 0, transition: { duration: 0.5, ease: easeInOut } }}
>
<p>Sent!</p>
</motion.div>
ویژگی duration مشخص می کند که انیمیشن چقدر باید اجرا شود.
از CSS ساده برای انیمیشن های ساده استفاده کنید
کارهای بیشتری می توانید با Framer Motion انجام دهید، از جمله انیمیشن های سه بعدی. با این حال، همیشه برای ایجاد انیمیشن به کتابخانه نیاز ندارید. برای انیمیشن های ساده مانند انتقال شناور، همیشه می توانید از CSS ساده استفاده کنید.