|
|
@@ -0,0 +1,373 @@
|
|
|
+<template>
|
|
|
+ <view class="danmaku-container" :style="{ height: height + 'px' }">
|
|
|
+ <view class="danmaku-stage">
|
|
|
+ <view
|
|
|
+ v-for="item in visibleDanmakus"
|
|
|
+ :key="item.id"
|
|
|
+ class="danmaku-item"
|
|
|
+ :class="[`danmaku-track`, { 'danmaku-scrolling': item.isScrolling }]"
|
|
|
+ :style="getDanmakuStyle(item)"
|
|
|
+ >
|
|
|
+ <view class="danmaku-content">
|
|
|
+ <image class="danmaku-avatar" :src="item.avatar || defaultAvatar" mode="aspectFill"></image>
|
|
|
+ <view class="danmaku-text">{{ item.text }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ danmakuList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ height: {
|
|
|
+ type: Number,
|
|
|
+ default: 200
|
|
|
+ },
|
|
|
+ infinite: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ speed: {
|
|
|
+ type: Number,
|
|
|
+ default: 100
|
|
|
+ },
|
|
|
+ trackCount: {
|
|
|
+ type: Number,
|
|
|
+ default: 8
|
|
|
+ },
|
|
|
+ spacing: {
|
|
|
+ type: Number,
|
|
|
+ default: 20
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const emit = defineEmits(['danmakuComplete'])
|
|
|
+
|
|
|
+const visibleDanmakus = ref([])
|
|
|
+const animationTimer = ref(null)
|
|
|
+const danmakuIdCounter = ref(0)
|
|
|
+const trackOccupancy = ref(new Array(props.trackCount).fill(0)) // 记录每个轨道的占用情况
|
|
|
+
|
|
|
+const trackHeight = computed(() => props.height / props.trackCount)
|
|
|
+
|
|
|
+// 默认头像
|
|
|
+const defaultAvatar = 'https://birdseye-img.sysuimars.com/youwei-uniapp/img/default-avatar.png'
|
|
|
+
|
|
|
+const getDanmakuStyle = (danmaku) => {
|
|
|
+ // 获取屏幕宽度，兼容不同平台
|
|
|
+ const screenWidth = uni.getSystemInfoSync().screenWidth || 375
|
|
|
+ // 增加更多的额外距离确保弹幕完全离开可视范围
|
|
|
+ const extraDistance = 200 // 增加缓冲距离
|
|
|
+ const duration = (screenWidth + danmaku.width + extraDistance) / props.speed
|
|
|
+ const trackSpacing = calculateTrackSpacing()
|
|
|
+ const danmakuHeight = calculateDanmakuHeight()
|
|
|
+
|
|
|
+ // 计算弹幕的垂直位置，确保在轨道中居中且不超出容器边界
|
|
|
+ const trackTop = danmaku.track * trackSpacing
|
|
|
+ const centerOffset = trackSpacing / 2
|
|
|
+ const topPosition = Math.max(
|
|
|
+ danmakuHeight / 2, // 确保不超出顶部
|
|
|
+ Math.min(
|
|
|
+ trackTop + centerOffset, // 轨道中心位置
|
|
|
+ props.height - danmakuHeight / 2 // 确保不超出底部
|
|
|
+ )
|
|
|
+ )
|
|
|
+
|
|
|
+ return {
|
|
|
+ top: `${topPosition}px`,
|
|
|
+ left: `${danmaku.left}px`,
|
|
|
+ transition: `left ${duration}s linear`
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 计算弹幕实际宽度
|
|
|
+const calculateDanmakuWidth = (text) => {
|
|
|
+ // 更精确的宽度计算：每个字符约16px，头像32px，内边距40px，额外缓冲20px
|
|
|
+ return text.length * 16 + 32 + 40 + 20
|
|
|
+}
|
|
|
+
|
|
|
+// 计算弹幕实际高度
|
|
|
+const calculateDanmakuHeight = () => {
|
|
|
+ return 48 // 弹幕高度约48rpx
|
|
|
+}
|
|
|
+
|
|
|
+// 计算轨道间距
|
|
|
+const calculateTrackSpacing = () => {
|
|
|
+ const danmakuHeight = calculateDanmakuHeight()
|
|
|
+ const trackHeight = props.height / props.trackCount
|
|
|
+ // 对于低高度容器，增加轨道间距避免叠加
|
|
|
+ const minSpacing = props.height < 150 ? danmakuHeight + 20 : danmakuHeight + 10
|
|
|
+ return Math.max(minSpacing, trackHeight) // 确保轨道间距足够
|
|
|
+}
|
|
|
+
|
|
|
+// 查找可用轨道
|
|
|
+const findAvailableTrack = () => {
|
|
|
+ const screenWidth = uni.getSystemInfoSync().screenWidth || 375
|
|
|
+ const currentTime = Date.now()
|
|
|
+ const danmakuHeight = calculateDanmakuHeight()
|
|
|
+ const trackSpacing = calculateTrackSpacing()
|
|
|
+
|
|
|
+ // 清理过期的轨道占用记录
|
|
|
+ for (let i = 0; i < trackOccupancy.value.length; i++) {
|
|
|
+ if (trackOccupancy.value[i] < currentTime) {
|
|
|
+ trackOccupancy.value[i] = 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 计算可用的轨道数量，确保弹幕不会超出容器边界
|
|
|
+ const maxTracks = Math.floor((props.height - danmakuHeight) / trackSpacing) + 1
|
|
|
+ const availableTracks = Math.min(props.trackCount, maxTracks)
|
|
|
+
|
|
|
+ // 对于低高度容器，减少可用轨道数量避免叠加
|
|
|
+ const finalTracks = props.height < 150 ? Math.min(availableTracks, 3) : availableTracks
|
|
|
+
|
|
|
+ // 首先尝试寻找完全空闲的轨道
|
|
|
+ for (let i = 0; i < finalTracks; i++) {
|
|
|
+ if (trackOccupancy.value[i] === 0) {
|
|
|
+ // 检查相邻轨道是否被占用
|
|
|
+ const prevTrack = i > 0 ? trackOccupancy.value[i - 1] : 0
|
|
|
+ const nextTrack = i < finalTracks - 1 ? trackOccupancy.value[i + 1] : 0
|
|
|
+
|
|
|
+ // 优先选择完全空闲的轨道
|
|
|
+ if (prevTrack === 0 && nextTrack === 0) {
|
|
|
+ return i
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果没有完全空闲的轨道，寻找任何空闲轨道
|
|
|
+ for (let i = 0; i < finalTracks; i++) {
|
|
|
+ if (trackOccupancy.value[i] === 0) {
|
|
|
+ return i
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果所有轨道都被占用，选择最早释放的轨道
|
|
|
+ let earliestTrack = 0
|
|
|
+ let earliestTime = trackOccupancy.value[0]
|
|
|
+ for (let i = 1; i < finalTracks; i++) {
|
|
|
+ if (trackOccupancy.value[i] < earliestTime) {
|
|
|
+ earliestTime = trackOccupancy.value[i]
|
|
|
+ earliestTrack = i
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return earliestTrack
|
|
|
+}
|
|
|
+
|
|
|
+const createDanmaku = (text, avatar = null) => {
|
|
|
+ const id = ++danmakuIdCounter.value
|
|
|
+ const track = findAvailableTrack()
|
|
|
+
|
|
|
+ const width = calculateDanmakuWidth(text)
|
|
|
+ // 获取屏幕宽度，兼容不同平台
|
|
|
+ const screenWidth = uni.getSystemInfoSync().screenWidth || 375
|
|
|
+ const left = screenWidth + props.spacing
|
|
|
+
|
|
|
+ // 计算弹幕持续时间并记录轨道占用，增加缓冲时间
|
|
|
+ const extraDistance = 200
|
|
|
+ const duration = (screenWidth + width + extraDistance) / props.speed
|
|
|
+ const endTime = Date.now() + duration * 1000
|
|
|
+ trackOccupancy.value[track] = endTime
|
|
|
+
|
|
|
+ return {
|
|
|
+ id,
|
|
|
+ text,
|
|
|
+ avatar,
|
|
|
+ track,
|
|
|
+ width,
|
|
|
+ left,
|
|
|
+ isScrolling: false,
|
|
|
+ startTime: Date.now()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const addDanmaku = (text, avatar = null) => {
|
|
|
+ const danmaku = createDanmaku(text, avatar)
|
|
|
+
|
|
|
+ visibleDanmakus.value.push(danmaku)
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ danmaku.isScrolling = true
|
|
|
+ // 确保弹幕完全离开可视范围才消失，增加更多缓冲距离
|
|
|
+ danmaku.left = -(danmaku.width + 100)
|
|
|
+ }, 50)
|
|
|
+
|
|
|
+ // 获取屏幕宽度，兼容不同平台
|
|
|
+ const screenWidth = uni.getSystemInfoSync().screenWidth || 375
|
|
|
+ // 增加更多的额外距离确保弹幕完全离开可视范围
|
|
|
+ const extraDistance = 200 // 增加缓冲距离
|
|
|
+ const duration = (screenWidth + danmaku.width + extraDistance) / props.speed
|
|
|
+ setTimeout(() => {
|
|
|
+ removeDanmaku(danmaku.id)
|
|
|
+ }, duration * 1000)
|
|
|
+}
|
|
|
+
|
|
|
+const removeDanmaku = (id) => {
|
|
|
+ const index = visibleDanmakus.value.findIndex(item => item.id === id)
|
|
|
+ if (index > -1) {
|
|
|
+ visibleDanmakus.value.splice(index, 1)
|
|
|
+ emit('danmakuComplete', id)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const clearDanmakus = () => {
|
|
|
+ visibleDanmakus.value = []
|
|
|
+ // 清空轨道占用记录
|
|
|
+ trackOccupancy.value = new Array(props.trackCount).fill(0)
|
|
|
+}
|
|
|
+
|
|
|
+const startDanmakuAnimation = () => {
|
|
|
+ if (props.danmakuList.length === 0) return
|
|
|
+
|
|
|
+ let currentIndex = 0
|
|
|
+
|
|
|
+ const playNext = () => {
|
|
|
+ if (currentIndex >= props.danmakuList.length) {
|
|
|
+ if (props.infinite) {
|
|
|
+ currentIndex = 0
|
|
|
+ } else {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const danmaku = props.danmakuList[currentIndex]
|
|
|
+ addDanmaku(danmaku.text, danmaku.avatar)
|
|
|
+ currentIndex++
|
|
|
+
|
|
|
+ // 根据容器高度动态调整间隔时间，低高度容器需要更大的间隔避免叠加
|
|
|
+ const baseInterval = props.height < 150 ?
|
|
|
+ Math.max(2000, props.height * 2) : // 低高度容器使用适中的基础间隔
|
|
|
+ Math.max(1500, props.height * 2) // 正常高度容器
|
|
|
+ const minInterval = baseInterval
|
|
|
+ const maxInterval = baseInterval + (props.height < 150 ? 2000 : 2000)
|
|
|
+ const interval = Math.random() * (maxInterval - minInterval) + minInterval
|
|
|
+ animationTimer.value = setTimeout(playNext, interval)
|
|
|
+ }
|
|
|
+
|
|
|
+ playNext()
|
|
|
+}
|
|
|
+
|
|
|
+const stopDanmakuAnimation = () => {
|
|
|
+ if (animationTimer.value) {
|
|
|
+ clearTimeout(animationTimer.value)
|
|
|
+ animationTimer.value = null
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+watch(() => props.danmakuList, (newList) => {
|
|
|
+ if (newList.length > 0) {
|
|
|
+ stopDanmakuAnimation()
|
|
|
+ clearDanmakus()
|
|
|
+ startDanmakuAnimation()
|
|
|
+ }
|
|
|
+}, { deep: true })
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ if (props.danmakuList.length > 0) {
|
|
|
+ startDanmakuAnimation()
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ stopDanmakuAnimation()
|
|
|
+})
|
|
|
+
|
|
|
+defineExpose({
|
|
|
+ addDanmaku,
|
|
|
+ clearDanmakus,
|
|
|
+ startDanmakuAnimation,
|
|
|
+ stopDanmakuAnimation
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.danmaku-container {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ // background: rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 8rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.danmaku-stage {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.danmaku-item {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 10;
|
|
|
+ pointer-events: none;
|
|
|
+
|
|
|
+ &.danmaku-scrolling {
|
|
|
+ transition: left linear;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 确保弹幕在轨道中居中显示
|
|
|
+ transform: translateY(-50%);
|
|
|
+}
|
|
|
+
|
|
|
+.danmaku-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 8rpx 20rpx;
|
|
|
+ backdrop-filter: blur(10rpx);
|
|
|
+ border: 1rpx solid rgba(255, 255, 255, 0.2);
|
|
|
+ // box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
|
|
|
+ width: fit-content;
|
|
|
+ min-width: 120rpx;
|
|
|
+ // 确保弹幕内容不会超出容器边界
|
|
|
+ max-height: 48rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ // 防止弹幕在滚动过程中高度变化
|
|
|
+ line-height: 1.2;
|
|
|
+ // 增加内边距确保文字有足够空间
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.danmaku-avatar {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 12rpx;
|
|
|
+ border: 2rpx solid rgba(255, 255, 255, 0.3);
|
|
|
+ flex-shrink: 0;
|
|
|
+ // 确保头像高度稳定
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.danmaku-text {
|
|
|
+ color: #000;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ // text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ max-width: 400rpx;
|
|
|
+ flex: 1;
|
|
|
+ // 确保文字高度稳定
|
|
|
+ line-height: 1.2;
|
|
|
+ height: 32rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ // 增加文字间距确保显示完整
|
|
|
+ letter-spacing: 1rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.danmaku-track .danmaku-content {
|
|
|
+ background: rgba(244, 246, 248, 0.6);
|
|
|
+}
|
|
|
+</style>
|
wangsisi