照常浏览vuejs官网，在动画这一章节，看到基于侦听器的动画
基于侦听器的动画
通过发挥一些创意，我们可以基于一些数字状态，配合侦听器给任何东西加上动画。例如，我们可以将数字本身变成动画：
官网给的Demo使用gsap做出了数字滚动动画，刚好我也在看vue-count-to组件，貌似Vue3不能用了。不过既然有GSAP，写动画还不是手到擒来，跟着文档随手写一个数字滚动动画
数字滚动动画
安装GSAP
npm install gsap
组件代码
GSAP官网说它可以操作任何Javascript可以操作的内容，一般的例子多是操作dom元素，此处我们操作js的变量tweened，改变其上的属性number，来实现数字动画，代码非常简单。
注意：toFixed()必须要加上，要不数字会出现小数，不信你可以试试～
<template>
<div>
{{ tweened.number.toFixed(0) }}
</div>
</template>
<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import gsap from 'gsap'
const props = withDefaults(
defineProps<{
from: number
to: number
duration?: number
}>(),
{
from: 0,
to: 0,
duration: 1
}
)
let tweened = reactive({
number: props.from
})
gsap.to(tweened, { duration: props.duration, ease: 'power1.out', number: props.to.toFixed(0) })
</script>
页面代码
<template>
<div class="grid grid-cols-4 gap-4 m-4">
<div class="bg-blue-500">
<GsapNumber :from="0" :to="290" />
</div>
<div class="bg-red-500">
<GsapNumber :from="0" :to="11456" />
</div>
<div class="bg-pink-500">
<GsapNumber :from="0" :to="367" />
</div>
<div class="bg-green-500">
<GsapNumber :from="0" :to="56789" />
</div>
<div class="bg-blue-500">
<GsapNumber :from="1230" :to="0" />
</div>
<div class="bg-red-500">
<GsapNumber :from="30" :to="0" />
</div>
<div class="bg-pink-500">
<GsapNumber :from="870" :to="0" />
</div>
<div class="bg-green-500">
<GsapNumber :from="3404" :to="0" />
</div>
</div>
</template>
<style scoped>
.grid > div {
display: inline-flex;
justify-content: center;
align-items: center;
height: 100px;
color: #fff;
}
</style>
OK，虽然我需要用到动画的地方很少，但还是按捺不住想继续学习GSAP，有点像多年前做Flash的感觉。
原文始发于微信公众号（自由前端之路）：入门GSAP动画——一个简单的数字滚动动画
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/258547.html
