当前位置：首页 > React

react实现特效

2026-01-26 15:03:54React

React 实现特效的常见方法

使用 CSS 动画和过渡
通过 CSS 的 @keyframes 和 transition 属性实现基础动画效果，结合 React 的 className 或 style 动态切换。例如悬停效果或加载动画：

.fade-in {
  animation: fadeIn 1s ease-in;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

在 React 组件中动态添加类名：

react实现特效

<div className={isActive ? 'fade-in' : ''}>内容</div>

使用 React Spring 或 Framer Motion
第三方库如 react-spring 和 framer-motion 提供声明式动画 API，适合复杂特效。例如使用 framer-motion 实现滑动效果：

import { motion } from 'framer-motion';
<motion.div 
  initial={{ x: -100 }}
  animate={{ x: 0 }}
  transition={{ duration: 0.5 }}
/>

结合 SVG 和 Canvas 动画
通过 react-konva 或 d3.js 实现数据可视化或交互式图形特效。例如使用 Konva 绘制动态图形：

react实现特效

import { Stage, Layer, Circle } from 'react-konva';
<Stage width={window.innerWidth} height={window.innerHeight}>
  <Layer>
    <Circle x={100} y={100} radius={50} fill="red" />
  </Layer>
</Stage>

监听滚动事件实现视差效果
利用 window.addEventListener 或 react-intersection-observer 触发滚动动画。示例代码：

const [scrollY, setScrollY] = useState(0);
useEffect(() => {
  const handleScroll = () => setScrollY(window.scrollY);
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);
<div style={{ transform: `translateY(${scrollY * 0.5}px)` }}></div>

使用 Three.js 实现 3D 特效
通过 react-three-fiber 集成 Three.js，创建 3D 模型或粒子效果。例如渲染一个旋转立方体：

import { Canvas, useFrame } from '@react-three/fiber';
function Box() {
  const meshRef = useRef();
  useFrame(() => (meshRef.current.rotation.x += 0.01));
  return (
    <mesh ref={meshRef}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  );
}
<Canvas><Box /></Canvas>