GSAP动画库的基本使用

GSAP是什么？

GSAP 是一个强大的 JavaScript 工具集，可以将开发人员变成动画超级英雄。构建适用于所有主流浏览器的高性能动画。动画化 CSS、SVG、画布、React、Vue、WebGL、颜色、字符串、运动路径、通用对象……任何 JavaScript 可以触及的东西！ GSAP 的 ScrollTrigger 插件可让您使用最少的代码创建令人惊叹的基于滚动的动画。（来自官网）

引入GASP库

1. npm下载

npm install gsap

2. 在文件中引入

import { gsap } from "gsap";

gsap.to()

gsap.to()这个api里面有三个参数可以写，gsap.to("你的目标target", { 你所要做出的动作}, "提前时间或滞后时间")。gsap.to()其实就是将你所要操作的元素到你所指定的位置。

封装一个gsap组件

实现：加载组件的时候让数字从0-1以逐步递增的动画展示

<template>
  <div>{{ tweened.number.toFixed(0) }}</div>
</template>

<script setup lang="ts">
import gsap from 'gsap'
import { reactive } from 'vue'

const props = withDefaults(
  defineProps<{
    from: number
    to: number
    duration?: number
  }>(),
  {
    from: 0,
    to: 0,
    duration: 1,
  },
)

const tweened = reactive({
  number: props.from,
})

gsap.to(tweened, {
  duration: props.duration,
  ease: 'power1.out',
  number: props.to.toFixed(0),
})
</script>

<style scoped></style>

父组件中使用

<GsapNumber
        :to="count"
        :from="0"
        :duration="1"
        class="count"
      >
</GsapNumber>

实现效果