press-next/press-gp-popup-matching-process/use-animation.ts

Vue3 组件库，支持 Composition API

import { computed, ref, onMounted } from 'vue';

import { requestAnimationFrame } from 'press-ui/common/utils/system';
import { getScrollDurationAndWidth } from 'press-ui/press-notice-bar/core';


export function useAnimation({
  instance,
  speed,
  delay,
  durationEndCallback,
}: {
  instance: any;
  speed: number;
  delay: number;
  durationEndCallback: Function;
}) {
  const duration = ref(0);
  const contentWidth = ref(0);
  const wrapWidth = ref(0);

  const timer = ref();
  const translateX = ref(0);
  const animationDuration = ref(0);

  const animationStyle = computed(() => {
    const res = [
      `transform: translateX(${translateX.value}px);`,
      `transition: -webkit-transform ${animationDuration.value}ms linear ${delay}ms, transform ${animationDuration.value}ms linear ${delay}ms;`,
      'transform-origin: 50% 50% 0px;',
    ].join(' ');

    return res;
  });


  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();
      durationEndCallback?.();
    }, duration.value);
  };

  onMounted(() => {
    getScrollDurationAndWidth({
      contentSelect: '.press-matching__team-list-inner',
      wrapSelector: '.press-matching__team-list',
      context: instance?.proxy,
    }).then((res) => {
      const { wrapWidth: iWrapWidth, contentWidth: iContentWidth } = res;
      wrapWidth.value = iWrapWidth;
      contentWidth.value = iContentWidth;
      duration.value =  ((iContentWidth) / speed) * 1000;
      scroll();
    })
      .catch(() => {
      });
    scroll();
  });

  return {
    animationStyle,
  };
}