انیمیشن ها چیزی هستند که وب سایت های ساده را به تجربه های هیجان انگیز و فراموش نشدنی تبدیل می کنند. آن‌ها به وب‌سایت شما کمی شخصیت و منحصر به فرد می‌دهند و بازدیدکننده را به تحسین زیبایی‌شناسی کلی وا می‌دارند.

این که انسان ها چیزهای زیبا را دوست دارند، بی دلیل است. همه ما عاشق محصولاتی هستیم که برای چشم راحت به نظر می رسند.

در این مقاله، ما قصد داریم یاد بگیریم که چگونه با استفاده از Framer motion و React-Router-Dom انیمیشن هایی بسازیم که کاربران را شگفت زده کند.

پیش نیازها

برای اینکه بتوانید آنچه را که در این مقاله انجام می‌دهیم دنبال کنید، باید اطلاعاتی در مورد React ، Framer motion و React-Router-DOM داشته باشید.

برای یادگیری بهتر حرکت Framer، می توانید مستندات آنها را مطالعه کنید.

Node.js نیز باید بر روی سیستم شما نصب شده باشد و شما باید یک ویرایشگر کد فعال داشته باشید. من از VS Code استفاده خواهم کرد.

نحوه راه اندازی پروژه

برای راه اندازی پروژه خود، از Vite برای راه اندازی محیط توسعه React خود استفاده می کنیم.

