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

samate6666

于 2022-09-21 17:03:57 发布

阅读量3.5k

点赞数 4

文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/samate6666/article/details/126976338

版权

本文介绍了一种使用GSAP库实施数值动画的方法。通过定义初始值，并借助GSAP的to方法设置动画效果，实现了数值平滑过渡到目标值的过程。文章详细解释了如何监听值变化并更新动画，确保数值变化时动画能够实时调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现思路：
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>