用途:该技能提供 GSAP 动画的测试、调试与验证配方,属于 gsap-setup → gsap-animate → gsap-optimise → gsap-test 流程的最后一环,内容与本插件其他部分无 API 重叠。
主要能力:
- Vitest 动画清理测试:在 afterEach 中调用 gsap.globalTimeline.clear();断言组件卸载后 globalTimeline.getChildren() 数量减少、ScrollTrigger.getAll() 为 0;通过 mock window.matchMedia 验证 prefers-reduced-motion: reduce 下内容不被隐藏。
- Playwright 动画钩子:在非生产环境暴露 window.completeAllAnimations(将 globalTimeline.progress(1) 并把每个 ScrollTrigger 滚到 end)与 window.skipAnimations(timeScale(100));测试中调用后截图对比,或用 page.emulateMedia({ reducedMotion: 'reduce' }) 验证可见性;也可通过 URL 参数 skip-animations 跳过动画。
- 调试:开发期用 ScrollTrigger.defaults({ markers: true });打印 ScrollTrigger.getAll() 与 globalTimeline.getChildren().length;离开页面后两者应均为 0 以排查内存泄漏。
- 上线前检查清单:移除 markers、清理动画回调中的 console.log、生产环境设置 nullTargetWarn: false;真机测试 60fps、避免布局抖动、动画结束后释放 will-change;验证减少动效、禁用 JavaScript 时内容可见;逐页导航确认无泄漏 tween/ScrollTrigger;懒加载图片与字体后调用 ScrollTrigger.refresh();截图捕获最终动画状态并覆盖各断点。
使用方式:按上述代码片段在测试文件与仅开发/测试用的客户端插件中实现,命令与 API 保持原样。
限制:资料未提供安装步骤、依赖版本、收费与平台信息;示例基于 Vue Test Utils 与 Playwright,其他框架需自行适配。