GpPopupMatchingProcess 匹配过程

# GpPopupMatchingProcess 匹配过程

# 引入

import PressGpPopupMatchingProcess from '@tencent/press-next/press-gp-popup-matching-process/press-gp-popup-matching-process';

# 代码演示

# 基础用法

# API

# Props

interface Props {
  buttonText?: string;
  initTime?: number;
  maxProgressingTime?: number;

  teamAvatarList?: Array<string>;
  joinType?: number;

  delay?: number;
  speed?: number;
}


const props = withDefaults(defineProps<Props>(), {
  buttonText: '',
  initTime: 0,
  maxProgressingTime: 5 * 60,

  teamAvatarList: () => ([]),
  joinType: 1,

  delay: 1,
  speed: 60,
});

# Events

const emits = defineEmits<{
  clickButton: [];
  clickWrap: [];
  onCountTimeOver: []
}>();

# 实现原理

采用了 notice-bar 类似的原理，根据 contentWidth、wrapWidth、speed 参数算出 duration，用于 transition 动画的持续时间，并得出 translateX。

duration 时间过后，重新调用 scroll 方法，改变 translateX 进行下一次滚动。

const scroll = () => {
  clearTimeout(timer.value);
  translateX.value = 0;
  animationDuration.value = 0;

  requestAnimationFrame(() => {
    translateX.value = -contentWidth.value + wrapWidth.value;
    animationDuration.value = duration.value;
  });
  timer.value = setTimeout(() => {
    scroll();
  }, duration.value);
};

与 notice-bar 不同的是，需要连续滚动，即不出现空白区域，所以：

translateX = -contentWidth + wrapWidth，即少走一部分路，notice-bar 中是 translateX = -contentWidth；
duration = (iContentWidth / speed) * 1000，即动画之间也相应减少，notice-bar 中是 duration = ((iContentWidth + iWrapWidth) / speed) * 1000；
scroll 方法重置 translateX 时，也始终设置为0，translateX = 0，notice-bar 中是 translateX = isInit ? 0 : wrapWidth.value；

横屏

← GpPopupMatchTime GpPopupOperating →