当前位置：首页 > React

react 动画实现

2026-01-26 12:37:16React

react 动画实现方法

React 动画可以通过多种方式实现，包括 CSS 过渡、CSS 动画、JavaScript 动画库等。以下是几种常见的实现方法：

使用 CSS 过渡

CSS 过渡适用于简单的动画效果，例如元素的显示/隐藏、颜色变化等。通过 React 的状态管理触发 CSS 过渡效果。

import React, { useState } from 'react';
import './styles.css';

function App() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div>
      <button onClick={() => setIsActive(!isActive)}>Toggle</button>
      <div className={`box ${isActive ? 'active' : ''}`}></div>
    </div>
  );
}

export default App;

对应的 CSS 文件：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 0.3s ease;
}

.box.active {
  background-color: blue;
  transform: scale(1.2);
}

使用 CSS 动画

CSS 动画适用于更复杂的动画效果，可以通过 @keyframes 定义动画序列。

import React from 'react';
import './styles.css';

function App() {
  return (
    <div className="animated-box"></div>
  );
}

export default App;

对应的 CSS 文件：

react 动画实现

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animated-box {
  width: 100px;
  height: 100px;
  background-color: green;
  animation: spin 2s linear infinite;
}

使用 react-transition-group

react-transition-group 是一个流行的库，用于管理组件的进入和退出动画。

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './styles.css';

function App() {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div className="box"></div>
      </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: purple;
}

使用 Framer Motion

Framer Motion 是一个功能强大的动画库，提供了丰富的动画 API。

react 动画实现

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

function App() {
  return (
    <motion.div
      animate={{
        scale: [1, 1.5, 1.5, 1],
        rotate: [0, 0, 180, 180],
        borderRadius: ["0%", "0%", "50%", "50%"]
      }}
      transition={{
        duration: 2,
        repeat: Infinity,
      }}
      style={{
        width: 100,
        height: 100,
        backgroundColor: 'orange'
      }}
    />
  );
}

export default App;

使用 React Spring

React Spring 是一个基于物理的动画库，适合实现自然流畅的动画效果。

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

function App() {
  const [flip, setFlip] = useState(false);
  const props = useSpring({
    to: { opacity: 1, transform: 'translateX(100px)' },
    from: { opacity: 0, transform: 'translateX(0px)' },
    reset: true,
    reverse: flip,
    onRest: () => setFlip(!flip),
  });

  return (
    <animated.div style={props}>
      <div style={{ width: 100, height: 100, backgroundColor: 'pink' }}></div>
    </animated.div>
  );
}

export default App;

使用 GSAP

GSAP 是一个高性能的 JavaScript 动画库，适合复杂的动画场景。

import React, { useEffect, useRef } from 'react';
import { gsap } from 'gsap';

function App() {
  const boxRef = useRef(null);

  useEffect(() => {
    gsap.to(boxRef.current, {
      duration: 1,
      x: 100,
      rotation: 360,
      repeat: -1,
      yoyo: true,
    });
  }, []);

  return (
    <div ref={boxRef} style={{ width: 100, height: 100, backgroundColor: 'teal' }}></div>
  );
}

export default App;