FramerMotion性能优化技能Skill framer-motion

---

名称: framer-motion 描述: Framer Motion 性能优化指南。此技能应在使用 Framer Motion 编写、审查或重构 React 动画时使用，以确保最佳性能模式。触发于涉及运动组件、动画、手势、布局过渡、滚动链接效果和 SVG 动画的任务。

社区 Framer Motion 最佳实践

React 应用中 Framer Motion 动画的全面性能优化指南。包含 42 条规则，覆盖 9 个类别，按影响优先级排序，以指导自动化重构和代码生成。

何时应用

在以下情况下参考这些指南：

• 使用 Framer Motion 向 React 组件添加动画
• 为动画密集型应用优化包大小
• 防止动画期间不必要的重渲染
• 实现布局过渡或共享元素动画
• 构建滚动链接或基于手势的交互

按优先级划分的规则类别

优先级	类别	影响	前缀
1	包优化	关键	bundle-
2	重渲染预防	关键	rerender-
3	动画属性	高	anim-
4	布局动画	高	layout-
5	滚动动画	中高	scroll-
6	手势优化	中	gesture-
7	弹簧和物理	中	spring-
8	SVG 和路径动画	低中	svg-
9	退出动画	低	exit-

快速参考

1. 包优化（关键）

• bundle-lazy-motion - 使用 LazyMotion 和 m 组件代替 motion
• bundle-dynamic-features - 动态导入 motion 功能
• bundle-dom-animation - 使用 domAnimation 进行基本动画
• bundle-use-animate-mini - 简单情况下使用迷你 useAnimate
• bundle-strict-mode - 启用严格模式以捕获意外导入

2. 重渲染预防（关键）

• rerender-motion-value - 使用 useMotionValue 代替 useState
• rerender-use-transform - 使用 useTransform 派生值
• rerender-stable-callbacks - 保持动画回调稳定
• rerender-variants-object - 在组件外定义变体
• rerender-animate-prop - 使用稳定的 animate 值
• rerender-motion-value-event - 使用 motion 值事件

3. 动画属性（高）

• anim-transform-properties - 动画化变换属性
• anim-opacity-filter - 优先使用不透明度和滤镜进行视觉效果
• anim-hardware-acceleration - 利用硬件加速
• anim-will-change - 谨慎使用 willChange 属性
• anim-independent-transforms - 独立动画化变换
• anim-keyframes-array - 使用关键帧数组进行序列动画

4. 布局动画（高）

• layout-dependency - 使用 layoutDependency 限制测量
• layout-position-size - 适当使用 layout=“position” 或 “size”
• layout-group - 分组相关布局动画
• layout-id-shared - 使用 layoutId 进行共享元素过渡
• layout-scroll - 向可滚动祖先添加 layoutScroll

5. 滚动动画（中高）

• scroll-use-scroll - 使用 useScroll 钩子进行滚动链接动画
• scroll-use-spring-smooth - 使用 useSpring 平滑滚动动画
• scroll-element-tracking - 跟踪特定元素进入视口
• scroll-offset-configuration - 配置滚动偏移
• scroll-container-ref - 在特定容器内跟踪滚动

6. 手势优化（中）

• gesture-while-props - 使用 whileHover/whileTap 代替处理程序
• gesture-variants-flow - 让手势变体流向子元素
• gesture-drag-constraints - 使用 dragConstraints ref 设置边界
• gesture-drag-elastic - 配置 dragElastic 以获得自然感觉
• gesture-tap-cancel - 使用 onTapCancel 处理中断手势

7. 弹簧和物理（中）

• spring-physics-based - 使用基于物理的弹簧以获得可中断性
• spring-damping-ratio - 配置阻尼以控制振荡
• spring-mass-inertia - 调整质量以获得更重或更轻的感觉
• spring-use-spring-hook - 使用 useSpring 进行反应式值

8. SVG 和路径动画（低中）

• svg-path-length - 使用 pathLength 进行线条绘制动画
• svg-motion-components - 使用 motion.path 和 motion.circle
• svg-viewbox-animation - 动画化 viewBox 进行缩放效果
• svg-morph-matching-points - 匹配点数以进行变形动画

9. 退出动画（低）

• exit-animate-presence - 用 AnimatePresence 包装条件渲染
• exit-unique-keys - 为 AnimatePresence 子元素提供唯一键
• exit-mode-wait - 使用 mode=“wait” 进行顺序过渡

如何使用

阅读单个参考文件以获取详细解释和代码示例：

• 部分定义 - 类别结构和影响级别
• 规则模板 - 添加新规则的模板

参考文件

文件	描述
references/_sections.md	类别定义和排序
assets/templates/_template.md	新规则模板
metadata.json	版本和参考信息