vue实现抖音弹幕
Vue 实现抖音弹幕效果
抖音弹幕的核心特点是随机位置、颜色、速度和动画效果。以下是基于 Vue 的实现方法：
弹幕数据与样式
弹幕数据通常存储在数组中，每条弹幕包含文本、颜色、位置等信息。
data() {
return {
danmus: [
{ text: '哈哈哈', color: '#ff0000', top: '10%', speed: 5 },
{ text: '666', color: '#00ff00', top: '30%', speed: 8 }
],
newDanmu: ''
}
}弹幕组件结构
使用 Vue 的模板语法创建弹幕容器和单个弹幕元素。
<div class="danmu-container">
<div
v-for="(danmu, index) in danmus"
:key="index"
class="danmu-item"
:style="{
color: danmu.color,
top: danmu.top,
animationDuration: `${danmu.speed}s`
}"
>
{{ danmu.text }}
</div>
</div>
<input v-model="newDanmu" @keyup.enter="addDanmu">CSS 动画效果
通过 CSS 动画实现弹幕从右向左移动的效果。
.danmu-container {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.danmu-item {
position: absolute;
white-space: nowrap;
animation: danmuMove linear;
right: 0;
}
@keyframes danmuMove {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}添加新弹幕
在方法中添加新弹幕，随机生成颜色和位置。
methods: {
addDanmu() {
if (!this.newDanmu.trim()) return;
const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff'];
const tops = ['10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%'];
const speeds = [5, 6, 7, 8, 9, 10];
this.danmus.push({
text: this.newDanmu,
color: colors[Math.floor(Math.random() * colors.length)],
top: tops[Math.floor(Math.random() * tops.length)],
speed: speeds[Math.floor(Math.random() * speeds.length)]
});
this.newDanmu = '';
}
}自动清理弹幕
使用生命周期钩子或计时器清理已经完成动画的弹幕。
mounted() {
setInterval(() => {
this.danmus = this.danmus.filter(danmu => {
const element = document.querySelector(`.danmu-item:contains('${danmu.text}')`);
return element && getComputedStyle(element).opacity !== '0';
});
}, 1000);
}优化性能
对于大量弹幕，可以使用虚拟滚动或动态渲染优化性能。
computed: {
visibleDanmus() {
return this.danmus.slice(0, 50); // 只显示前50条
}
}完整示例
将上述代码整合到 Vue 单文件组件中即可实现基础抖音弹幕效果。可根据需求添加更多功能如弹幕碰撞检测、用户屏蔽等。
