以 skill 自身的术语
这是一个官方 GSAP skill,用于通过 gsap.timeline() 编排动画序列。它介绍了如何创建时间线并链式添加 tween(默认按顺序依次追加),然后使用 position 参数重新定位它们——包括绝对秒数、相对偏移「+=0.5」/「-=0.2」、标签,以及「<」/「>」定位方式。
它记录了时间线构造函数的选项(paused、repeat、yoyo、onComplete/onStart/onUpdate、defaults),介绍了用 addLabel() 添加标签、用 play()/tweenFromTo() 进行定位跳转,将子时间线嵌套进主时间线的方法,以及包括 restart、time、progress 和 kill 的播放控制方法。最后总结了 GSAP 的最佳实践和需要避免的陷阱,尤其是用 delay 进行链式调用以及在时间线内的 tween 上使用 ScrollTrigger。
它产出什么
- 一个保存在变量中的时间线对象,也就是每个示例中的 tl,链式添加的 tween 会加入其中,播放控制方法也作用于它。
- tweenFromTo 返回的一个新 Tween,它会在时间线暂停的状态下,让播放头在两个标签之间移动,且不使用 ease。
- 一个被 kill 的时间线:调用 kill() 会移除该时间线,默认情况下也会移除它的子项。
工作方式
- 01创建一个时间线并链式添加 tween
调用 gsap.timeline() 并链式调用 .to()。如果没有提供 position,每个 tween 都会在前一个结束后追加,因此顺序就是你书写的顺序。
- 02设置每个 tween 在时间线上的位置
位置由第三个参数或 vars 中的 position 属性决定:可以是绝对秒数、相对偏移、标签名称,或相对于最近添加的动画的 < 和 >。
- 03为时间线设置共享的默认值
传给时间线构造函数的 defaults 会合并进每个子 tween 中,因此 duration 和 ease 只需为整条序列声明一次。
- 04标记关键时刻
addLabel() 在时间轴上标记一个命名点,之后该标签可作为位置目标供后续 tween 使用,而不必使用原始数字。
- 05在主时间轴中嵌套子时间轴
主时间轴可以将一个子时间轴作为一个整体放置在某个时刻,此后再添加的 tween 都相对于它定位。
- 06一次性驱动整个序列
构建完成后,整个时间轴作为一个整体来播放和暂停,而不是逐个 tween 操作。