Vue实现弹幕漂浮效果
实现弹幕漂浮效果的方法
使用CSS动画控制水平移动
通过CSS的@keyframes定义从左到右的动画，结合Vue的v-for动态渲染弹幕列表。弹幕元素需设置position: absolute和动画持续时间。
.barrage-item {
position: absolute;
white-space: nowrap;
animation: moveRight 10s linear forwards;
}
@keyframes moveRight {
from { transform: translateX(100vw); }
to { transform: translateX(-100%); }
}动态生成弹幕数据
在Vue组件的data中维护弹幕数组，通过方法随机生成弹幕内容和垂直位置。使用setInterval定时添加新弹幕。
data() {
return {
barrages: [],
colors: ['#ff0000', '#00ff00', '#0000ff']
}
},
methods: {
addBarrage() {
this.barrages.push({
id: Date.now(),
text: `弹幕${Math.floor(Math.random() * 100)}`,
top: Math.random() * 80 + '%',
color: this.colors[Math.floor(Math.random() * this.colors.length)]
});
}
},
mounted() {
setInterval(this.addBarrage, 800);
}模板渲染与样式绑定
在模板中使用v-for渲染弹幕列表，动态绑定样式和动画持续时间。通过:style绑定颜色和垂直位置。
<div class="barrage-container">
<div
v-for="item in barrages"
:key="item.id"
class="barrage-item"
:style="{
color: item.color,
top: item.top,
animationDuration: `${Math.random() * 5 + 5}s`
}">
{{ item.text }}
</div>
</div>性能优化处理
弹幕移出屏幕后应从数组中移除，避免内存泄漏。通过监听动画结束事件animationend来清理不可见弹幕。
methods: {
removeBarrage(id) {
this.barrages = this.barrages.filter(item => item.id !== id);
}
}<div
@animationend="removeBarrage(item.id)"
<!-- 其他属性 -->
>
</div>容器样式设置
弹幕容器需要设置为相对定位，并限制高度和溢出处理。确保弹幕在指定区域内运动。
.barrage-container {
position: relative;
height: 300px;
overflow: hidden;
background: #f0f0f0;
}
