当前位置：首页 > React

react动画实现方式

2026-01-27 04:55:14React

React动画实现方式

React中实现动画的方式多样，可以根据项目需求选择合适的方法。以下是常见的几种实现方案：

使用CSS过渡和动画

通过CSS的transition或@keyframes实现动画效果，结合React的状态管理控制类名的切换。

.fade-in {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}
.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

function FadeComponent({ isVisible }) {
  return <div className={isVisible ? 'fade-in' : 'fade-out'} />;
}

使用React Transition Group

React Transition Group提供组件管理组件的装载和卸载动画，适合列表项或路由切换动画。

react动画实现方式

import { CSSTransition } from 'react-transition-group';

function Example() {
  const [show, setShow] = useState(false);
  return (
    <>
      <button onClick={() => setShow(!show)}>Toggle</button>
      <CSSTransition in={show} timeout={300} classNames="fade" unmountOnExit>
        <div>Content</div>
      </CSSTransition>
    </>
  );
}

使用Framer Motion

Framer Motion是一个功能强大的动画库，支持复杂的动画效果和手势交互。

import { motion } from 'framer-motion';

function MotionComponent() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    />
  );
}

使用React Spring

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

react动画实现方式

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

function SpringComponent() {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } });
  return <animated.div style={props}>Content</animated.div>;
}

使用GSAP

GSAP是一个高性能的动画库，适合复杂的序列动画和精细控制。

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

function GsapComponent() {
  const ref = useRef();
  useEffect(() => {
    gsap.to(ref.current, { duration: 1, x: 100 });
  }, []);
  return <div ref={ref}>Content</div>;
}

使用React Pose（已迁移至Framer Motion）

React Pose是早期的动画库，现已迁移至Framer Motion，但旧项目可能仍在使用。

import posed from 'react-pose';

const Box = posed.div({
  visible: { opacity: 1 },
  hidden: { opacity: 0 }
});

function PosedComponent({ isVisible }) {
  return <Box pose={isVisible ? 'visible' : 'hidden'} />;
}

自定义Hooks实现动画

通过React的useState和useEffect结合requestAnimationFrame实现自定义动画逻辑。

function useAnimation() {
  const [position, setPosition] = useState(0);
  useEffect(() => {
    let animationId;
    const animate = () => {
      setPosition(prev => (prev >= 100 ? 0 : prev + 1));
      animationId = requestAnimationFrame(animate);
    };
    animate();
    return () => cancelAnimationFrame(animationId);
  }, []);
  return position;
}