🚀 GSAP 核心 API 快速指南与实战 Demo

GSAP (GreenSock Animation Platform) 是 Web 上最强大的动画库之一。掌握它的核心 API —— 补间 (Tweens) 和 时间轴 (Timelines) —— 是创建高性能、复杂动画的关键。

一、GSAP 核心概念：补间 (Tweens)

补间是 GSAP 动画的最小单位，负责元素属性从起始状态到最终状态的平滑过渡。

1. `gsap.to()`：过渡到指定状态（最常用）

作用： 从元素当前状态，动画过渡到指定的新状态。
适用场景： 按钮悬停效果、元素的移动等。

gsap.to(".box-1", {
  x: 200,             // 最终 X 轴位移 200px
  rotation: 180,      // 最终旋转 180 度
  duration: 1.5,      // 动画持续 1.5 秒
  ease: "power2.out"  // 缓动函数
});

2. `gsap.from()`：从指定状态开始过渡

作用： 元素从指定（隐藏/外部）状态开始，动画过渡到其 CSS 定义的默认状态。
适用场景： 页面元素加载（入场）动画。

gsap.from(".box-2", {
  opacity: 0,         // 从完全透明开始
  y: 50,              // 从 Y 轴下方 50px 开始
  duration: 1,
  delay: 0.5          // 延迟开始
});

3. `gsap.fromTo()`：精确控制起止状态

作用： 明确指定起始状态和最终状态。
适用场景： 元素状态的精确循环或复杂转换。

gsap.fromTo(".box-3",
  { scale: 0.5, opacity: 0 },    // 起始状态
  { scale: 1, opacity: 1, duration: 1 } // 最终状态
);

二、GSAP 核心精髓：时间轴 (Timelines)

时间轴 (gsap.timeline()) 是用来组织、序列化、同步多个补间的强大工具。它让复杂的动画变得有条理、易于控制。

1. 创建时间轴

const tl = gsap.timeline({
  // 配置时间轴默认值
  defaults: {
    duration: 0.6, // 所有补间默认持续 0.6 秒
    ease: "power1.inOut"
  }
});

2. 关键：位置参数 (Position Parameter)

位置参数是添加到时间轴方法（如 tl.to()）的最后一个可选参数，用于控制动画相对于前一个动画的开始时间。

参数值	含义	示例	描述
`tl.to(..., <数值>)`	绝对时间点	`tl.to(..., 1.0)`	在时间轴播放到 1.0 秒时开始。
`tl.to(..., "<")`	与前一个动画同时开始	`tl.to(..., "<")`	实现动画叠加。
`tl.to(..., "-=0.2")`	提前开始	`tl.to(..., "-=0.2")`	比前一个动画结束早 0.2 秒开始（重叠）。
`tl.to(..., "+=0.5")`	延迟开始	`tl.to(..., "+=0.5")`	比前一个动画结束晚 0.5 秒开始（间隔）。

🎨 实战 Demo：序列化入场动画

以下 Demo 展示了如何使用时间轴和位置参数，让三个方块按序入场，并让文本动画与最后一个方块的移动叠加同步。

HTML 结构 (`index.html`)

<style>
  .container {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    height: 150px;
  }
  .box {
    width: 50px;
    height: 50px;
    background-color: #007bff;
    border-radius: 8px;
    /* 初始设置为不可见，让 GSAP 控制入场 */
    opacity: 0; 
  }
  .title {
    font-size: 24px;
    color: #333;
    opacity: 0;
    margin-left: 30px;
  }
</style>

<div class="container">
  <div class="box box-a">A</div>
  <div class="box box-b">B</div>
  <div class="box box-c">C</div>
  <div class="title">GSAP 动画完成!</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

JavaScript 代码 (`app.js`)

// 1. 创建时间轴实例，并设置默认属性
const introTL = gsap.timeline({
  defaults: {
    duration: 0.4, // 所有动画默认持续 0.4s
    ease: "back.out(1.7)" // 使用回弹缓动效果
  },
  delay: 0.5 // 页面加载后延迟 0.5s 开始整个序列
});

// 2. 序列化动画（按顺序入场）
introTL
  // 步骤 1: 方块 A 从下方入场
  .fromTo(".box-a", 
    { y: 100, opacity: 0 }, 
    { y: 0, opacity: 1 }
  )

  // 步骤 2: 方块 B 紧接着方块 A 之后入场 (默认序列化)
  .fromTo(".box-b", 
    { y: 100, opacity: 0 }, 
    { y: 0, opacity: 1 }
  )

  // 步骤 3: 方块 C 紧接着方块 B 之后入场
  .fromTo(".box-c", 
    { y: 100, opacity: 0 }, 
    { y: 0, opacity: 1 }
  )

  // 步骤 4: 文本动画（同步叠加）
  // 让文本动画与前一个动画（方块 C 的入场）同时开始
  .to(".title", {
    opacity: 1,
    x: 0,
    ease: "power2.out"
  }, "<") // <-- 核心：使用 "<" 使其与前一个动画同时开始

  // 步骤 5: 最终效果（所有入场完成后）
  // 在所有动画完成后，让所有方块一起向上跳动
  .to(".box", {
    y: -15,
    repeat: 1, // 只跳动一次
    yoyo: true, // 来回（跳上去再下来）
    ease: "power1.inOut",
    duration: 0.2
  }, "+=0.3"); // <-- 在前一个动画（文本显示）完成后再延迟 0.3s 开始

运行结果

方块 A 入场。
方块 B 入场。
方块 C 入场，同时 “GSAP 动画完成!” 文本淡入显示。
所有动画完成后，方块整体短暂向上跳动一下。

这个 Demo 完美展示了如何通过 gsap.timeline() 和位置参数 ("<", "+=0.3") 来编排复杂的动画序列。