react实现发送弹幕
实现弹幕功能的核心思路
在React中实现弹幕功能需要处理三个关键部分：弹幕数据管理、渲染逻辑和动画控制。弹幕通常从右向左移动，需要动态计算位置和速度。
弹幕数据存储
使用React的useState管理弹幕列表，每条弹幕应包含内容、颜色、位置等属性：
const [danmus, setDanmus] = useState([]);
const addDanmu = (text, color = '#fff') => {
const id = Date.now();
const top = Math.random() * 80; // 随机垂直位置
setDanmus(prev => [...prev, { id, text, color, top }]);
};弹幕渲染组件
创建弹幕项组件，使用CSS动画实现移动效果：
function DanmuItem({ text, color, top }) {
return (
<div
style={{
position: 'absolute',
color,
top: `${top}%`,
whiteSpace: 'nowrap',
animation: `moveLeft 10s linear forwards`
}}
>
{text}
</div>
);
}CSS动画定义
在全局样式中添加关键帧动画：
@keyframes moveLeft {
from { transform: translateX(100vw); }
to { transform: translateX(-100%); }
}弹幕容器组件
创建固定定位的容器组件控制渲染范围：
function DanmuContainer() {
return (
<div style={{
position: 'fixed',
top: 0,
left: 0,
width: '100vw',
height: '80vh',
pointerEvents: 'none',
overflow: 'hidden'
}}>
{danmus.map(danmu => (
<DanmuItem key={danmu.id} {...danmu} />
))}
</div>
);
}性能优化
使用useMemo避免不必要的重渲染，并在弹幕移出屏幕后清理：
useEffect(() => {
const timer = setInterval(() => {
setDanmus(prev => prev.filter(item => {
// 简单判断是否已移出屏幕
return Date.now() - item.id < 10000;
}));
}, 1000);
return () => clearInterval(timer);
}, []);输入控制
添加输入框组件发送新弹幕：
function DanmuInput() {
const [input, setInput] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
if (input.trim()) {
addDanmu(input);
setInput('');
}
};
return (
<form onSubmit={handleSubmit}>
<input
value={input}
onChange={(e) => setInput(e.target.value)}
/>
<button type="submit">发送</button>
</form>
);
}完整组件集成
将各组件组合使用：
function App() {
return (
<>
<DanmuContainer />
<DanmuInput />
</>
);
}进阶优化方向
- 使用
requestAnimationFrame替代CSS动画实现更精确控制 - 添加弹幕碰撞检测避免重叠
- 实现弹幕暂停/继续功能
- 支持不同速度等级的弹幕
- 使用Web Workers处理大量弹幕计算
这种实现方式保持了React的声明式特性，同时通过CSS动画处理性能密集型任务。对于更复杂的场景，可以考虑使用Canvas渲染方案提升性能。
