vue手写数字滚动

1、效果图

2、代码（我用的vue3写的，vue2其实也一个道理）

<template>
  <div class="nmber-animal">
    <div class="number">{
    
    {
    
     numAnimal }}</div>
  </div>
</template>

<script setup>
  import {
    
    
      ref,
      reactive,
      onMounted,
      onBeforeUnmount
  } from 'vue'
  let numAnimal = ref(396)
  
	const roll = (total, step) => {
    
    
		let n = 0;
		return function () {
    
    
			n = (n + step) >= total ? total : (n + step);
			if (n <= total) {
    
    
				numAnimal.value = n;
			}
		}
	}
	const start = (index, step, runtime = 1000) => {
    
    
		let rolling = roll(index, step)
		runtime = (runtime >= 300) ? runtime : 1000;
    	let timer = null
		for (let i = 0; i < (index/step); i++) {
    
    
			timer = setTimeout(rolling, (runtime/index)*i*step)
		}
		clearTimeout(timer);
	}
	start(numAnimal.value, 4)
</script>

<style lang="scss" scoped>
.nmber-animal {
    
    
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 200px;
  .number {
    
    
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px 50px;
    border: 1px solid #ccc;
    border-radius: 20px;
    box-shadow: 0 10px 8px rgba(0, 0, 0, .3);
    font-size: 24px;
    font-weight: bold;
  }
}
</style>