vue3数字翻牌效果

效果

先看效果（稍微等几秒）

实现

步骤一

src/components下新建CountTo/index.vue

<template>
  <span :style="{ color, fontWeight, fontSize }">
    {{ value }}
  </span>
</template>
<script lang="ts">
import { isNumber } from '/@/utils/is'

const props = {
  startVal: { type: Number, default: 0 },
  endVal: { type: Number, default: 2021 },
  duration: { type: Number, default: 1500 },
  autoplay: { type: Boolean, default: true },
  decimals: {
    type: Number,
    default: 0,
    validator(value: number) {
      return value >= 0
    }
  },
  prefix: { type: String, default: '' },
  suffix: { type: String, default: '' },
  separator: { type: String, default: ',' },
  decimal: { type: String, default: '.' },
  /**
   * font color
   */
  color: {
		type: String,
		default: '#161840'
	},
	fontWeight: {
		type: String,
		default: 'bold'
	},
	fontSize: {
		type: String,
		default: '18px'
	},
  /**
   * Turn on digital animation
   */
  useEasing: { type: Boolean, default: true },
  /**
   * Digital animation
   */
  transition: { type: String, default: 'linear' }
}

export default defineComponent({
  name: 'CountTo',
  props,
  emits: ['onStarted', 'onFinished'],
  setup(props, { emit }) {
		function useTransition(source, options = {}) {
			const { disabled = ref(false), duration = 1500, onFinished, onStarted } = options
			const outputValue = ref(source.value)

			watch(source, (newValue) => {
				if (!disabled.value) {
					// 开始动画时调用 onStarted 回调
					onStarted && onStarted()

					// 创建过渡动画效果
					let startTime = Date.now()
					let initialValue = outputValue.value

					const step = () => {
						let elapsed = Date.now() - startTime
						if (elapsed < duration) {
							// 计算插值，根据缓动公式或线性公式平滑过渡
							outputValue.value = initialValue + (newValue - initialValue) * (elapsed / duration)
							requestAnimationFrame(step)  // 持续执行动画
						} else {
							// 动画结束，确保最终值是目标值
							outputValue.value = newValue
							// 动画结束时调用 onFinished 回调
							onFinished && onFinished()
						}
					}

					step()
				} else {
					outputValue.value = newValue
				}
			})

			return outputValue
		}



    const source = ref(props.startVal)
    const disabled = ref(false)




    let outputValue = useTransition(source)
    const value = computed(() => formatNumber(unref(outputValue)))

    /**
     * watchEffect 也是一个帧听器，是一个副作用函数。 它会监听引用数据类型的所有属性，不需要具体到某个属性，一旦运行就会立即监听
     * watchEffect 在响应数据初始化时就会立即执行回调函数。
     */
    watchEffect(() => {
      source.value = props.startVal
    })

    /**
     * watch 还可以监听数组，前提是这个数组内部含有响应式数据
     * watch 在响应数据初始化时是不会执行回调函数的
     */
    watch([() => props.startVal, () => props.endVal], () => {
      if (props.autoplay) {
        start()
      }
    })

    onMounted(() => {
      props.autoplay && start()
    })

    function start() {
      run()
      source.value = props.endVal
    }

    function reset() {
      source.value = props.startVal
      run()
    }

    function run() {
      outputValue = useTransition(source, {
        disabled,
        duration: props.duration,
        onFinished: () => emit('onFinished'),
        onStarted: () => emit('onStarted')
      })
    }

    /**
     * 将数字转化为千位分隔符的形式
     * @param num
     */
    function formatNumber(num: number | string) {
      if (!num && num !== 0) {
        return ''
      }
      const { decimals, decimal, separator, suffix, prefix } = props

      num = Number(num).toFixed(decimals)
      num += ''

      const x = num.split('.')
      let x1 = x[0]
      const x2 = x.length > 1 ? decimal + x[1] : ''

      const rgx = /(\d+)(\d{3})/
      if (separator && !isNumber(separator)) {
        while (rgx.test(x1)) {
          x1 = x1.replace(rgx, '$1' + separator + '$2')
        }
      }
      return prefix + x1 + x2 + suffix
    }

    return { value, start, reset }
  }
})
</script>

步骤二

src/utils下新建is.ts

const toString = Object.prototype.toString

export function is(val: unknown, type: string) {
  return toString.call(val) === `[object ${type}]`
}

export function isDef<T = unknown>(val?: T): val is T {
  return typeof val !== 'undefined'
}

export function isUnDef<T = unknown>(val?: T): val is T {
  return !isDef(val)
}

export function isObject(val: any): val is Record<any, any> {
  return val !== null && is(val, 'Object')
}

export function isEmpty<T = unknown>(val: T): val is T {
  if (isArray(val) || isString(val)) {
    return val.length === 0
  }

  if (val instanceof Map || val instanceof Set) {
    return val.size === 0
  }

  if (isObject(val)) {
    return Object.keys(val).length === 0
  }

  return false
}

export function isDate(val: unknown): val is Date {
  return is(val, 'Date')
}

export function isNull(val: unknown): val is null {
  return val === null
}

export function isNullAndUnDef(val: unknown): val is null | undefined {
  return isUnDef(val) && isNull(val)
}

export function isNullOrUnDef(val: unknown): val is null | undefined {
  return isUnDef(val) || isNull(val)
}

export function isNumber(val: unknown): val is number {
  return is(val, 'Number')
}

export function isPromise<T = any>(val: unknown): val is Promise<T> {
  return is(val, 'Promise') && isObject(val) && isFunction(val.then) && isFunction(val.catch)
}

export function isString(val: unknown): val is string {
  return is(val, 'String')
}

export function isFunction(val: unknown): val is Function {
  return typeof val === 'function'
}

export function isBoolean(val: unknown): val is boolean {
  return is(val, 'Boolean')
}

export function isRegExp(val: unknown): val is RegExp {
  return is(val, 'RegExp')
}

export function isArray(val: any): val is Array<any> {
  return val && Array.isArray(val)
}

export function isWindow(val: any): val is Window {
  return typeof window !== 'undefined' && is(val, 'Window')
}

export function isElement(val: unknown): val is Element {
  return isObject(val) && !!val.tagName
}

export function isMap(val: unknown): val is Map<any, any> {
  return is(val, 'Map')
}

export const isServer = typeof window === 'undefined'

export const isClient = !isServer

export function isUrl(path: string): boolean {
  const reg =
    /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/
  return reg.test(path)
}

使用

<template>
	<div class='cotainer'>
        <CountTo :startVal="0" :endVal="1000000" :fontSize='"20px"'/>
	</div>
</template>

<script setup lang='ts' name='Row1Left'>
const CountTo = defineAsyncComponent(() => import('/@/components/CountTo/index.vue'));
</script>