JavaScript动画引擎_GSAP时间轴控制

紅蓮之龍 2025-11-23 00:00:00 次阅读

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 });

上面代码中，每个动画默认按添加顺序依次执行。第一个动完，第二个才开始。

控制动画时间点与位置参数

Timeline 最强大的地方在于你可以精确控制每个动画的起始时间。这通过向方法传入位置参数实现。

相对时间：不传参数则紧接上一个动画
具体时间（秒）：如 "+=1" 表示上一个动画结束后等1秒再开始
绝对时间点：如 2 表示从时间线开始后第2秒启动
重叠动画：使用 " 可让当前动画比前一个提前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 的设计让复杂动画变得结构清晰，值得深入使用。