SuperAPI AI 工具集

gsap-test

测试与质量

查看项目

更新于 10-15 22:38

技能介绍

用途:面向使用 GSAP 的项目,提供在生产环境前对动画进行测试、调试与验证的可复用配方,位于 gsap-setup → gsap-animate → gsap-optimise → gsap-test 流程末尾。

主要能力:一是 Vitest 测试,涵盖卸载后的动画清理(gsap.globalTimeline.clear() 与 getChildren().length 对比)、ScrollTrigger 清理(ScrollTrigger.getAll().length 为 0)以及 prefers-reduced-motion 的适配验证。二是 Playwright 动画钩子,在非生产环境暴露 window.completeAllAnimations(将 globalTimeline.progress(1) 并把每个 ScrollTrigger 滚到 end)与 window.skipAnimations(timeScale(100)),用于截图前完成动画、或通过 URL 参数 skip-animations 跳过动画;并可用 emulateMedia({ reducedMotion: 'reduce' }) 测试减动效。三是调试手段:ScrollTrigger.defaults({ markers: true }) 标记、打印 ScrollTrigger 列表与活动 tween 数、离开页面后检查二者是否为 0 以查内存泄漏。四是上线前检查清单,覆盖标记与调试代码移除、真机性能与 60fps、仅用 transform/opacity、will-change 释放、JS 禁用时内容可见、各断点与固定区在移动端的表现、截图捕捉最终动画状态等。

使用方式:按资料中的代码引入 Vitest、@vue/test-utils、Playwright 与 GSAP;在 dev/test 环境注册窗口钩子函数;按需在测试中调用。

限制:资料未提供安装命令、版本要求与收费信息;示例以 Vue 挂载方式呈现,未说明其它框架的适配方式;具体动画实现需参考前置的 gsap-setup 等环节。