ترمینال را در VScode باز کنید. می توانید از Ctrl + backtick (`) استفاده کنید

در ترمینال خود دستور زیر را وارد کنید:

 npm create vite@latest

3. برای نامگذاری پروژه خود، دستورات را دنبال کنید و فریمورک مورد نظر خود را انتخاب کنید. در مورد ما، ما از React استفاده می کنیم. این یک پروژه جاوا اسکریپت خواهد بود.

4. به دایرکتوری پروژه خود بروید و از npm i در ترمینال استفاده کنید.

5. برای شروع پروژه خود از npm run dev استفاده کنید.

6. به یاد داشته باشید که پروژه خود را با حذف کد موجود در App.js و فایل های CSS خود در پوشه src پاک کنید.

نحوه راه اندازی Framer Motion و React-Router-Dom

برای نصب Framer-motion در پروژه خود ترمینال را باز کنید و وارد کنید:

 npm i framer-motion

2. برای نصب React-Router-DOM در پروژه خود ترمینال را باز کنید و وارد کنید:

 npm i react-router-dom

نحوه تنظیم کامپوننت ها و مسیریابی اولیه با React-Router-DOM

بیایید اجزای خود و صفحاتی را که برای این پروژه مسیریابی می کنیم، تنظیم کنیم.

در src یک پوشه جدید با نام components ایجاد کنید.

چهار فایل به نام‌های Home.jsx ، About.jsx ، Projects.jsx و Navbar.jsx را به این پوشه اضافه می‌کنیم.

در داخل سه مورد اول، ما یک کامپوننت عملکردی React ایجاد می کنیم. محتوای تگ h1 را در هر جزء تغییر دهید:

 const Home = () => { return ( <div> <h1>Home</h1> </div> ) } export default Home

4. در نوار Navbar، برای ایجاد عناصر لنگر، باید Link از React-Router-DOM وارد کنیم. سپس باید کانتینری ایجاد کنیم که آرم و پیوندهای ناو خود را در خود جای دهد. لوگو نقاط را به صفحه فهرست ما پیوند می دهد.

 import {Link} from "react-router-dom" const Navbar () => { return ( <div className="nav"> <div className="logo"> <Link className="nav-link" to="/">Lennythedev</Link> </div> <div> <div className="nav-links"> <div className="nav-item"> <Link className="nav-link" to="/">Home</Link> </div> <div className="nav-item"> <Link className="nav-link" to="/">About</Link> </div> <div className="nav-item"> <Link className="nav-link" to="/">Projects</Link> </div> </div> </div> </div> ) }

5. حالا به فایل index.js یا main.js خود می رویم. هدف این است که کل برنامه خود را با BrowserRouter بپیچیم که مسیریابی را در برنامه ما فعال می کند.

 import React from "react" import ReactDOM from 'react-dom/client' import App from './App.jsx' import './index.css' import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <Router> <Routes> <Route path='/*' element={<App />} /> </Routes> </Router> </React.StrictMode>, )

6. اکنون در App.js ، مرحله نهایی پیکربندی خود را تکمیل می کنیم. ما مؤلفه‌های خود و برخی ویژگی‌ها را از React-Router-DOM وارد می‌کنیم و مؤلفه‌های خود را رندر می‌کنیم. با استفاده از قابلیت useLocation از React-Router-DOM، ​​می توانیم با تنظیم کلید در مسیر فعلی، مکان فعلی مسیرها را تنظیم کنیم.

 import './App.css' import { Routes, Route, useLocation } from 'react-router-dom' import NavBar from './components/NavBar'; import Home from './components/Home'; import Projects from './components/Projects'; import About from './components/About'; function App() { const location = useLocation(); return ( <> <NavBar /> <AnimatePresence mode='wait'> <Routes location={location} key={location.pathname}> <Route index element={<Home />} /> <Route path='/projects' element={<Projects />}/> <Route path='/about' element={<About />}/> </Routes> </AnimatePresence> </> ) } export default App

7. اکنون می توانیم استایل خود را در App.css اضافه کنیم:

 * { margin: 0; padding: 0; box-sizing: border-box; color: white; font-family: "Fira Sans Condensed", sans-serif; } html, body { font-family: "Fira Sans Condensed", sans-serif; background: rgb(0, 162, 255); } .nav { position: fixed; width: 100%; display: flex; justify-content: space-between; } .nav-links { display: flex; cursor: pointer; } .logo, .nav-item { margin: 2em; font-weight: 400; font-size: 1.5vw; } h1{ width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-weight: 500; font-size: 10vw; line-height: 1; text-transform: uppercase; } a { text-decoration: none; font-weight: 500; }

8. پس از انجام تمام مراحل، برنامه شما باید به شکل زیر باشد:

چگونه با استفاده از Framer Motion ترانزیشن ایجاد کنیم

در نهایت بیایید انیمیشن خود را برای انتقال بین صفحات ایجاد کنیم.

یک فایل در مؤلفه هایی به نام Box.jsx ایجاد کنید و import motion from framer-motion .

سپس می‌توانیم دو div را برگردانیم، با classNames slide-in و slide-out یکی برای کشویی به داخل و دیگری برای کشویی به بیرون.

ما انیمیشن خود را با کمک فریمر-موشن در این div ها قرار می دهیم:

 import { motion } from "framer-motion" export default function Box() { return( <div> <motion.div className="slide-in" initial={{ scaleY: 0 }} animate={{ scaleY: 0 }} exit={{ scaleY: 1 }} transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }} /> <motion.div className="slide-out" initial={{ scaleY: 1 }} animate={{ scaleY: 0 }} exit={{ scaleY: 0 }} transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }} /> </div> ) }

4. در مرحله بعد، استایل خود را به فایل CSS خود اضافه می کنیم تا در App.css slide-in و slide-out .

 .slide-in { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #0f0f0f; transform-origin: bottom; } .slide-out { position: fixed; top: 0; left: 0; height: 100vh; background: #0f0f0f; transform-origin: top; }

5. در نهایت، آخرین مرحله این است که از AnimatePresence از framer-motion در فایل App.js خود استفاده کنید و کل برنامه را در AnimatePresence بپیچید و حالت را به عنوان انتظار تنظیم کنید. اگر می‌خواهید درباره AnimatePresence اطلاعات بیشتری کسب کنید، به اسناد فریم‌روشن مراجعه کنید.

 import './App.css' import { Routes, Route, useLocation } from 'react-router-dom' import NavBar from './components/NavBar'; import Home from './components/Home'; import Projects from './components/Projects'; import About from './components/About'; import { AnimatePresence } from 'framer-motion'; function App() { const location = useLocation(); return ( <> <NavBar /> <AnimatePresence mode='wait'> <Routes location={location} key={location.pathname}> <Route index element={<Home />} /> <Route path='/projects' element={<Projects />}/> <Route path='/about' element={<About />}/> </Routes> </AnimatePresence> </> ) } export default App

6. در نهایت، کار ما باید مانند ویدیو زیر باشد:

نتیجه

ایجاد انیمیشن‌های چند صفحه‌ای با Framer Motion و React-Router-Dom تجربه کاربر را با ارائه انتقال‌های صاف افزایش می‌دهد.

این ادغام از قدرت قابلیت‌های انیمیشن Framer Motion با آپشن های مسیریابی React-Router-Dom بهره می‌برد که منجر به ایجاد برنامه‌های وب پویا و تعاملی می‌شود.

خبرکاو