当前位置：首页 > news >正文

Vue3 + GSAP 动画库完全指南：从入门到精通，打造专业级网页动画

news 2025/9/3 9:55:20

🎯 简介

GSAP (GreenSock Animation Platform) 被誉为业界最强大的 JavaScript 动画库，在现代网页设计和开发中占据着无可替代的地位。它不仅提供了令人惊叹的性能表现，还拥有丰富的插件生态系统，让开发者能够轻松创建出专业级的动画效果。

✨ GSAP 的核心优势

🚀 极致性能: 60fps 流畅动画，CPU 占用率极低
🎨 丰富的动画属性: 支持几乎所有 CSS 属性的动画
🔧 强大的插件系统: DrawSVG、MorphSVG、MotionPath 等专业插件
📱 跨平台兼容: 完美支持现代浏览器和移动设备
⚡ 简单易用: 简洁的 API 设计，学习曲线平缓
🔄 时间线控制: 精确的动画序列编排能力

📦 安装

npm install gsap

🎪 基础动画 – 入门体验

让我们从一个简单但令人印象深刻的动画开始，体验 GSAP 的基础魅力：

<template><div class="w-full h-[500px] flex items-center justify-center"><divref="boxRef"class="w-32 h-32 bg-blue-500 rounded-lg cursor-pointer flex items-center justify-center text-white font-medium"@click="animate">点击我</div></div>
</template><script setup>
import { ref, onMounted } from "vue";
import { gsap } from "gsap";const boxRef = ref(null);const animate = () => {gsap.to(boxRef.value, {duration: 1,scale: 1.5,rotation: 360,ease: "power2.inOut",yoyo: true,repeat: 1,});
};onMounted(() => {// 组件挂载后的初始化动画gsap.from(boxRef.value, {duration: 1,opacity: 0,y: 50,ease: "power2.out",});
});
</script>

gsap.to(): 将元素动画到指定状态
gsap.from(): 从指定状态动画到当前状态
ease: 缓动函数，让动画更自然流畅
yoyo: 往返动画效果
repeat: 重复次数控制

🎮 Draggable 拖拽动画 – 交互体验升级

GSAP 的 Draggable 插件让拖拽交互变得简单而强大，支持触摸设备，性能卓越：

<template><div class="w-full h-[100vh] relative bg-gray-100"><divref="boxRef"class="absolute w-[160px] h-[160px] bg-blue-500 rounded-lg cursor-move flex items-center justify-center text-white":style="{left: '50%',top: '50%',transform: 'translate(-50%, -50%)',}">Drag Me<div class="text-sm mt-1">X: {{ Math.round(position.x) }} Y: {{ Math.round(position.y) }}</div></div></div>
</template><script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { gsap } from "gsap";
import { Draggable } from "gsap/Draggable";gsap.registerPlugin(Draggable);const boxRef = ref(null);
const position = ref({ x: 0, y: 0 });
let draggable = null;onMounted(() => {if (!boxRef.value) return;draggable = Draggable.create(boxRef.value, {type: "x,y",onDrag: function () {position.value = {x: this.x,y: this.y,};},onDragStart: function () {gsap.to(this.target, {scale: 1.1,duration: 0.2,});},onDragEnd: function () {gsap.to(this.target, {scale: 1,duration: 0.2,});},});
});onUnmounted(() => {if (draggable && draggable[0]) {draggable[0].kill();}
});
</script>

🎨 DrawSVG 插件 – SVG 路径动画

DrawSVG 插件让 SVG 路径绘制动画变得轻而易举，是创建复杂图形动画的利器：

<template><div class="min-h-screen flex items-center justify-center"><svg width="200" height="200" viewBox="0 0 100 100"><pathref="pathRef"d="M 10 10 L 90 10 L 90 90 L 10 90 Z"fill="none"stroke="#0ae448"stroke-width="2"/></svg></div>
</template><script setup>
import { ref, onMounted } from "vue";
import { gsap } from "gsap";
import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";gsap.registerPlugin(DrawSVGPlugin);const pathRef = ref(null);onMounted(() => {gsap.fromTo(pathRef.value,{drawSVG: "0%",},{drawSVG: "100%",duration: 2,ease: "power1.inOut",repeat: 0,yoyo: false,});
});
</script>

🔄 MorphSVG 插件 – 形状变形动画

MorphSVG 插件实现了令人惊叹的形状变形效果，让静态图形变得生动有趣：

