Vue使用VueUse构建一个支持暂停/重置的CountUp组件

// hooks/useCountUp.ts
import { ref, watch } from 'vue'
import { useRafFn } from '@vueuse/core'
interface UseCountUpOptions {
  startVal?: number    // 起始值，默认为 0
  endVal: number       // 结束值
  duration?: number    // 动画时长（毫秒），默认 1000
  autoplay?: boolean   // 是否自动开始，默认 true
}
export function useCountUp(options: UseCountUpOptions) {
  const {
    startVal = 0,
    endVal,
    duration = 1000,
    autoplay = true
  } = options
  const currentValue = ref(startVal)
  const isAnimating = ref(false)
  let startTime = 0
  let startValue = startVal
  let endValue = endVal
  let animDuration = duration
  // 核心动画循环
  const { pause, resume, isActive } = useRafFn(({ timestamp }) => {
    if (!startTime) startTime = timestamp
    const elapsed = timestamp - startTime
    let progress = Math.min(1, elapsed / animDuration)
    // 使用 easeOutCubic 缓动，让动画更自然
    const easeProgress = 1 - Math.pow(1 - progress, 3)
    const newVal = startValue + (endValue - startValue) * easeProgress
    currentValue.value = newVal
    if (progress >= 1) {
      currentValue.value = endValue
      pause()               // 动画结束，停止循环
      isAnimating.value = false
    }
  }, { immediate: false })
  // 开始动画（可指定新的结束值和时长）
  const start = (newEndVal?: number, newDuration?: number) => {
    if (newEndVal !== undefined) endValue = newEndVal
    if (newDuration !== undefined) animDuration = newDuration
    startValue = currentValue.value   // 从当前值开始
    startTime = 0
    isAnimating.value = true
    resume()
  }
  // 重置到起始值并停止动画
  const reset = () => {
    pause()
    isAnimating.value = false
    currentValue.value = startVal
    startTime = 0
  }
  // 自动开始
  if (autoplay) {
    start()
  }
  // 监听外部 endVal 变化，自动触发新动画
  watch(() => endVal, (newVal) => {
    if (!isAnimating.value) {
      start(newVal)
    } else {
      // 如果动画进行中，只更新目标值，不中断当前动画
      endValue = newVal
    }
  })
  return {
    value: currentValue,     // 当前动画值（响应式）
    isAnimating,             // 是否正在动画中
    start,                   // 开始/重新开始
    pause,                   // 暂停
    resume,                  // 恢复
    reset,                   // 重置
    isActive                 // useRafFn 内部状态
  }
}

<!-- CountUp.vue -->
<template>
  <span ref="el">{{ formattedValue }}</span>
</template>
<script setup lang="ts">
import { computed, watch } from 'vue'
import { useCountUp } from './hooks/useCountUp'
const props = withDefaults(defineProps<{
  endVal: number
  duration?: number
  decimalPlaces?: number
  autoplay?: boolean
  useGrouping?: boolean
  prefix?: string
  suffix?: string
}>(), {
  duration: 1000,
  decimalPlaces: 0,
  autoplay: true,
  useGrouping: false,
  prefix: '',
  suffix: ''
})
const emit = defineEmits<{
  (e: 'finished'): void
  (e: 'update:modelValue', value: number): void
}>()
const {
  value,
  isAnimating,
  start,
  pause,
  resume,
  reset
} = useCountUp({
  startVal: 0,
  endVal: props.endVal,
  duration: props.duration,
  autoplay: props.autoplay
})
// 格式化显示
const formattedValue = computed(() => {
  let num = value.value.toFixed(props.decimalPlaces)
  if (props.useGrouping) {
    num = num.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  }
  return `${props.prefix}${num}${props.suffix}`
})
// 动画结束时触发
watch(isAnimating, (val) => {
  if (!val) emit('finished')
})
// 支持 v-model
watch(value, (newVal) => {
  emit('update:modelValue', newVal)
})
// 暴露控制方法给父组件
defineExpose({
  start,
  pause,
  resume,
  reset,
  isAnimating
})
</script>

<template>
  <div>
    <CountUp
      ref="countUpRef"
      :endVal="target"
      :duration="2000"
      :decimalPlaces="0"
      @finished="onFinished"
    />
    <div style="margin-top: 16px; display: flex; gap: 8px;">
      <button @click="countUpRef?.start(9999, 1000)">跳到 9999 (1秒)</button>
      <button @click="countUpRef?.pause()">暂停</button>
      <button @click="countUpRef?.resume()">恢复</button>
      <button @click="countUpRef?.reset()">重置</button>
      <button @click="target = 5000">改变目标值为 5000</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import CountUp from './components/CountUp.vue'
const countUpRef = ref<InstanceType<typeof CountUp>>()
const target = ref(2025)
const onFinished = () => {
  console.log('动画完成')
}
</script>