framer-motion

Framer Motion 社区最佳实践

面向 React 应用中 Framer Motion 动画的全面性能优化指南。包含 9 个类别中的 42 条规则，按影响程度排序，帮助自动重构和代码生成。

适用场景

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

• 使用 Framer Motion 为 React 组件添加动画
• 优化动画密集型应用的包体积
• 避免动画过程中不必要的重新渲染
• 实现布局过渡或共享元素动画
• 构建与滚动联动或基于手势的交互

按优先级划分的规则类别

优先级	类别	影响	前缀
1	包优化	CRITICAL	bundle-
2	防止重新渲染	CRITICAL	rerender-
3	动画属性	HIGH	anim-
4	布局动画	HIGH	layout-
5	滚动动画	MEDIUM-HIGH	scroll-
6	手势优化	MEDIUM	gesture-
7	弹簧与物理效果	MEDIUM	spring-
8	SVG 与路径动画	LOW-MEDIUM	svg-
9	退出动画	LOW	exit-

快速参考

1. 包优化（CRITICAL）

• bundle-lazy-motion - 使用 LazyMotion 和 m 组件，而不是 motion
• bundle-dynamic-features - 动态导入 motion 功能
• bundle-dom-animation - 基础动画使用 domAnimation
• bundle-use-animate-mini - 简单场景使用精简版 useAnimate
• bundle-strict-mode - 启用严格模式，以发现意外导入

2. 防止重新渲染（CRITICAL）

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

3. 动画属性（HIGH）

• anim-transform-properties - 对变换属性添加动画
• anim-opacity-filter - 视觉效果优先使用 opacity 和 filter
• anim-hardware-acceleration - 利用硬件加速
• anim-will-change - 谨慎使用 willChange 属性
• anim-independent-transforms - 分别为各项变换添加动画
• anim-keyframes-array - 使用关键帧数组创建动画序列

4. 布局动画（HIGH）

• layout-dependency - 使用 layoutDependency 限制测量次数
• layout-position-size - 根据需要使用 layout="position" 或 "size"
• layout-group - 将相关布局动画分组
• layout-id-shared - 使用 layoutId 实现共享元素过渡
• layout-scroll - 为可滚动祖先元素添加 layoutScroll

5. 滚动动画（中高）

• scroll-use-scroll - 使用 useScroll hook 实现与滚动联动的动画
• scroll-use-spring-smooth - 使用 useSpring 实现平滑滚动动画
• scroll-element-tracking - 跟踪特定元素进入视口
• scroll-offset-configuration - 配置滚动偏移量
• scroll-container-ref - 跟踪特定容器内的滚动

6. 手势优化（中）

• gesture-while-props - 使用 whileHover/whileTap，而不是处理器
• gesture-variants-flow - 让手势 variants 传递给子元素
• 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 子元素提供唯一的 key
• exit-mode-wait - 使用 mode="wait" 实现顺序过渡

使用方法

阅读各个参考文件，了解详细说明和代码示例：

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

参考文件

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