<template><div class="w-full h-[300px] flex items-center justify-center"><svg width="200" height="200" viewBox="0 0 100 100"><pathref="shapeRef"d="M 50 0 C 50 0, 100 0, 100 50 C 100 50, 100 100, 50 100 C 50 100, 0 100, 0 50 C 0 50, 0 0, 50 0 Z"fill="#4CAF50"stroke="#2E7D32"stroke-width="2"/></svg></div>
</template><script setup>
import { ref, onMounted } from "vue";
import { gsap } from "gsap";
import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";gsap.registerPlugin(MorphSVGPlugin);const shapeRef = ref(null);onMounted(() => {const timeline = gsap.timeline({repeat: -1,yoyo: true,});const circlePath ="M 50 0 C 50 0, 100 0, 100 50 C 100 50, 100 100, 50 100 C 50 100, 0 100, 0 50 C 0 50, 0 0, 50 0 Z";const starPath ="M 50 0 C 50 0, 55 20, 61 35 C 61 35, 80 35, 98 35 C 98 35, 70 45, 68 57 C 68 57, 75 75, 79 91 C 79 91, 60 80, 50 70 C 50 70, 40 80, 21 91 C 21 91, 25 75, 32 57 C 32 57, 30 45, 2 35 C 2 35, 20 35, 39 35 C 39 35, 45 20, 50 0 Z";timeline.to(shapeRef.value, {duration: 3,morphSVG: starPath,ease: "power2.inOut",});timeline.to(shapeRef.value, {duration: 3,morphSVG: circlePath,ease: "power2.inOut",});
});
</script>

🛤️ MotionPath 插件 – 路径运动动画

MotionPath 插件让元素沿着复杂路径运动，为动画添加了无限的可能性：

<template><div class="w-full h-[300px] flex items-center justify-center"><svg width="300" height="300" viewBox="0 0 300 300"><!-- 运动路径 --><pathref="pathRef"d="M 150 50 C 200 50, 250 100, 250 150C 250 200, 200 250, 150 250C 100 250, 50 200, 50 150C 50 100, 100 50, 150 50"fill="none"stroke="#ddd"stroke-width="2"/><!-- 移动的圆点 --><circleref="circleRef"r="8"fill="#FF69B4"stroke="#FF1493"stroke-width="2"/></svg></div>
</template><script setup>
import { ref, onMounted } from "vue";
import { gsap } from "gsap";
import { MotionPathPlugin } from "gsap/MotionPathPlugin";gsap.registerPlugin(MotionPathPlugin);const circleRef = ref(null);
const pathRef = ref(null);onMounted(() => {const timeline = gsap.timeline({repeat: -1,yoyo: true,});timeline.to(circleRef.value, {duration: 3,motionPath: {path: pathRef.value,autoRotate: true,alignOrigin: [0.5, 0.5],curviness: 1,type: "cubic",resolution: 100,align: pathRef.value,},ease: "none",});
});
</script>

📝 TextPlugin 文本动画 – 文字动效

TextPlugin 让文字动画变得简单而强大，支持逐字、逐行等多种动画效果：

<template><divclass="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4"><div class="bg-white rounded-2xl shadow-2xl p-8 border border-gray-100"><h1ref="textRef"class="text-4xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">Hello World!</h1></div></div>
</template><script setup>
import { ref, onMounted } from "vue";
import { gsap } from "gsap";
import { TextPlugin } from "gsap/TextPlugin";gsap.registerPlugin(TextPlugin);const textRef = ref(null);onMounted(() => {gsap.to(textRef.value, {duration: 5,text: {value: "Welcome to GSAP!",delimiter: " ",newClass: "text-green-600",},});
});
</script>

⏱️ 时间线动画 – 复杂序列编排

GSAP 的时间线功能让复杂动画序列的编排变得简单而精确：

<template><divclass="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4"><divclass="bg-white rounded-2xl shadow-2xl p-12 border border-gray-100 text-center"><divref="timeline1"class="timeline-1 text-4xl font-bold mb-4 bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">Join our</div><divref="timeline2"class="timeline-2 text-4xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">growing</div><divref="timeline3"class="timeline-3 text-4xl font-bold bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">community</div></div></div>
</template><script setup>
import { ref, onMounted } from "vue";
import { gsap } from "gsap";const timeline1 = ref(null);
const timeline2 = ref(null);
const timeline3 = ref(null);onMounted(() => {gsap.set([timeline1.value, timeline2.value, timeline3.value], {opacity: 0,y: 30,scale: 0.8,});const tl = gsap.timeline({defaults: {duration: 1.2,ease: "back.out(1.7)",},});tl.to(timeline1.value, {opacity: 1,y: 0,scale: 1,}).to(timeline2.value,{opacity: 1,y: 0,scale: 1,},"-=0.8").to(timeline3.value,{opacity: 1,y: 0,scale: 1,},"-=0.8");
});
</script>