GSAP 动画引擎实战：打造丝滑动效交互组件库

本文链接：https://blog.csdn.net/idree/article/details/147409776

一、前言

在现代前端开发中，动画效果不仅是用户体验加分项，更是构建交互体验的关键。

相比 CSS 动画的局限，GSAP（GreenSock Animation Platform）具备：

更强的控制力（时间轴、多状态联动）
更平滑的性能（GPU 加速）
更丰富的插件支持（滚动触发、拖拽、3D 等）

本篇文章将带你从 0 到 1 构建一个基于 GSAP 的丝滑动效交互组件库，并通过 Vue 3 实战演示多个经典场景：元素入场、列表过渡、滚动触发、拖拽交互、打字动画等。

二、项目初始化

我们使用 Vite + Vue 3 快速启动项目，并安装 GSAP：

npm install gsap

基础目录结构如下：

📦src
 ┣ 📂components
 ┃ ┣ 📜FadeIn.vue
 ┃ ┣ 📜SlideList.vue
 ┃ ┣ 📜ScrollReveal.vue
 ┃ ┣ 📜DraggableBox.vue
 ┃ ┗ 📜Typewriter.vue
 ┣ 📜App.vue
 ┗ 📜main.js

三、核心动效组件实战

1. 元素淡入组件：`FadeIn.vue`

<script setup>
import { onMounted, ref } from 'vue'
import gsap from 'gsap'

const el = ref(null)
onMounted(() => {
  gsap.from(el.value, {
    opacity: 0,
    y: 30,
    duration: 1.2,
    ease: 'power2.out',
  })
})
</script>

<template>
  <div ref="el" class="p-4 bg-blue-100 rounded shadow">
    🚀 我是淡入动画内容
  </div>
</template>

2. 列表级联动画：`SlideList.vue`

<script setup>
import { onMounted, ref } from 'vue'
import gsap from 'gsap'

const list = ref(['Vue', 'React', 'Svelte', 'Solid'])

onMounted(() => {
  gsap.from('.list-item', {
    x: -30,
    opacity: 0,
    stagger: 0.2,
    duration: 0.8,
    ease: 'back.out(1.7)',
  })
})
</script>

<template>
  <ul>
    <li v-for="(item, i) in list" :key="i" class="list-item mb-2">
      {{ item }}
    </li>
  </ul>
</template>

3. 滚动触发 Reveal 动画：`ScrollReveal.vue`

<script setup>
import { onMounted, ref } from 'vue'
import gsap from 'gsap'
import ScrollTrigger from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

const el = ref(null)
onMounted(() => {
  gsap.from(el.value, {
    scrollTrigger: {
      trigger: el.value,
      start: 'top 80%',
    },
    opacity: 0,
    y: 50,
    duration: 1,
  })
})
</script>

<template>
  <div ref="el" class="mt-64 p-4 bg-green-100 rounded">
    🌿 我是滚动触发内容
  </div>
</template>

4. 拖拽盒子组件：`DraggableBox.vue`

<script setup>
import { onMounted, ref } from 'vue'
import gsap from 'gsap'
import Draggable from 'gsap/Draggable'

gsap.registerPlugin(Draggable)

const box = ref(null)

onMounted(() => {
  Draggable.create(box.value, {
    bounds: 'body',
    inertia: true,
    edgeResistance: 0.65,
    type: 'x,y',
  })
})
</script>

<template>
  <div ref="box" class="w-24 h-24 bg-pink-400 text-white flex items-center justify-center rounded cursor-move">
    拖我
  </div>
</template>

5. 打字机效果组件：`Typewriter.vue`

<script setup>
import { ref, onMounted } from 'vue'
import gsap from 'gsap'

const text = 'Hello, GSAP Typewriter!'
const display = ref('')

onMounted(() => {
  let i = 0
  const interval = setInterval(() => {
    if (i >= text.length) return clearInterval(interval)
    display.value += text[i++]
  }, 80)
})
</script>

<template>
  <div class="text-lg font-mono">{{ display }}</div>
</template>

四、拓展功能实现

1. ScrollTrigger 动态吸顶动效组件

<script setup>
import { onMounted, ref } from 'vue'
import gsap from 'gsap'
import ScrollTrigger from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

const bar = ref(null)

onMounted(() => {
  gsap.to(bar.value, {
    scrollTrigger: {
      trigger: bar.value,
      start: 'top top',
      toggleClass: 'fixed-bar',
      pin: true,
      pinSpacing: false,
    },
  })
})
</script>

<template>
  <div ref="bar" class="w-full bg-orange-400 p-3 text-white">
    我是吸顶条
  </div>
</template>

<style>
.fixed-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
</style>

2. 卡片 Flip 动画：布局变化动画

<script setup>
import { ref, watchEffect, nextTick } from 'vue'
import gsap from 'gsap'
import Flip from 'gsap/Flip'

gsap.registerPlugin(Flip)

const cards = ref(['A', 'B', 'C'])

function shuffle() {
  const state = Flip.getState('.flip-card')
  cards.value.reverse()
  nextTick(() => {
    Flip.from(state, { duration: 0.6, ease: 'power1.inOut', absolute: true })
  })
}
</script>

<template>
  <div class="flex gap-4 mb-4">
    <div v-for="c in cards" :key="c" class="flip-card w-16 h-16 bg-purple-300 text-white text-center leading-[4rem]">
      {{ c }}
    </div>
  </div>
  <button @click="shuffle" class="bg-purple-600 text-white px-3 py-1 rounded">打乱</button>
</template>

3. 路由转场动画（带 Timeline）

<script setup>
import { onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import gsap from 'gsap'

const route = useRoute()

watch(() => route.fullPath, () => {
  gsap.fromTo('main',
    { opacity: 0, y: 20 },
    { opacity: 1, y: 0, duration: 0.5 })
})
</script>

<template>
  <main class="transition-wrapper">
    <router-view></router-view>
  </main>
</template>

五、总结

我们基于 Vue 3 + GSAP 构建了一个动效组件库，包含：

核心动效组件（入场、滚动、拖拽、打字）
高级动效实现（吸顶、Flip、Timeline）
拓展功能以完整代码嵌入文章

到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多篇前端实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～
创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒：
转载请注明原文链接，商业合作请私信联系
感谢你的阅读！我们下篇文章再见～ 💕

在这里插入图片描述