照常浏览vuejs官网,在动画这一章节,看到基于侦听器的动画
基于侦听器的动画
通过发挥一些创意,我们可以基于一些数字状态,配合侦听器给任何东西加上动画。例如,我们可以将数字本身变成动画:
刚好我也在看vue-count-to组件,貌似Vue3不能用了。不过既然有GSAP,写动画还不是手到擒来,跟着文档随手写一个数字滚动动画
数字滚动动画
组件代码
GSAP官网说它可以操作任何Javascript可以操作的内容,一般的例子多是操作dom元素,此处我们操作js的变量tweened,改变其上的属性number,来实现数字动画,代码非常简单。
注意:toFixed()必须要加上,要不数字会出现小数,不信你可以试试~
<div>
<p class="text-2xl font-bold">{{ tweened.number.toFixed(0) }}</p>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import gsap from 'gsap'
const props = defineProps<{
from: number
to: number
}>()
let tweened = reactive({
number: props.from
})
gsap.to(tweened, { duration: 2, 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的感觉。
原文链接:https://juejin.cn/post/7239990044333064253 作者:抹茶san