入门GSAP动画——一个简单的数字滚动动画

照常浏览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的感觉。