实现思路:
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>
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容