当前位置：首页 > React

react怎么实现弹幕效果

2026-01-27 18:12:20React

实现弹幕效果的基本思路

在React中实现弹幕效果，核心是通过动态渲染多条文字内容，使其从右向左移动。需要管理弹幕数据、控制动画以及处理性能优化。

弹幕数据管理

使用useState维护弹幕列表，每条弹幕包含文本内容、位置、颜色等属性。初始化时可以设置默认数据或通过接口获取。

const [danmus, setDanmus] = useState([
  { id: 1, text: "第一条弹幕", top: 10, color: "#ff0000" },
  { id: 2, text: "第二条弹幕", top: 30, color: "#00ff00" }
]);

弹幕渲染组件

创建弹幕项组件，通过CSS实现平移动画。使用transform和transition属性控制水平移动。

function DanmuItem({ text, top, color }) {
  return (
    <div 
      style={{
        position: 'absolute',
        top: `${top}px`,
        left: '100%',
        color: color,
        whiteSpace: 'nowrap',
        transform: 'translateX(-100%)',
        transition: 'transform 10s linear'
      }}
    >
      {text}
    </div>
  );
}

添加新弹幕

通过事件触发或定时器添加新弹幕。计算随机高度避免重叠，使用Date.now()作为唯一ID。

const addDanmu = (text) => {
  const newDanmu = {
    id: Date.now(),
    text: text,
    top: Math.random() * 300,
    color: `#${Math.floor(Math.random()*16777215).toString(16)}`
  };
  setDanmus([...danmus, newDanmu]);
};

动画完成后清理

监听transitionend事件移除不可见的弹幕，防止DOM元素无限增长。通过过滤ID更新状态。

function DanmuItem({ id, text, top, color, onEnd }) {
  return (
    <div
      onTransitionEnd={() => onEnd(id)}
      style={/* 同上 */}
    >
      {text}
    </div>
  );
}

性能优化建议

使用CSS硬件加速提升动画性能，避免频繁重排。设置will-change属性并限制同时显示的弹幕数量。

{
  will-change: 'transform',
  backface-visibility: 'hidden'
}

完整组件示例

function DanmuContainer() {
  const [danmus, setDanmus] = useState([]);

  const addDanmu = (text) => {
    const newDanmu = {
      id: Date.now(),
      text,
      top: Math.random() * 300,
      color: `#${Math.floor(Math.random()*16777215).toString(16)}`
    };
    setDanmus(prev => [...prev, newDanmu]);
  };

  const removeDanmu = (id) => {
    setDanmus(prev => prev.filter(item => item.id !== id));
  };

  useEffect(() => {
    const timer = setInterval(() => {
      addDanmu(`随机弹幕${Math.random().toString(36).slice(2, 8)}`);
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div style={{ position: 'relative', height: '400px', overflow: 'hidden' }}>
      {danmus.map(danmu => (
        <DanmuItem key={danmu.id} {...danmu} onEnd={removeDanmu} />
      ))}
    </div>
  );
}

react怎么实现弹幕效果