SuperAPI AI 工具集

gsap

设计与创作

查看项目

更新于 10-16 00:06

技能介绍

用途:为 JARVIS AI 助手 HUD 提供 GSAP(GreenSock Animation Platform)动画实现能力,覆盖面板进出场、状态指示切换、数据可视化、滚动触发效果和复杂时间线序列。风险等级标注为 LOW。

主要能力:面板入场/退场动画、状态指示动画(active/warning/error)、数据可视化柱状动画、启动序列时间线、ScrollTrigger 滚动触发动画。推荐版本:gsap ^3.12.0、@gsap/vue ^3.12.0,ScrollTrigger 随包提供。

使用方式:采用 TDD 流程,先写失败测试再实现。Vue 集成通过 Nuxt 插件注册 ScrollTrigger:gsap.registerPlugin(ScrollTrigger)。动画实现中需检查 prefers-reduced-motion,若开启则用 gsap.set 直接设最终状态;组件卸载时调用 animation.kill() 清理。复杂序列用 gsap.timeline() 组织,滚动动画用 ScrollTrigger.batch 批量处理,并在卸载时 ScrollTrigger.getAll().forEach(trigger => trigger.kill())。验证命令:npm test -- --grep "Animation"、npm run test:memory、npm run test:performance。

适用场景:JARVIS HUD 面板与状态动画、数据图表动画、滚动触发效果、多元素启动序列。

限制与注意:仅使用 transform 与 opacity 等 GPU 加速属性,避免 left/top/width/height/margin 等触发布局的属性;will-change 需在动画前设置、完成后移除;必须清理动画防止内存泄漏;需尊重减少动态效果偏好;ScrollTrigger 实例需正确销毁。资料未提供具体收费、价格或平台支持信息。