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

🎯 简介

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">
    <div
      ref="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">
    <div
      ref="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">
      <path
        ref="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">
      <path
        ref="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">
      <!-- 运动路径 -->
      <path
        ref="pathRef"
        d="M 150 50 
           C 200 50, 250 100, 250 150
           C 250 200, 200 250, 150 250
           C 100 250, 50 200, 50 150
           C 50 100, 100 50, 150 50"
        fill="none"
        stroke="#ddd"
        stroke-width="2"
      />
      <!-- 移动的圆点 -->
      <circle
        ref="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>
  <div
    class="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">
      <h1
        ref="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>
  <div
    class="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-12 border border-gray-100 text-center"
    >
      <div
        ref="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>
      <div
        ref="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>
      <div
        ref="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>

🎉 总结

GSAP 让复杂的动画变得简单，让简单的动画变得精彩。无论是创建微交互、页面过渡，还是复杂的动画序列，GSAP 都能为您提供最佳的解决方案。

🎪 基础动画: 简单而强大的动画 API
🎮 交互动画: 拖拽、惯性等交互效果
🎨 SVG 动画: 路径绘制、形状变形、路径运动
📝 文本动画: 丰富的文字动效
⏱️ 时间线控制: 精确的动画序列编排

原文链接：https://code.ifrontend.net/archives/1130，转载请注明出处。

🎯 简介

✨ GSAP 的核心优势

📦 安装

🎪 基础动画 – 入门体验

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

🎨 DrawSVG 插件 – SVG 路径动画

🔄 MorphSVG 插件 – 形状变形动画

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

📝 TextPlugin 文本动画 – 文字动效

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

🎉 总结

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部

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

🎯 简介

✨ GSAP 的核心优势

📦 安装

🎪 基础动画 – 入门体验

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

🎨 DrawSVG 插件 – SVG 路径动画

🔄 MorphSVG 插件 – 形状变形动画

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

📝 TextPlugin 文本动画 – 文字动效

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

🎉 总结

猜你喜欢

Vite 插件 @vitejs/plugin-legacy 深度解析：旧浏览器兼容指南

Vite开发必备！一键生成二维码，移动端调试超简单

开源协作白板 – 轻量级多用户实时协作白板系统 – 支持多用户绘图、文字编辑、图片处理

Vue 组件自动导入神器 – unplugin-vue-components ，告别手动导入，让 Vue 开发更高效！

告别图标管理烦恼！vite-plugin-svg-spritemap 让 SVG 图标使用更简单

Vue项目样式穿透最佳实践：避免常见坑点，提升开发效率

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部