如何使用 Framer Motion 和 React-Router-Dom 創建多頁動畫

動畫正是讓平淡的網站變得刺激且難以忘懷的關鍵。它們為您的網站增添了一絲個性與獨特性，並讓訪客讚賞整體的美學。

顯而易見，人類總是愛美丽的東西。我們都喜欢看起来舒服的产品。

在本文中，我們將學習如何使用Framer motion和React-Router-Dom創建令人驚艷的動畫。

前提知識

為了能夠跟得上本文中的內容，您應該對React，Framer motion和React-Router-DOM有些許認識。

为了更好地学习Framer motion，您可以研读他们的文档。

Node.js也应该安装在您的系统上，并且您应该有一个可以工作的代码编辑器。我将使用VS Code。

如何设置项目

为了设置我们的项目，我们将会使用Vite来搭建我们的React开发环境。

在VScode中打开终端。您可以使用Ctrl + backtick(`)
在您的终端中，输入以下命令：

npm create vite@latest

按照提示命名您的项目和选择您想要的框架。在我們的情況中，我們使用 React。這將是一個 JavaScript 项目。
前往您的项目文件夹，在終端機中使用 npm i。
要開始您的项目，请使用 npm run dev。
請记住了，要清理您的项目，请删除 src 文件夹中的 App.js 代码和 CSS 文件。

如何初始化 Framer Motion 和 React-Router-Dom

要在您的项目中安装 Framer-motion，请打开终端并输入：

npm i framer-motion

要在您的项目中安装 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

在Navbar中，我們需要從React-Router-DOM導入Link以創建锚點元素。然後我們需要創建一個容器，其中包含我們的圖標和導航鏈接。圖標將將點連接到我們的索引頁面。

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>
  )
 }

現在讓我們前往我們的 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>,
)

現在在 App.js 中，我們將完成我們的配置的最後一個步驟。我們將導入我們的组件以及一些來自React-Router-DOM的特性並渲染我們的组件。通過使用從React-Router-DOM導入的useLocation特性，我們可以通過將鍵設定為當前路徑來設定路由的當前位置。

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

現在我們可以在 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;
}

在遵循所有步驟之後，您的應用程序應該看起來像這樣：

帶有動畫的風格化網頁

如何使用Framer Motion創建過渡效果

最後，讓我們為頁面之間的轉場創建動畫。

在 components 文件夾中創建一個名為 Box.jsx 的文件，並導入 motion 模組從 framer-motion。
然後我們可以返回兩個 div 標籤，並給它們指定 classNames 類為 slide-in 和 slide-out，一個用於滑入，另一個用於滑出。
我們用 framer-motion 的幫助在這些 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>
  )
}

接下來，我們在我們的 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;
}

最後一步是將 AnimatePresence 從 framer-motion 應用於我們的 App.js 文件中，並將整個 App 包圍在 AnimatePresence 內，並將模式設定為等待。如果您想了解更多關於 AnimatePresence 的信息，請訪問 framer-motion 文檔。

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

最後，我們的成品應該和下面的影片一樣：

結論

使用 Framer Motion 和 React-Router-Dom 創建多頁面動畫可以通過提供平滑的轉場來提高用戶體驗。

此整合利用了Framer Motion的动画功能與React-Router-Dom的路由特性，導致動態、互動的網頁應用程式。