GSAP (GreenSock Animation Platform) 动画库学习指南前言小编在学习动画时候发现这个G

前言

小编在学习动画时候发现这个Gsap动画，发现新大陆，最近也是免费开源了，里面拥有丰富的动画还有插件使用，非常适合动画需求的开发。

1. GSAP 是什么？

GSAP 是一个专业级 JavaScript 动画库，用于创建高性能、跨浏览器的动画效果。特点包括：

🚀 超高性能（优化浏览器渲染机制）
🌍 兼容 IE9+ 及所有现代浏览器
🧩 模块化设计（核心库 + 插件系统）
📜 支持 SVG、Canvas、WebGL、React 等
🕹️ 精准的时间轴控制

官网地址：greensock.com/gsap/

2. 核心概念 & 常用方法

核心模块

gsap：核心动画引擎
ScrollTrigger：滚动动画触发器
Draggable：拖拽交互
MorphSVG：SVG 变形动画

常用方法

方法	说明
`gsap.to()`	从当前状态动画到目标状态
`gsap.from()`	从指定状态动画到当前状态
`gsap.fromTo()`	自定义起始/结束状态
`gsap.timeline()`	创建序列化动画的时间轴
`gsap.easing`	缓动函数（如 Power4、Elastic 等）
`ScrollTrigger.create()`	创建滚动触发动画

3. 代码示例

基础动画

<!-- HTML -->
<div class="box"></div>

<!-- JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
  // 移动元素到 x: 500，旋转360度，持续2秒
  gsap.to(".box", {
    x: 500,
    rotation: 360,
    duration: 2,
    ease: "power2.inOut",
    repeat: -1,  // 无限循环
    yoyo: true   // 往返运动
  });
</script>

时间轴控制

const tl = gsap.timeline({ repeat: 3 });

tl.to(".box", { x: 100, duration: 1 })
  .to(".circle", { y: 200, scale: 1.5 }, "+=0.5") // 延迟0.5秒执行
  .from(".text", { opacity: 0 }, "-=0.2"); // 重叠0.2秒执行

滚动触发动画

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
  gsap.registerPlugin(ScrollTrigger);

  gsap.to(".hero", {
    scrollTrigger: {
      trigger: ".section",
      start: "top center",
      end: "bottom 50%",
      scrub: true // 滚动时实时更新动画
    },
    opacity: 0,
    y: -100
  });
</script>

SVG 变形

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/MorphSVGPlugin.min.js"></script>
<script>
  gsap.registerPlugin(MorphSVGPlugin);

  gsap.to("#circle", {
    duration: 2,
    morphSVG: "#star",  // 将圆形变形为星形
    repeat: -1,
    yoyo: true
  });
</script>

4. 学习路径建议

阶段1：基础

掌握 gsap.to() / from() / fromTo()
理解缓动函数（ease 参数）
学习时间轴（timeline）编排

阶段2：进阶

掌握 ScrollTrigger 滚动动画
学习 SVG 动画（MorphSVG、DrawSVG）
了解性能优化技巧

阶段3：实战

制作页面转场动画
实现复杂交互式动画
集成 React/Vue 框架

5. 官方资源推荐

提示：使用 npm install gsap 或 CDN 快速安装，通过 gsap.config() 进行全局配置

GSAP 核心方法详解与代码演示

1. `gsap.to()`

功能：将元素从当前状态动画到指定目标状态

参数说明：

gsap.to(target, {
  duration: 1,      // 动画时长（秒）
  x: 100,           // 水平位移
  opacity: 0.5,     // 透明度
  ease: "power2",   // 缓动函数
  delay: 0.5,       // 延迟执行
  onComplete: () => {} // 动画完成回调
})

示例代码：按钮点击动画

<button id="myBtn">Click Me</button>

