GSAP时间轴(Timeline)实战：打造无缝衔接的Web交互动画

1. 为什么你的动画总感觉“卡卡的”？试试GSAP时间轴这个“交响乐指挥家”

你有没有遇到过这种情况？自己写的网页动画，单个看都挺流畅，但几个动画组合在一起，就感觉节奏不对，要么是动画之间衔接生硬，要么是元素动作打架，整体效果显得杂乱无章。这就像一支没有指挥的乐队，每个乐手都按自己的节拍演奏，结果可想而知。

在我刚接触Web动画时，也常常被这个问题困扰。直到我发现了GSAP的时间轴（Timeline）功能，才真正找到了解决之道。你可以把它想象成一位经验丰富的交响乐指挥家。一个复杂的网页动画，往往包含多个元素（比如背景、标题、按钮、图标）的协同运动。如果让每个元素自己独立播放动画，你很难精确控制它们谁先谁后、谁快谁慢、谁和谁的动作要有重叠。而时间轴，就是这位指挥家手中的总谱，它把每一个独立的动画片段（在GSAP里叫Tween）按照精确的时间点编排进一条统一的时间线里，让所有动画元素都能和谐共舞，最终呈现出无缝衔接、行云流水的视觉效果。

简单来说，GSAP时间轴就是一个管理多个动画的容器和调度器。它解决了复杂动画编排中最核心的问题：时序控制。你不用再手动计算“A动画开始2秒后，B动画再开始”这种绝对时间，而是可以通过相对关系、标签标记等更直观的方式来定义动画之间的顺序，大大提升了开发效率和动画的可维护性。接下来，我就带你从零开始，用几个实战案例，彻底掌握这个打造无缝交互动画的利器。

2. 从零搭建你的第一个时间轴动画

理论说再多，不如动手做一遍。我们先来创建一个最简单的场景，感受一下时间轴是如何工作的。假设我们有一个登录页面，希望实现这样的加载效果：背景色先淡入，然后Logo从上方落下并轻微弹跳，最后输入框从两侧滑入。

2.1 基础环境准备

首先，你需要引入GSAP库。最方便的方式是使用CDN。在你的HTML文件头部加入：

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

然后准备一下HTML结构：

<div class="login-container">
  <div class="background"></div>
  <div class="logo">MyApp</div>
  <div class="input-group">
    <input type="text" placeholder="用户名" class="input-field left">
    <input type="password" placeholder="密码" class="input-field right">
  </div>
</div>

加上一点基础的CSS让元素可见并定位：

.login-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.background {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: #f0f0f0;
  opacity: 0; /* 初始透明 */
}
.logo {
  position: absolute;
  top: -100px; /* 初始位置在屏幕上方 */
  left: 50%;
  transform: translateX(-50%);
  font-size: 3rem;
  font-weight: bold;
  color: #333;
}
.input-field {
  padding: 15px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  opacity: 0; /* 初始透明 */
}
.input-field.left { transform: translateX(-50px); } /* 初始偏左 */
.input-field.right { transform: translateX(50px); } /* 初始偏右 */

2.2 创建时间轴并添加第一个动画

现在，我们来编写JavaScript代码，创建时间轴并编排动画。第一步是创建一个时间轴实例：

// 创建一个GSAP时间轴
const loginTimeline = gsap.timeline();

这行代码创建了一个空的时间轴。默认情况下，它会自动播放，并且所有添加到其中的动画会按顺序一个接一个执行。但“按顺序”只是最基础的模式，时间轴的强大之处在于对时序的精细控制。

让我们添加第一个动画：让背景淡入。

// 将背景的透明度在1.5秒内从0变为1
loginTimeline.to('.background', {
  opacity: 1,
  duration: 1.5,
  ease: "power2.out" // 使用一个缓动函数，让变化更自然
});

这里的 .to() 方法是GSAP最常用的动画方法，意思是“让元素变化到某个状态”。我们把它直接链式调用在 loginTimeline 上，这个动画就会被添加到时间轴的末尾。由于这是第一个动画，它会在时间轴的0秒位置开始。

2.3 使用相对偏移量实现动画重叠

如果现在运行，你会发现背景淡入完成后，Logo才掉下来，这有点呆板。我们希望背景淡入到一半时，Logo就开始下落，形成一种交叠的、更连贯的感觉。这就需要用到偏移量（Offset）。

我们来添加Logo下落的动画，并让它相对于上一个动画（背景淡入）提前0.7秒开始：

loginTimeline.to('.logo', {
  y: 100, // 垂直方向移动100像