GSAP的Timeline可精确控制动画时序，通过位置参数实现串联、延迟、重叠；支持播放、暂停、倒放、跳转等交互控制，并可用标签提升复杂动画的可维护性。
GSAP（GreenSock Animation Platform）是目前最强大、灵活的 JavaScript 动画库之一，特别适合复杂动画的时间轴控制。它提供了精确的时间管理能力，让开发者可以轻松编排多个动画的播放顺序、延迟、重叠和同步。
时间轴基础：Timeline 的作用
GSAP 的 Timeline 是核心功能之一，允许你把多个动画串联或并行排列在一条时间线上，像视频剪辑一样控制整体节奏。
创建一个基础时间轴非常简单：
const tl = gsap.timeline();tl.to(".box", { x: 100, duration: 1 }) .to(".circle", { y: 50, duration: 0.5 }) .from(".text", { opacity: 0, duration: 0.8 });
上面代码中，每个动画默认按添加顺序依次执行。第一个动完，第二个才开始。
立即学习“Java免费学习笔记（深入）”；
控制动画时间点与位置参数
Timeline 最强大的地方在于你可以精确控制每个动画的起始时间。这通过向方法传入 位置参数 实现。
- 相对时间：不传参数则紧接上一个动画
-
具体时间（秒）：如
"+=1"表示上一个动画结束后等1秒再开始 -
绝对时间点：如
2表示从时间线开始后第2秒启动 -
重叠动画：使用
" 可让当前动画比前一个提前0.5秒开始
示例：
网站设计精美：前台页面全部采用DIV+CSS架构，设计严格规范，页面精美大气，布局合理。 管理操作方便：后台管理界面友好，使用方便，功能强大，系统安全，性能稳定。用户使用 全自动化控制，功能模块可扩展性强。 搜索引擎优化：经多位网络营销专家制定，严格按照搜索引擎规范进行优化，以致在最短 的时间内提升网站的曝光率。 企业办公应用：提拱相关的询盘/订单管理、业务管理、客户管理等企业常用办公基础应用 服
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 的设计让复杂动画变得结构清晰，值得深入使用。
