前言

最近通过做vue3的项目让我了解到了gsap这个能让数字滚动的一个插件，那么笔者也是迫不及待的想分享给大家，毕竟这个效果看起来还是有些炫酷的，能够提升用户的体验感。

安装&使用

安装：

npm i gsap

使用

先撸为敬

<template>
  <div>{{ d.num.toFixed(0) }}</div>
</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 })

const AnimationToValue = () => {
  gsap.to(d, { duration: 0.5, num: props.value })
}

AnimationToValue()
watch(
  () => props.value,
  () => AnimationToValue()
)
</script>

<style lang="scss" scoped></style>

根据上述代码，使用大概分为👇🏻几个方面

1. 首先要在使用的页面中定义个子组件，传值为所要滚动的数值value
2. 编写子组件引入gsap，定义个响应式对象d，内部具有num属性
3. 定义滚动动画，使用gsap的to方法，从初始值滚动到传入的目标值，duration可以设置滚动时间
4. 监听value的变化去执行滚动方法
5. 使用toFixed()防止出现小数

实现效果