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

实现思路:

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

图片[1]-vue3使用gsap实现数字滚动效果-云言博客

安装插件:

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>

 

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!评论后一分钟后可见哦~~~
提交
头像

昵称

取消
昵称表情

    暂无评论内容