react如何实现文字动画显示

React 实现文字动画显示的方法

使用 CSS 动画

通过 CSS @keyframes 和 transition 实现文字动画效果，结合 React 的 className 或 style 属性控制动画触发。

/* CSS 文件 */
.fade-in {
  animation: fadeIn 2s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

// React 组件
function AnimatedText() {
  return <div className="fade-in">这段文字会淡入显示</div>;
}

使用 React Spring 库

React Spring 是一个基于物理的动画库，适合实现复杂的文字动画效果。

npm install react-spring

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

function SpringText() {
  const props = useSpring({
    opacity: 1,
    from: { opacity: 0 },
    config: { duration: 1000 }
  });

  return <animated.div style={props}>动态文字效果</animated.div>;
}

使用 Framer Motion 库

Framer Motion 提供声明式动画 API，支持更丰富的文字动画效果。

npm install framer-motion

import { motion } from 'framer-motion';

function MotionText() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      带位移的淡入效果
    </motion.div>
  );
}

逐字显示效果

通过状态管理和 setInterval 实现文字逐个字符显示的效果。

import { useState, useEffect } from 'react';

function TypingEffect({ text }) {
  const [displayedText, setDisplayedText] = useState('');
  const [index, setIndex] = useState(0);

  useEffect(() => {
    if (index < text.length) {
      const timer = setTimeout(() => {
        setDisplayedText(prev => prev + text[index]);
        setIndex(prev => prev + 1);
      }, 100); // 控制显示速度
      return () => clearTimeout(timer);
    }
  }, [index, text]);

  return <div>{displayedText}</div>;
}

// 使用方式
<TypingEffect text="这段文字会逐个字符显示" />

使用 GSAP 动画库

GSAP 是专业的动画库，适合实现复杂的文字序列动画。

npm install gsap

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

function GsapText() {
  const textRef = useRef(null);

  useEffect(() => {
    gsap.from(textRef.current, {
      duration: 1,
      opacity: 0,
      y: 50,
      ease: "power2.out"
    });
  }, []);

  return <div ref={textRef}>GSAP 驱动的动画文字</div>;
}

文字颜色渐变动画

通过 CSS 渐变和动画实现文字颜色变化效果。

.color-change {
  background: linear-gradient(to right, #ff8a00, #e52e71);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hueShift 3s infinite alternate;
}

@keyframes hueShift {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}

function GradientText() {
  return <div className="color-change">渐变动画文字</div>;
}

每种方法适用于不同场景，CSS 动画适合简单效果，React Spring 和 Framer Motion 适合组件化动画，GSAP 适合复杂时间线控制，逐字显示适合模拟打字效果。