用途:GSAP Animate 是核心动画编排技能,提供基础动画模式,并按动画类型分发到对应子技能。流程为 gsap-setup → gsap-animate → gsap-optimise → gsap-test,依赖 greensock/gsap-skills。框架生命周期与清理使用 gsap-frameworks,时间线 API 使用 gsap-timeline,本技能仅覆盖动画编排配方。
主要能力:按场景分发子技能,包括滚动显现与视差(gsap-scroll)、倾斜卡片与悬停拖拽(gsap-interact)、文字显现与解码(gsap-text)、SVG 路径绘制与形变(gsap-svg)、故障与跑马灯计数(gsap-vfx)、光标跟随与磁吸(gsap-cursor)、Canvas 粒子(gsap-canvas),以及高级整页组合(gsap-showcase)。也给出常见布局组合,如 Hero 用 gsap-text + gsap-scroll + gsap-vfx。
使用方式:每个补间应放入 gsap.context(),卸载时调用 ctx.revert() 清理补间、ScrollTrigger 并还原内联样式(不会移除 DOM 事件监听)。可复用的揭示组合需建立独立上下文。显现建议用 autoAlpha 替代 opacity;可抽取共享补间默认值;通过 gsap.matchMedia() 处理桌面、移动与 prefers-reduced-motion 等条件;时间线位置参数见 gsap-timeline;已注册效果可用 gsap.effects.reveal() 调用。
适用场景:需要滚动、交互、文字、SVG、特效、光标或 Canvas 动画的网页与组件实现。
限制:资料未提供具体安装命令、收费与价格信息;依赖 greensock/gsap-skills;ctx.revert() 不清理 DOM 事件监听;完整代码示例见所附 references/vue-examples.md。