react实现弹幕效果
实现弹幕效果的基本思路
弹幕效果通常指文字或图形在屏幕上横向移动的动态展示。在React中实现弹幕效果需要结合CSS动画和状态管理。
使用CSS动画实现移动效果
通过CSS的transform和@keyframes创建平移动画，使弹幕元素从右向左移动：
.barrage-item {
position: absolute;
white-space: nowrap;
animation: moveLeft 10s linear;
}
@keyframes moveLeft {
from { transform: translateX(100vw); }
to { transform: translateX(-100%); }
}弹幕组件结构
创建弹幕组件管理弹幕的渲染和生命周期：
function Barrage({ messages }) {
const [barrages, setBarrages] = useState([]);
useEffect(() => {
const newBarrage = {
id: Date.now(),
text: messages[Math.floor(Math.random() * messages.length)],
top: Math.random() * 80 + '%'
};
setBarrages(prev => [...prev, newBarrage]);
const timer = setInterval(() => {
// 定期添加新弹幕
}, 1000);
return () => clearInterval(timer);
}, [messages]);
return (
<div className="barrage-container">
{barrages.map(item => (
<div
key={item.id}
className="barrage-item"
style={{ top: item.top }}
onAnimationEnd={() =>
setBarrages(prev => prev.filter(b => b.id !== item.id))
}
>
{item.text}
</div>
))}
</div>
);
}优化弹幕性能
使用CSS硬件加速和will-change属性提升动画性能：
.barrage-item {
will-change: transform;
backface-visibility: hidden;
perspective: 1000px;
}控制弹幕速度和密度
通过调整动画时间和生成间隔控制弹幕效果：
const ANIMATION_DURATION = 8; // 秒
const GENERATION_INTERVAL = 500; // 毫秒
// 在样式中动态设置持续时间
style={{
top: item.top,
animationDuration: `${ANIMATION_DURATION}s`
}}弹幕交互功能
添加暂停、清屏等交互功能：
function BarrageController({ onPause, onClear }) {
return (
<div>
<button onClick={onPause}>暂停</button>
<button onClick={onClear}>清屏</button>
</div>
);
}弹幕颜色和样式多样化
为弹幕添加随机颜色和样式：
const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00'];
const getRandomStyle = () => ({
color: colors[Math.floor(Math.random() * colors.length)],
fontSize: `${Math.random() * 10 + 14}px`
});
// 应用样式
style={{
...getRandomStyle(),
top: item.top,
animationDuration: `${ANIMATION_DURATION}s`
}}响应式弹幕容器
确保弹幕容器适应不同屏幕尺寸：
.barrage-container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
