用 GSAP 为 Vue/Nuxt HUD 实现高性能…

在 Vue/Nuxt 项目中用 GSAP 实现 HUD 面板、状态指示、数据可视化和 ScrollTrigger 动画时，按 TDD、性能、可访问性和清理要求操作。

适用场景

解决思路

1. TDD 优先：先写失败的动画测试，再实现动画逻辑。
2. 性能意识：使用 transforms/opacity 实现 GPU 加速，避免布局抖动。
3. 必须清理：组件卸载时始终 kill 动画。
4. 时间线组织：复杂动画序列使用 timelines 组织。
5. Easing 选择：为 HUD 感觉选择合适的 easing。
6. 可访问性：尊重 reduced motion 偏好。
7. 内存管理：通过正确清理避免内存泄漏。
8. 写失败测试：使用 vitest、@vue/test-utils、gsap 挂载 HUDPanel，模拟 window.matchMedia 为 false，等待动画完成并断言 .hud-panel 存在；测试卸载后 gsap.globalTimeline.getChildren().length 小于原数量；模拟 prefers-reduced-motion: reduce 并断言元素 opacity 为 1。
9. 实现最小通过代码：在组件中声明 animation ref，onMounted 检查 window.matchMedia('(prefers-reduced-motion: reduce)').matches，若为 true 则 gsap.set(panelRef.value, { opacity: 1 }) 并返回；否则用 gsap.from(panelRef.value, { opacity: 0, y: 20, duration: 0.5 }) 创建动画并保存；onUnmounted 调用 animation.value?.kill()。
10. 重构为可复用 composable：创建 usePanelAnimation(elementRef)，在 onMounted 中执行 animate，检查 reduced motion，使用 gsap.from 设置 opacity 0、y 20、duration 0.5、ease 'power2.out'，onUnmounted kill，返回 { animation }。
11. 运行完整验证：执行 npm test -- --grep "Animation"、npm run test:memory、npm run test:performance 检查动画测试、内存泄漏和 60fps。
12. 使用推荐版本：gsap ^3.12.0，@gsap/vue ^3.12.0，ScrollTrigger included。
13. Vue/Nuxt 集成：创建 plugins/gsap.ts，在 defineNuxtPlugin 中导入 gsap 和 ScrollTrigger，调用 gsap.registerPlugin(ScrollTrigger)，通过 provide 返回 gsap 和 ScrollTrigger。
14. 面板入场动画：在 panelRef 上，onMounted 检查 reduced motion，若减少则 gsap.set(panelRef.value, { opacity: 1 })；否则 gsap.from 设置 opacity 0、y 20、scale 0.95、duration 0.5、ease 'power2.out'；onUnmounted kill 动画。
15. 状态指示器动画：创建 useStatusAnimation，维护 timeline ref；animateStatus(status) 先 kill 旧 timeline，再创建 gsap.timeline()；status 为 active 时依次 scale 1.2（duration 0.2，ease 'power2.out'）和 scale 1（duration 0.3，ease 'elastic.out(1, 0.3)'）；warning 时设置 backgroundColor '#f59e0b'、boxShadow '0 0 10px #f59e0b'、duration 0.3、repeat 2、yoyo true；error 时设置 x -5、duration 0.05、repeat 5、yoyo true；onUnmounted kill。
16. 数据可视化动画：在 Vue 组件中定义 barsRef 和 animations 数组；watch props.data，先 kill 所有旧动画并清空数组；遍历 newData，对每个 bar 创建 gsap.to(bar, { height: `${value}%`, duration: 0.5, delay: index * 0.05, ease: 'power2.out' })，推入 animations；onUnmounted kill 所有动画。
17. 时间线序列：创建 createStartupSequence(elements)，用 gsap.timeline({ defaults: { ease: 'power2.out' } })；先从 logo 动画 opacity 0、scale 0、duration 0.8、ease 'back.out(1.7)'；再从 panels 动画 opacity 0、x -30、stagger 0.1、duration 0.5，位置 '-=0.3'；最后从 status 动画 opacity 0、y 10、duration 0.3，位置 '-=0.2'；返回 timeline。
18. 滚动触发动画：在 sectionRef 上，onMounted 使用 gsap.from(sectionRef.value.querySelectorAll('.animate-item'), { scrollTrigger: { trigger: sectionRef.value, start: 'top 80%', end: 'bottom 20%', toggleActions: 'play none none reverse' }, opacity: 0, y: 30, stagger: 0.1, duration: 0.5 })；onUnmounted 用 ScrollTrigger.getAll().forEach(trigger => trigger.kill()) 清理。
19. 性能标准：优先使用 transforms 和 opacity（x、y、rotation、scale），避免使用会触发布局重算的属性（left、top、width、height、margin）。
20. 可访问性：检查 prefers-reduced-motion，若为 true 则 gsap.set(element, { opacity: 1 })，否则 gsap.from(element, { opacity: 0, duration: 0.5 })。
21. will-change 使用：动画前设置 element.style.willChange = 'transform, opacity'；在 gsap.to 的 onComplete 中将 element.style.willChange = 'auto'；不要一直保留 will-change。
22. Transform vs Layout 属性：使用 x、y、scale、rotation、opacity；避免 left、top、width、height、margin。
23. Timeline 复用：创建 gsap.timeline({ paused: true })，用 timeline.to 添加动画；通过 timeline.play() 和 timeline.reverse() 控制；不要每次 show/hide 都新建 timeline。
24. ScrollTrigger 批处理：使用 ScrollTrigger.batch('.animate-item', { onEnter: (elements) => gsap.to(elements, { opacity: 1, y: 0, stagger: 0.1, overwrite: true }), onLeave: (elements) => gsap.to(elements, { opacity: 0, y: -20, overwrite: true }) })；不要给每个元素单独创建 ScrollTrigger。
25. 懒初始化：仅在需要时创建 timeline，例如 getPanelAnimation 中若 panelAnimation 为空则创建 gsap.timeline({ paused: true }) 并链式 from；调用 showPanel 时 play，hidePanel 时 reverse；不要 onMounted 时创建所有动画。
26. 动画测试：挂载组件并卸载后，断言 gsap.globalTimeline.getChildren().length 为 0，确保无活动动画残留。
27. 关键反模式：不要在 onMounted 中直接 gsap.to 而不保存引用；必须声明 tween 变量，onMounted 赋值，onUnmounted 调用 tween?.kill()。
28. 关键反模式：不要动画布局属性（如 width、height），应使用 scaleX、scaleY 等 transforms。
29. 预实施 Phase 1：写失败测试；定义动画 timing 和 easing 要求；识别需要 will-change 提示的元素；计划所有动画的清理策略；检查是否需要 reduced motion 支持。
30. 预实施 Phase 2：只使用 transforms/opacity；保存动画引用以便清理；动画前应用 will-change 并在之后移除；用 timelines 组织序列；批量处理 ScrollTrigger；对复杂动画实现懒初始化。
31. 预实施 Phase 3：运行 npm test -- --grep "Animation" 确保通过；确认卸载时所有动画已清理；尊重 reduced motion 偏好；用 DevTools 检查无内存泄漏；用 performance monitor 检查维持 60fps；确保 ScrollTrigger 实例被正确 kill。
32. 总结原则：所有动画必须在卸载时 kill 以防内存泄漏；只用 transforms 和 opacity；尊重 reduced motion；用 timelines 组织序列。

适用边界 · 注意事项

• 项目不使用 Vue/Nuxt 或无法引入 GSAP 时，不应直接使用这些 Vue 组合式函数和生命周期写法。
• 只需要简单 CSS transition 或不想增加第三方动画库依赖时，不必用 GSAP 时间线/ScrollTrigger。
• 目标环境无法运行测试或无法监控内存/性能时，不建议引入复杂动画。