vue弹幕实现暂停

实现Vue弹幕暂停功能的方法

监听播放状态 通过v-model或props控制弹幕组件的播放状态，使用布尔值（如isPlaying）标记当前是否暂停。在弹幕移动逻辑中增加状态判断：

data() {
  return {
    isPlaying: true,
    animationFrameId: null
  }
}

暂停动画帧 在弹幕移动逻辑中使用requestAnimationFrame时，暂停需取消当前帧请求：

methods: {
  pause() {
    cancelAnimationFrame(this.animationFrameId);
    this.isPlaying = false;
  },
  play() {
    this.isPlaying = true;
    this.moveDanmaku();
  }
}

CSS动画控制 若使用CSS transition/animation实现运动，通过动态类名控制animation-play-state：

.danmaku-item {
  animation: move linear;
}
.danmaku-item.paused {
  animation-play-state: paused;
}

时间戳记录 记录暂停时的时间差，恢复播放时补偿偏移量：

let startTime;
function moveDanmaku(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsed = this.isPlaying ? timestamp - startTime : 0;
  // 应用elapsed计算位置
  this.animationFrameId = requestAnimationFrame(this.moveDanmaku);
}

组件封装建议 提供统一的控制接口，如：

<danmaku 
  :list="messages" 
  :paused="isPaused"
  @pause="handlePause"
/>

性能优化 对于大量弹幕实例，使用虚拟滚动技术，仅渲染可视区域内的弹幕，暂停时停止位置计算。