vue3使用gsap实现数字滚动效果

实现思路：

1、首先需要定义一个初始值，默认可以为0
2、定义滚动方法，gsap有一个to方法，第一个参数为初始值，第二个参数接收最终值和动画时间
3、监听最终值的变化，如果最终值被修改，则再次执行滚动方法
4、渲染出初始值，为了防止出现小数点，可以使用toFixed()
5、定义props接收父组件传递过来的最终值

安装插件：

npm i gsap

全局组件:

<template>
  {{d.num.toFixed()}}
</template>

<script setup>
import gsap from 'gsap'
import { reactive, watch } from 'vue'

const props = defineProps({
  value:{
    type:Number,
    default:0
  }
})

const d= reactive({
  num:0
})

function AnimateToValue(){
  gsap.to(d,{
    duration:0.5,
    num:props.value
  })
}
AnimateToValue()

watch(()=>props.value,()=>AnimateToValue())

</script>

<style>

</style>