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>
|| 版权声明
作者:云言
链接:https://yyink.cn/archives/347.html
声明:如无特别声明本文即为原创文章仅代表个人观点,版权归《云言博客》所有,欢迎转载,转载请保留原文链接。
作者:云言
链接:https://yyink.cn/archives/347.html
声明:如无特别声明本文即为原创文章仅代表个人观点,版权归《云言博客》所有,欢迎转载,转载请保留原文链接。
THE END
0
二维码
海报
vue3使用gsap实现数字滚动效果
实现思路:
1、首先需要定义一个初始值,默认可以为0
2、定义滚动方法,gsap有一个to方法,第一个参数为初始值,第二个参数接收最终值和动画时间
3、监听最终……

共有 0 条评论