<script>
document.getElementById('myBtn').addEventListener('click', () => {
  gsap.to("#myBtn", {
    duration: 0.3,
    y: -10,         // 向上移动
    scale: 1.1,     // 放大
    ease: "back.out(1.7)",
    yoyo: true,     // 返回原位置
    repeat: 1       // 重复1次
  });
});
</script>

2. `gsap.from()`

功能：从指定状态动画到元素当前状态（反向动画）

典型场景：

页面元素入场动画
初始隐藏元素逐渐显现

示例代码：卡片入场效果

<div class="card" style="opacity: 1; transform: translateY(0)"></div>

<script>
gsap.from(".card", {
  duration: 1.5,
  opacity: 0,         // 从完全透明到当前透明度
  y: 100,             // 从下方100px移动到当前位置
  rotation: -15,      // 初始旋转角度
  ease: "elastic.out(1, 0.3)"
});
</script>

3. `gsap.fromTo()`

功能：完全自定义起始和结束状态

优势：

精确控制动画起点和终点
避免元素初始样式干扰

示例代码：进度条加载

<div class="progress-bar"></div>

<script>
gsap.fromTo(".progress-bar", 
  { width: "0%" },   // 起始状态
  { 
    width: "100%",   // 结束状态
    duration: 3,
    ease: "power1.inOut",
    onUpdate: function() {
      console.log(this.progress()); // 输出动画进度
    }
  }
);
</script>

4. `gsap.timeline()`

功能：创建动画时间轴，管理多个动画的时序关系

核心方法：

.add() 添加动画
.addLabel() 添加时间标签
.seek() 跳转到指定时间

示例代码：序列动画

const tl = gsap.timeline({
  defaults: { duration: 0.8, ease: "power2.out" }
});

// 链式调用
tl.from(".header", { y: -100 })
  .from(".nav-item", { opacity: 0, stagger: 0.2 }, "-=0.3") // 重叠0.3秒
  .fromTo(".hero", 
    { scale: 0.8 }, 
    { scale: 1 },
    "+=0.5" // 前序动画结束后0.5秒执行
  )
  .addLabel("scene2")
  .from(".gallery-item", {
    x: (index) => index % 2 ? 100 : -100, // 交替方向进入
    stagger: 0.1
  }, "scene2");

5. `gsap.easing`

功能：控制动画运动曲线

常用缓动函数：

类型	效果
"linear"	匀速运动
"power1.inOut"	平滑加速/减速
"bounce.out"	弹性反弹效果
"circ.in"	圆形曲线加速
"back.inOut(1.7)"	过冲动画效果

自定义缓动示例：

// 创建自定义贝塞尔曲线
gsap.registerEase("myEase", 
  "M0,0 C0.12,0 0.25,1 1,1"
);

gsap.to(".element", {
  x: 500,
  ease: "myEase",
  duration: 2
});

6. `ScrollTrigger.create()`

功能：创建滚动驱动的动画触发器

配置选项：

ScrollTrigger.create({
  trigger: ".element",    // 触发元素
  start: "top center",    // 开始位置
  end: "bottom top",      // 结束位置
  markers: true,          // 显示调试标记
  toggleActions: "play pause resume pause", // 滚动行为
  scrub: 1                // 动画跟随滚动（秒）
});

完整示例：视差滚动

<div class="parallax-section"></div>

<script>
gsap.registerPlugin(ScrollTrigger);

gsap.to(".parallax-section", {
  scrollTrigger: {
    trigger: ".parallax-section",
    start: "top bottom",
    end: "bottom top",
    scrub: true
  },
  y: "-30%",       // 产生视差滚动效果
  ease: "none"
});
</script>

最佳实践提示

性能优化：

.animated-element {
  will-change: transform, opacity; /* 提示浏览器优化 */
}

链式动画使用时间轴代替setTimeout
使用stagger属性处理多个元素的延迟动画
通过gsap.matchMedia()实现响应式动画

销毁不需要的ScrollTrigger实例：

ScrollTrigger.getAll().forEach(t => t.kill());

GSAP (GreenSock Animation Platform) 动画库学习指南

前言