SuperAPI AI 工具集

gsap-animate

设计与创作

查看项目

更新于 10-15 22:38

技能介绍

用途:提供核心 GSAP 动画编排的生产级配方与基础模式,并依据动画类型分发到专门的子技能。流程为 gsap-setup → gsap-animate → gsap-optimise → gsap-test。框架生命周期与清理需调用 gsap-frameworks;时间线 API 需调用 gsap-timeline;本技能只覆盖动画编排配方。前置依赖:greensock/gsap-skills。

子技能分发:滚动显现、视差、固定区块、堆叠卡片对应 gsap-scroll;倾斜卡片、悬停、拖拽交互对应 gsap-interact;文字显现(SplitText)、乱码解码、动态字体对应 gsap-text;SVG 路径绘制、变形、电路板对应 gsap-svg;故障、跑马灯、计数器、漂浮元素对应 gsap-vfx;光标跟随、拖尾、磁吸、聚光对应 gsap-cursor;画布粒子系统与渲染对应 gsap-canvas;高级区块或整页合成使用 gsap-showcase(参考)加技术类子技能。

主要能力与用法要点:所有 tween 必须放在 gsap.context() 内,并用 ctx.revert() 清理(会终止 tween、ScrollTrigger 并还原内联样式,但不会移除 DOM 事件监听器);useReveal() 与交互动画共存时创建独立 context;显现优先使用 autoAlpha 而非 opacity;可定义共享 tween 默认值(如 HOVER_IN、HOVER_OUT);用 gsap.matchMedia() 实现无障碍,含 prefers-reduced-motion 分支,并在卸载时 mm.revert();可消费 gsap.effects.reveal。时间线位置参数见 gsap-timeline 技能。参考文件 references/vue-examples.md 提供完整组件实现(3D 倾斜卡片与 composable 共存、单 context 六命名处理器多概念页面、含 matchMedia 与减少动效的无障碍英雄区)。

适用场景:按常见布局组合子技能,如英雄区用 gsap-text + gsap-scroll + gsap-vfx,服务网格用 gsap-scroll + gsap-interact,电路板用 gsap-svg + gsap-interact,赛博/终端页用 gsap-text + gsap-vfx + gsap-svg,统计区用 gsap-vfx + gsap-scroll,高级英雄区加 gsap-cursor,交互画布场景加 gsap-canvas。

限制:本技能不处理框架生命周期与清理,也不覆盖时间线 API;官方文本与安装命令暂未提供。