在 React 应用中实现动画效果，通常可以采用哪些不同的技术方案？
考察说明
考察对 React 动画实现方式的掌握广度与选型能力。
回答思路
- 【回答框架 1】CSS 动画是最基础的方案，通过 className 切换配合 transition 或 animation 实现，简单高效，适合纯样式动画，不涉及复杂交互。
- 【回答框架 2】React 过渡动画库如 React Transition Group 提供 CSSTransition 和 TransitionGroup 组件，管理组件挂载卸载的过渡状态，适合列表增删和入场出场动画。
- 【回答框架 3】第三方动画库如 Framer Motion 提供声明式 API，支持手势、布局动画和复杂动画编排，适合交互复杂的产品。
- 【回答框架 4】SVG 动画可用 SMIL 或 CSS 驱动，适合图标和图形动画。Canvas 或 WebGL 适合高性能粒子等重度动画。
- 【回答框架 5】选择依据：动画复杂度、性能要求、团队熟悉度和维护成本。简单动画用 CSS，组件过渡用过渡库，复杂交互用专业动画库。
- 【关键点 1】CSS 动画适合简单样式变化，性能好。
- 【关键点 2】React Transition Group 负责组件挂载卸载过渡状态。
- 【关键点 3】Framer Motion 提供丰富的声明式 API 和手势支持。
- 【关键点 4】复杂或高性能动画可考虑 Canvas 或 WebGL。
- 【关键点 5】选型需权衡复杂度、性能和团队维护性。
- 【易错点 1】CSS 动画难以控制动画的暂停、反向等复杂时序。
- 【易错点 2】使用 React Transition Group 时需注意 key 的唯一性，避免状态混乱。
- 【易错点 3】过度使用 JavaScript 动画库可能导致性能下降，需要评估动画频率和复杂度。