react弹幕组件实现

实现React弹幕组件的方法

基本弹幕功能实现

使用React Hooks和CSS动画实现基础弹幕效果。创建一个Danmu组件，接收弹幕列表作为props，通过绝对定位和动画使弹幕从右向左移动。

import React, { useState, useEffect } from 'react';
import './Danmu.css';

const Danmu = ({ messages }) => {
  const [visibleMessages, setVisibleMessages] = useState([]);

  useEffect(() => {
    if (messages.length > 0) {
      const timer = setInterval(() => {
        setVisibleMessages(prev => [...prev, messages[prev.length % messages.length]]);
      }, 1000);
      return () => clearInterval(timer);
    }
  }, [messages]);

  return (
    <div className="danmu-container">
      {visibleMessages.map((msg, index) => (
        <div 
          key={index} 
          className="danmu-item"
          style={{ top: `${(index % 10) * 10}%` }}
        >
          {msg}
        </div>
      ))}
    </div>
  );
};

export default Danmu;

CSS样式设置

通过CSS定义弹幕动画和容器样式，确保弹幕平滑移动且不会溢出容器。

.danmu-container {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background-color: #f0f0f0;
}

.danmu-item {
  position: absolute;
  white-space: nowrap;
  color: #333;
  font-size: 14px;
  animation: move 10s linear;
}

@keyframes move {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

性能优化方案

对于大量弹幕场景，使用虚拟滚动技术优化性能。通过计算可视区域内的弹幕，只渲染可见部分。

const DanmuVirtualized = ({ messages }) => {
  const [scrollTop, setScrollTop] = useState(0);
  const containerHeight = 300;
  const itemHeight = 30;

  const handleScroll = (e) => {
    setScrollTop(e.target.scrollTop);
  };

  const startIdx = Math.floor(scrollTop / itemHeight);
  const endIdx = Math.min(
    startIdx + Math.ceil(containerHeight / itemHeight),
    messages.length
  );

  return (
    <div className="danmu-container" onScroll={handleScroll}>
      <div style={{ height: `${messages.length * itemHeight}px` }}>
        {messages.slice(startIdx, endIdx).map((msg, index) => (
          <div 
            key={startIdx + index}
            className="danmu-item"
            style={{
              top: `${(startIdx + index) * itemHeight}px`,
              animationDuration: `${5 + Math.random() * 5}s`
            }}
          >
            {msg}
          </div>
        ))}
      </div>
    </div>
  );
};

高级功能扩展

实现弹幕颜色、速度随机化和碰撞检测功能，增强视觉效果。

const getRandomColor = () => {
  const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff'];
  return colors[Math.floor(Math.random() * colors.length)];
};

const AdvancedDanmu = ({ messages }) => {
  // ...其他状态逻辑

  return (
    <div className="danmu-container">
      {visibleMessages.map((msg, index) => (
        <div
          key={index}
          className="danmu-item"
          style={{
            top: `${(index % 10) * 10}%`,
            color: getRandomColor(),
            animationDuration: `${3 + Math.random() * 7}s`
          }}
        >
          {msg.text}
        </div>
      ))}
    </div>
  );
};

交互功能实现

添加发送弹幕功能，允许用户实时提交新弹幕。

const InteractiveDanmu = () => {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');

  const handleSend = () => {
    if (input.trim()) {
      setMessages([...messages, input]);
      setInput('');
    }
  };

  return (
    <div>
      <Danmu messages={messages} />
      <div>
        <input 
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="输入弹幕内容"
        />
        <button onClick={handleSend}>发送</button>
      </div>
    </div>
  );
};

这些方法提供了从基础到高级的React弹幕组件实现方案，可以根据实际需求选择适合的方案或组合使用。