当前位置：首页 > React

react如何实现文字动画显示

2026-03-11 10:33:30React

使用 CSS 动画

在 React 中可以通过 CSS 的 @keyframes 和 animation 属性实现文字动画。定义一个动画样式，将其应用到文字元素上。

/* CSS 文件 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animated-text {
  animation: fadeIn 1s ease-in-out forwards;
}

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

const AnimatedText = () => {
  return <div className="animated-text">这段文字会淡入显示</div>;
};

使用 React Spring 库

React Spring 是一个专门为 React 设计的动画库，可以实现更复杂的文字动画效果。安装后通过 useSpring 钩子控制动画。

npm install react-spring

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

const AnimatedText = () => {
  const props = useSpring({
    opacity: 1,
    transform: 'translateY(0)',
    from: { opacity: 0, transform: 'translateY(20px)' },
    config: { duration: 1000 },
  });

  return <animated.div style={props}>这段文字会平滑出现</animated.div>;
};

使用 Framer Motion 库

Framer Motion 提供了声明式的动画 API，支持更丰富的文字动画效果。通过 motion 组件和动画属性实现。

npm install framer-motion

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

const AnimatedText = () => {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 1 }}
    >
      这段文字会动态显示
    </motion.div>
  );
};

逐字显示效果

通过状态管理和 setTimeout 或 setInterval 实现逐字显示的文字动画效果。

import React, { useState, useEffect } from 'react';

const TypewriterEffect = ({ 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>;
};

// 使用组件
<TypewriterEffect text="这段文字会逐字显示" />

结合 SVG 文本动画

通过 SVG 和 stroke-dasharray 属性实现描边文字动画效果。

react如何实现文字动画显示

import React from 'react';

const SvgTextAnimation = () => {
  return (
    <svg width="100%" height="100">
      <text
        x="50%"
        y="50%"
        textAnchor="middle"
        fill="none"
        stroke="black"
        strokeWidth="2"
        strokeDasharray="1000"
        strokeDashoffset="1000"
        style={{ animation: 'draw 3s forwards' }}
      >
        描边文字动画
      </text>
    </svg>
  );
};

// CSS 部分
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

以上方法可以根据需求选择，CSS 动画适合简单效果，React Spring 和 Framer Motion 适合复杂交互，逐字显示和 SVG 动画适合特殊场景。