uniapp小程序实现弹幕不重叠
1、在父组件中引入弹幕组件
<template>
<!-- 弹幕 -->
<barrage ref="barrage" class="barrage-content" @reloadDanmu="reloadDanmu"></barrage>
</template>
<script>
import barrage from './components/barrage.vue'
import {
getBarrageListApi
} from '@/api/voteApi.js'
export default {
components: {
barrage
},
data() {
return {
danmuList: [], // 弹幕列表
danmuContion: { // 弹幕查询条件
page: 1,
size: 200
}
},
onLoad(){
this.getBarrageList()
},
methods: {
async getBarrageList(isInit) {
try {
let res = await getBarrageListApi(this.danmuContion)
let resData = (res && res.data) || {}
let list = Array.isArray(resData.records) ? resData.records : []
list.map((item) => {
item.color = '#fff'
item.timestampt = new Date().getTime()
item.image = {
head: {
src: item.avatarUrl,
width: 44,
height: 44
}, // 弹幕头部添加图片
gap: 8 // 图片与文本间隔
}
item.content = `{${item.nickname}} 已为《${item.voteName}》投下宝贵的一票`
})
let danmuLength = this.danmuList.length
this.danmuList = list
this.addBarrage(isInit || danmuLength === 0)
} catch (e) {
uni.showToast({
title: (e && e.message) || '查询弹幕列表失败',
icon: 'none',
during: 2000
})
}
},
addBarrage(isInit) {
if (!isInit || !this.danmuList.length) {
return
}
const barrageComp = this.$refs && this.$refs.barrage || {}
barrageComp.getBarrageInstance({
duration: 15, // 弹幕动画时长 (移动 1500px 所需时长)
lineHeight: 2.4, // 弹幕行高
padding: [0, 0, 0, 0], // 弹幕区四周留白
alpha: 1, // 全局透明度
font: '10px PingFang SC', // 全局字体
range: [0, 1], // 弹幕显示的垂直范围，支持两个值。[0,1]表示弹幕整个随机分布，
tunnelShow: false, // 显示轨道线
tunnelMaxNum: 200, // 隧道最大缓冲长度
maxLength: 5000, // 弹幕最大字节长度，汉字算双字节
safeGap: 20, // 发送时的安全间隔
enableTap: false, // 点击弹幕停止动画高亮显示
danmuList: this.danmuList
})
},
async reloadDanmu(type) {
const barrageComp = this.$refs && this.$refs.barrage || {}
if(type === 'addDanmu') {
await this.getBarrageList(false)
barrageComp.open()
barrageComp.addData(this.danmuList)
return
}
await this.getBarrageList(true)
},
}
</script>
<style lang="less" scoped>
.barrage-conten {
width: 100%;
height: 156rpx;
position: absolute;
top: 192rpx;
box-sizing: border-box;
}
</style>
2、弹幕组件
<template>
<view class="barrage-area" :style="{'opacity': alpha, 'font-size': fontSize*2 + 'rpx', 'padding': padding}">
<block v-for="(tunnel, tunnelId) in tunnels" :key="tunnelId">
<view class="barrage-tunnel"
:style="{'height': tunnel.height*2 + 'rpx', 'border-top-width': (tunnelShow ? 1 : 0) + 'px'}">
<view class="tunnel-tips" :style="{'display': !tunnelShow ? 'none' : 'block'}">轨道{{tunnelId}}</view>
<block v-for="(bullet, bulletId) in tunnel.bullets" :key="bullet.timestampt + bulletId">
<view :data-tunnelid="{tunnelId}" :data-bulletid="{bulletId}"
:class="['bullet-item', bullet.duration > 0 ? 'bullet-move' : '', bullet.paused ? 'paused' : '']"
:style="{'color': bullet.paused ? '#fff' : bullet.color, 'line-height': tunnel.height*2 + 'rpx', 'animation-duration': bullet.duration + 's', 'animation-play-state': bullet.paused ? 'paused' : 'running'}"
@animationend="onAnimationend" @tap="onTapBullet">
<image class="bullet-item_img" v-if="bullet.image && bullet.image.head"
:style="{'width': bullet.image.head.width + 'rpx', 'height': bullet.image.head.height + 'rpx'}"
mode="aspectFill" :src="bullet.image.head.src"></image>
<view class="bullet-item_text"
:style="{'margin':'0 ' + (bullet.image && bullet.image.gap || 0) + 'rpx', opacity: 1}">
<text>{{bullet.content}}</text>
</view>
</view>
</block>
</view>
</block>
</view>
</template>
<script>
export default {
data() {
return {
fontSize: 10, // 字体大小，单位px
width: 375, // 弹幕区域宽度
height: 80, // 弹幕区域高度
duration: 15, // 弹幕动画时长
lineHeight: 3, // 弹幕行高
padding: [0, 0, 0, 0], // 弹幕区四周留白
alpha: 1, // 全局透明度
font: '10px PingFang SC', // 全局字体
range: [0, 1], // 弹幕显示的垂直范围，支持两个值。[0,1]表示弹幕整个随机分布，
tunnelShow: false, // 显示轨道线
tunnelMaxNum: 200, // 轨道最大缓冲长度
maxLength: 5000, // 弹幕最大字节长度，汉字算双字节
safeGap: 20, // 发送时的安全间隔
enableTap: false, // 点击弹幕停止动画高亮显示
tunnelHeight: 0,
tunnelNum: 0,
tunnels: [],
idleTunnels: null,
enableTunnels: {},
distance: 1500, // 移动距离, 单位px
systemInfo: {},
danmuList: []
};
},
methods: {
init() {
this.fontSize = this.getFontSize(this.font)
this.idleTunnels = new Set()
this.enableTunnels = new Set()
this.tunnels = []
this.availableHeight = (this.height - this.padding[0] - this.padding[2])
this.tunnelHeight = this.fontSize * this.lineHeight
// 轨道行数 = 弹幕区域高度/(单个弹幕高度+下边距)
this.tunnelNum = Math.floor(this.availableHeight / (this.tunnelHeight + 15))
// tunnel（轨道）
class Tunnel {
constructor(opt = {}) {
const defaultTunnelOpt = {
tunnelId: 0,
height: 0, // 轨道高度
width: 0, // 轨道宽度
safeGap: 4, // 相邻弹幕安全间隔
maxNum: 10, // 缓冲队列长度
bullets: [], // 弹幕
last: -1, // 上一条发送的弹幕序号
bulletStatus: [], // 0 空闲，1 占用中
disabled: false, // 禁用中
sending: false, // 弹幕正在发送
}
Object.assign(this, defaultTunnelOpt, opt)
this.bulletStatus = new Array(this.maxNum).fill(0)
class Bullet {
constructor(opt = {}) {
this.bulletId = opt.bulletId
}
/**
* image 结构
* {
* head: {src, width, height},
* gap: 4 // 图片与文本间隔
* }
*/
addContent(opt = {}) {
const defaultBulletOpt = {
duration: 0, // 动画时长
passtime: 0, // 弹幕穿越右边界耗时
content: '', // 文本
color: '#000000', // 默认黑色
width: 0, // 弹幕宽度
height: 0, // 弹幕高度
image: {}, // 图片
paused: false // 是否暂停
}
Object.assign(this, defaultBulletOpt, opt)
}
removeContent() {
this.addContent({})
}
}
for (let i = 0; i < this.maxNum; i++) {
this.bullets.push(new Bullet({
bulletId: i,
}))
}
}
disable() {
this.disabled = true
this.last = -1
this.sending = false
this.bulletStatus = new Array(this.maxNum).fill(1)
this.bullets.forEach(bullet => bullet.removeContent())
}
enable() {
if (this.disabled) {
this.bulletStatus = new Array(this.maxNum).fill(0)
}
this.disabled = false
}
clear() {
this.last = -1
this.sending = false
this.bulletStatus = new Array(this.maxNum).fill(0)
this.bullets.forEach(bullet => bullet.removeContent())
}
getIdleBulletIdx() {
return this.bulletStatus.indexOf(0)
}
getIdleBulletNum() {
let count = 0
this.bulletStatus.forEach(status => {
if (status === 0) count++
})
return count
}
addBullet(opt) {
if (this.disabled) return
const idx = this.getIdleBulletIdx()
if (idx >= 0) {
this.bulletStatus[idx] = 1
this.bullets[idx].addContent(opt)
}
}
removeBullet(bulletId) {
if (this.disabled) return
this.bulletStatus[bulletId] = 0
const bullet = this.bullets[bulletId]
bullet.removeContent()
}
}
for (let i = 0; i < this.tunnelNum; i++) {
this.idleTunnels.add(i) // 空闲的轨道id集合
this.enableTunnels.add(i) // 可用的轨道id集合
this.tunnels.push(new Tunnel({ // 轨道集合
width: this.width,
height: this.tunnelHeight,
safeGap: this.safeGap,
maxNum: this.tunnelMaxNum,
tunnelId: i,
}))
}
// 筛选符合范围的轨道
this.setRange()
},
resize() {
const query = uni.createSelectorQuery().in(this)
query.select('.barrage-area').boundingClientRect((res) => {
res = res || {}
let systemInfo = uni.getSystemInfoSync()
this.systemInfo = systemInfo || {}
this.width = res.width || systemInfo.windowWidth
this.height = res.height || 300
this.last = -1
this.$emit('reloadDanmu')
}).exec()
},
// 设置显示范围 range: [0,1]
setRange(range) {
range = range || this.range
const top = range[0] * this.tunnelNum
const bottom = range[1] * this.tunnelNum
// 释放符合要求的轨道
// 找到目前空闲的轨道
const idleTunnels = new Set()
const enableTunnels = new Set()
this.tunnels.forEach((tunnel, tunnelId) => {
if (tunnelId >= top && tunnelId < bottom) {
const disabled = tunnel.disabled
tunnel.enable()
enableTunnels.add(tunnelId)
if (disabled || this.idleTunnels.has(tunnelId)) {
idleTunnels.add(tunnelId)
}
} else {
tunnel.disable()
}
})
this.idleTunnels = idleTunnels
this.enableTunnels = enableTunnels
this.range = range
},
setFont(font) {
this.font = font
},
setAlpha(alpha) {
if (typeof alpha !== 'number') return
this.alpha = alpha
},
setDuration(duration) {
if (typeof duration !== 'number') return
this.duration = duration
this.clear()
},
// 开启弹幕
open() {
this._isActive = true
},
// 关闭弹幕，清除所有数据
close(cb) {
this._isActive = false
this.clear(cb)
},
clear(cb) {
this.tunnels.forEach(tunnel => tunnel.clear())
this.idleTunnels = new Set(this.enableTunnels)
if (typeof cb === 'function') {
cb()
}
},
// 添加一批弹幕，轨道满时会被丢弃
addData(data = []) {
if (!this._isActive || !data || !data.length) return
data.forEach((item, index) => {
item.timestampt = new Date().getTime()
item.content = item.content || ''
item.content = this.substring(item.content, this.maxLength)
if (!item.width) {
// 一个弹幕总长度=头像（包含边框）+文本+内边距+外边距
item.width = (44 + 4) + item.content.length * this.fontSize * 2 + (8 + 20) + 60
item.width = Math.ceil(((this.systemInfo.windowWidth || 375) / 375) * (item.width / 2))
}
this.addBullet2Tunnel(item, index)
})
// 更新弹幕
this.updateBullets()
},
// 添加至轨道
addBullet2Tunnel(opt = {}, index) {
const tunnel = this.getIdleTunnel(index)
if (tunnel === null) return
const tunnelId = tunnel.tunnelId
tunnel.addBullet(opt)
if (tunnel.getIdleBulletNum() === 0) {
this.idleTunnels.delete(tunnelId)
}
},
updateBullets() {
if (!this.tunnels || !this.tunnels.length) {
return
}
this.tunnels.map((a) => {
a.batchTime = 0 // 通过一批弹幕花费（即一次addData添加的所有弹幕）的时间
a.lastBulletIndex = a.lastBulletIndex >= 0 ? a.lastBulletIndex : -1 // 轨道最后通过的弹幕下标
a.bullets && a.bullets.map((b, bIndex) => {
if ((a.lastBulletIndex === -1 || bIndex > a.lastBulletIndex) && b.content) {
a.lastBulletIndex = bIndex
const duration = this.distance * this.duration / (this.distance + b.width)
const passDistance = b.width + a.safeGap
// 等上一条通过右边界
b.passtime1 = Math.ceil(passDistance * this.duration * 1000 / this.distance)
a.batchTime += b.passtime1
}
})
this.tunnelAnimate(a)
})
let list = JSON.parse(JSON.stringify(this.tunnels))
list.sort((a, b) => {
return b.batchTime - a.batchTime
})
let lastBullet = list[0].bullets[list[0].lastBulletIndex]
// 最后一条弹幕通过屏幕的时间
let lastPassTime = list[0].batchTime + Math.ceil((this.width) * this.duration * 1000 / this.distance)
console.log('最后一条弹幕通过屏幕的时间:', lastPassTime)
let reloadDanmuTimer = setTimeout(() => {
// 轨道已满，重置轨道并重新加载弹幕
if (!this.idleTunnels || this.idleTunnels.size === 0) {
this.last = -1
this.$emit('reloadDanmu')
} else {
this.$emit('reloadDanmu', 'addDanmu')
}
clearTimeout(reloadDanmuTimer)
}, lastPassTime)
},
tunnelAnimate(tunnel) {
if (tunnel.disabled || tunnel.sending) return
const next = (tunnel.last + 1) % tunnel.maxNum
const bullet = tunnel.bullets[next]
if (!bullet) return
if (bullet.content || bullet.image) {
tunnel.sending = true
tunnel.last = next
const duration = this.distance * this.duration / (this.distance + bullet.width)
const passDistance = bullet.width + tunnel.safeGap
bullet.duration = this.duration
// 等上一条通过右边界
bullet.passtime = Math.ceil(passDistance * bullet.duration * 1000 / this.distance)
let sendTimer = setTimeout(() => {
tunnel.sending = false
this.tunnelAnimate(tunnel)
clearTimeout(sendTimer)
}, bullet.passtime)
}
},
// 从还有余量的轨道中随机挑选一个
getIdleTunnel(addIndex) {
if (!this.idleTunnels || this.idleTunnels.size === 0) return null
const idleTunnels = Array.from(this.idleTunnels)
let index = -1
if (this.tunnelNum == 2 && (addIndex || addIndex === 0)) { // 只有两个轨道的情况下，优先手动分发轨道
index = addIndex % 2 === 0 ? 0 : 1
}
if (index === -1 || (!idleTunnels[index] && idleTunnels[index] !== 0)) { // 随机选轨道
index = this.getRandom(idleTunnels.length)
}
return this.tunnels[idleTunnels[index]]
},
animationend(opt) {
const {
tunnelId,
bulletId
} = opt
const tunnel = this.tunnels[tunnelId]
const bullet = tunnel && tunnel.bullets && tunnel.bullets[bulletId]
if (!tunnel || !bullet) return
tunnel.removeBullet(bulletId)
this.idleTunnels.add(tunnelId)
},
tapBullet(opt) {
if (!this.enableTap) return
const {
tunnelId,
bulletId
} = opt
const tunnel = this.tunnels[tunnelId]
const bullet = tunnel.bullets[bulletId]
bullet.paused = !bullet.paused
},
// 初始化弹幕组件数据
getBarrageInstance(opt) {
for (let key in opt) {
this[key] = opt[key]
}
const query = uni.createSelectorQuery().in(this)
query.select('.barrage-area').boundingClientRect((res) => {
res = res || {}
let systemInfo = uni.getSystemInfoSync()
this.systemInfo = systemInfo || {}
this.width = res.width || systemInfo.windowWidth
this.height = res.height || 80
this.init()
this.open()
this.addData(this.danmuList)
}).exec()
},
onAnimationend(e) {
const {
tunnelid,
bulletid
} = e.currentTarget.dataset
this.animationend({
tunnelId: tunnelid,
bulletId: bulletid
})
},
onTapBullet(e) {
const {
tunnelid,
bulletid
} = e.currentTarget.dataset
this.tapBullet({
tunnelId: tunnelid,
bulletId: bulletid
})
},
// 获取字节长度，中文算2个字节
getStrLen(str) {
// eslint-disable-next-line no-control-regex
return str.replace(/[^\x00-\xff]/g, 'aa').length
},
// 截取指定字节长度的子串
substring(str, n) {
if (!str) return ''
const len = this.getStrLen(str)
if (n >= len) return str
let l = 0
let result = ''
for (let i = 0; i < str.length; i++) {
const ch = str.charAt(i)
// eslint-disable-next-line no-control-regex
l = /[^\x00-\xff]/i.test(ch) ? l + 2 : l + 1
result += ch
if (l >= n) break
}
return result
},
getRandom(max = 10, min = 0) {
return Math.floor(Math.random() * (max - min) + min)
},
getFontSize(font) {
const reg = /(\d+)(px)/i
const match = font.match(reg)
return (match && match[1]) || 10
},
}
}
</script>
<style scoped>
.barrage-area {
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: auto;
overflow-x: hidden;
}
.barrage-tunnel {
box-sizing: border-box;
position: relative;
display: flex;
align-items: center;
border-top: 1px solid #CCB24D;
width: 100%;
margin-bottom: 30rpx;
}
.tunnel-tips {
display: inline-block;
margin-left: 60px;
}
.bullet-item {
position: absolute;
display: flex;
align-items: center;
top: 0;
left: 100%;
white-space: nowrap;
background: rgba(0, 0, 0, 0.3);
border-radius: 80rpx;
padding: 0 20rpx 0 0;
}
.bullet-item.paused {
background: #000;
opacity: 0.6;
padding: 0 10px;
z-index: 2;
}
.bullet-item_img {
max-height: 100%;
border-radius: 50%;
border: 2px solid #FFFFFF;
}
.bullet-item_text {
display: inline-block;
margin: 0;
}
.bullet-move {
animation: 0s linear slidein
}
@keyframes slidein {
0% {
transform: translate3d(0, 0, 0)
}
100% {
transform: translate3d(-1500px, 0, 0)
}
}
</style>
