React 與動畫

React 與動畫

在 React 應用中，動畫可以提升用戶體驗，讓應用更具吸引力和交互性。雖然 React 本身不處理動畫，但你可以使用各種動畫庫或 CSS 來輕鬆實現動畫效果。以下是一些實現動畫的方法。

---

1. 使用 CSS 動畫

1.1 基本的 CSS Transition

使用 CSS transition 是一種簡單且常見的方式來為元素添加動畫效果。你可以通過改變元素的樣式，觸發動畫效果。

import React, { useState } from 'react';
import './App.css'; // 在這裡添加 CSS 樣式

function App() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        切換可見性
      </button>
      <div className={isVisible ? 'box visible' : 'box'} />
    </div>
  );
}

export default App;

CSS:

.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
}

.box.visible {
  opacity: 1;
}

這段代碼實現了一個簡單的淡入淡出效果，通過點擊按鈕切換 box 的可見性。

1.2 CSS Keyframes

你還可以使用 CSS @keyframes 來創建更複雜的動畫。

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  animation: slideIn 0.5s ease-out;
}

這段代碼將 box 元素從螢幕左邊滑入螢幕中。

---

2. 使用 React Transition Group

React Transition Group 是一個專門為 React 應用提供動畫效果的庫，支持元素的進入和退出過渡動畫。它適合處理元素的增減過程。

2.1 安裝

npm install react-transition-group

2.2 使用 CSSTransition

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './App.css'; // 在這裡添加動畫樣式

function App() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        切換
      </button>
      <CSSTransition
        in={isVisible}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div className="box" />
      </CSSTransition>
    </div>
  );
}

export default App;

CSS:

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
}

這個例子中，我們使用 CSSTransition 組件來為元素的進入和退出添加淡入淡出的效果。

---

3. 使用 Framer Motion

Framer Motion 是一個強大的 React 動畫庫，支持更高級的動畫效果和交互。它提供了豐富的 API，適合需要精細控制動畫的情況。

3.1 安裝

npm install framer-motion

3.2 基本用法

import React, { useState } from 'react';
import { motion } from 'framer-motion';

function App() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        切換
      </button>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="box"
        />
      )}
    </div>
  );
}

export default App;

這裡使用了 motion.div 來創建一個可以控制的動畫元素，initial 定義初始狀態，animate 定義動畫效果，exit 則定義退出效果。

3.3 高級動畫

Framer Motion 可以創建複雜的動畫，如彈跳效果、拖拽效果等。

<motion.div
  drag
  dragConstraints={{ left: -100, right: 100, top: -50, bottom: 50 }}
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.9 }}
  style={{ width: 100, height: 100, backgroundColor: 'skyblue' }}
/>

這段代碼創建了一個可拖拽的方塊，當鼠標懸停或點擊時還會有縮放動畫。

---

4. 使用 React Spring

React Spring 是另一個強大的動畫庫，基於彈性物理模型來創建平滑、自然的動畫。

4.1 安裝

npm install react-spring

4.2 基本用法

import React, { useState } from 'react';
import { useSpring, animated } from 'react-spring';

function App() {
  const [isVisible, setIsVisible] = useState(false);
  const fade = useSpring({
    opacity: isVisible ? 1 : 0,
  });

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        切換
      </button>
      <animated.div style={fade} className="box" />
    </div>
  );
}

export default App;

useSpring 可以創建平滑的過渡效果，這裡我們使用它來實現一個淡入淡出的動畫。

---

5. 總結

• CSS 動畫：使用 transition 和 @keyframes 是最簡單的方式，適合基本的動畫需求。
• React Transition Group：適合處理進入和退出動畫，專門為 React 設計。
• Framer Motion：功能豐富且靈活，適合需要複雜動畫和交互的應用。
• React Spring：提供基於彈性物理的動畫，動畫過渡更自然。

根據應用需求選擇合適的動畫庫或技術，將使你的 React 應用更加生動有趣。