GSAP的Timeline可精确控制动画时序，通过位置参数实现串联、延迟、重叠；支持播放、暂停、倒放、跳转等交互控制，并可用标签提升复杂动画的可维护性。
GSAP（GreenSock Animation Platform）是目前最强大、灵活的 JavaScript 动画库之一，特别适合复杂动画的时间轴控制。它提供了精确的时间管理能力，让开发者可以轻松编排多个动画的播放顺序、延迟、重叠和同步。
时间轴基础：Timeline 的作用
GSAP 的 Timeline 是核心功能之一，允许你把多个动画串联或并行排列在一条时间线上，像视频剪辑一样控制整体节奏。
创建一个基础时间轴非常简单：
const tl = gsap.timeline();
<p>tl.to(".box", { x: 100, duration: 1 })
.to(".circle", { y: 50, duration: 0.5 })
.from(".text", { opacity: 0, duration: 0.8 });</p>上面代码中，每个动画默认按添加顺序依次执行。第一个动完，第二个才开始。
立即学习“Java免费学习笔记（深入）”；
控制动画时间点与位置参数
Timeline 最强大的地方在于你可以精确控制每个动画的起始时间。这通过向方法传入 位置参数 实现。
- 相对时间：不传参数则紧接上一个动画
-
具体时间（秒）：如
"+=1"表示上一个动画结束后等1秒再开始 -
绝对时间点：如
2表示从时间线开始后第2秒启动 -
重叠动画：使用
"<0.5"可让当前动画比前一个提前0.5秒开始
示例：
tl.to(".box", { x: 100, duration: 1 })
.to(".circle", { rotation: 360, duration: 1 }, "+=0.5") // 延迟0.5秒
.to(".text", { scale: 1.5, duration: 0.8 }, "2"); // 在第2秒开始
常用时间轴控制方法
GSAP 提供了丰富的 API 来动态控制时间线的播放状态：
-
tl.play()- 播放时间线 -
tl.pause()- 暂停 -
tl.reverse()- 反向播放（倒带） -
tl.seek(1.5)- 跳转到第1.5秒 -
tl.timeScale(2)- 设置播放速度为2倍速 -
tl.restart()- 重新开始
这些方法让你能实现交互式动画，比如鼠标悬停加速、点击倒放等效果。
标签与命名位置提升可维护性
对于复杂的动画流程，可以使用 标签（labels） 标记关键时间点，提高代码可读性。
tl.to(".box", { x: 100, duration: 1 })
.add("startSpin", "+=0.5")
.to(".box", { rotation: 360, duration: 1 }, "startSpin")
.to(".text", { opacity: 1, duration: 0.5 }, "startSpin+=0.2");
这样你可以用语义化名称来组织动画，而不是依赖绝对时间计算。
基本上就这些。掌握 Timeline 的时间控制逻辑，就能高效构建流畅、精准的交互动画序列。GSAP 的设计让复杂动画变得结构清晰，值得深入使用。
