请描述在 React 应用中实现滚动动画的常见方法，包括核心思路与实现要点。
考察说明
考查对 React 中滚动动画实现方式的掌握，以及如何将动画与组件生命周期、状态管理结合。
回答思路
- 【回答框架 1】滚动动画的核心是监听滚动事件或使用 IntersectionObserver，在元素进入视口时触发动画。常用方法包括 CSS 动画配合 class 切换、React 状态控制动画类名、或使用第三方库如 framer-motion、react-spring。
- 【回答框架 2】基于 IntersectionObserver 的实现：在 useEffect 中创建 observer，观察目标元素，当 isIntersecting 为 true 时设置状态，添加动画类名；注意在组件卸载时断开 observer 以释放资源。
- 【回答框架 3】对于复杂动画或滚动进度驱动动画，可使用第三方库如 framer-motion 的 useInView hook 或 react-spring 的 useSpring，它们封装了滚动检测和动画状态，减少手动管理。
- 【回答框架 4】性能优化：避免在每个滚动事件中直接操作 DOM，使用 requestAnimationFrame 节流；优先使用 transform 和 opacity 进行动画，利用 GPU 加速。
- 【关键点 1】常见方法：CSS 类名切换、IntersectionObserver 实现进入视口动画、第三方动画库（如 framer-motion）。
- 【关键点 2】IntersectionObserver 比监听 scroll 事件性能更好，且更易于管理。
- 【关键点 3】动画中避免触发重排，使用 transform 和 opacity 可以达到硬件加速。
- 【关键点 4】注意在卸载时清理监听器和 observer，防止内存泄漏。
- 【易错点 1】在滚动事件中频繁调用 setState 可能导致性能问题，应使用节流或改用 IntersectionObserver。
- 【易错点 2】依赖浏览器默认的 scroll 事件时，未考虑 SSR 环境中的 window 对象，可能导致报错。
- 【易错点 3】动画触发条件过于简单可能影响用户体验，例如页面加载时元素在视口内但未执行动画，需考虑初始状态。