用途:该技能来自 GreenSock 官方 GSAP skills,聚焦 GSAP 时间线(timeline),适合构建多步骤动画、按顺序或并行协调多个 tween,以及处理关键帧式动画序列。相关技能:单个 tween 与缓动用 gsap-core;滚动驱动时间线用 gsap-scrolltrigger;React 用 gsap-react。
主要能力:用 gsap.timeline() 创建时间线,tween 默认依次追加。通过位置参数(第三个参数或 vars 中的 position)控制放置:绝对值 1 表示第 1 秒;相对值 "+=0.5"、"-=0.2";标签 "labelName"、"labelName+=0.3";"<" 表示与最近添加的动画同时开始,">" 表示在其结束后开始(默认),"<0.2" 表示在其开始后 0.2 秒。构造函数支持 defaults 让子 tween 继承 duration、ease;还支持 paused、repeat、yoyo、onComplete、onStart、onUpdate。用 addLabel() 添加标签,便于阅读与维护,并可用 play("outro") 或 tweenFromTo("intro","outro") 定位。时间线可嵌套,用 master.add(child, 0) 组合。播放控制包括 play()、pause()、reverse()、restart()、time(2)、progress(0.5)、kill()。
使用方式与最佳实践:优先用时间线而非 delay 串联;用位置参数和标签排布;把共享的 duration、ease 写入 defaults;ScrollTrigger 应放在时间线或顶层 tween 上,而非时间线内部的 tween。避免遗漏 defaults、混淆时间线 duration 与 tween duration(时间线时长由子动画决定)、以及在含 ScrollTrigger 的动画上做嵌套。官方文档链接见 https://github.com/greensock/gsap-skills。