SuperAPI AI 工具集

gsap-sequencing

设计与创作

查看项目

更新于 10-15 18:31

技能介绍

GSAP Sequencing 是针对 GSAP 复杂时间线与动画编排的技能,主要面向需要按时间顺序组织多步骤动画的场景,例如页面过渡、界面元素依次揭示、倒计时数字切换等。

主要能力包括:创建基础或带 defaults、paused 的时间线;顺序执行动画;使用绝对、相对位置参数以及标签控制动画起始时刻;通过 add、addLabel 与嵌套时间线组合子时间线,并支持模块化动画函数复用。位置参数涵盖 0、2、'+=0.5'、'-=0.5'、'<'、'>'、'<0.3'、'>-0.3'、'myLabel'、'myLabel+=0.5' 等写法。

时间线还支持生命周期回调(onStart、onUpdate、onComplete、onRepeat、onReverseComplete)和以 .call 添加的内联回调,可带参数。播放控制方法包括 play、pause、resume、reverse、restart、seek、progress、timeScale、reversed,以及 repeat、repeatDelay、yoyo 配置。

使用方式:通常先 import gsap,再通过 gsap.timeline() 创建时间线,链式调用 .to、.from、.fromTo、.set、.add、.addLabel、.call 构建序列。资料中提供了交错进入、拖拽进度条 scrubbing、条件分支、页面过渡、仪表盘揭示、倒计时和最终倒数等示例。

限制与调试:资料未说明具体版本要求、浏览器兼容性或性能边界。调试时可降低 timeScale 便于观察,使用 duration() 和 getChildren() 查看时间线信息,并提到 GSDevTools 为 premium plugin。相关技能引用包括 gsap-fundamentals、gsap-react、gsap-scrolltrigger。