framer-motion-best-practices

Name: framer-motion-best-practices
Author: pproenca

github.com/pproenca设计与 UI218187 次安装11 周前更新

代码仓库

关于 framer-motion-best-practices

为 React 应用中的 Framer Motion 动画提供性能指导，适用于实现或重构动画的开发者。规则按优先级覆盖包体积、渲染、布局、滚动、手势和退出动画。

主要功能

01涵盖 9 类的 42 条规则
02按优先级组织动画指导
03优化包体积
04减少重复渲染
05布局与滚动动画模式
06手势、弹簧、SVG 和退出动画指导

适用场景

01优化动画密集型 React 应用的包体积
02减少动画期间的重复渲染
03实现布局或共享元素过渡
04构建滚动联动或手势交互

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/pproenca/dot-skills --skill framer-motion-best-practices

安装后在 Claude Code 中输入/framer-motion-best-practices确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

metadata.json

assets/templates/

_template.md

references/

_sections.md

anim-hardware-acceleration.md

anim-independent-transforms.md

anim-keyframes-array.md

anim-opacity-filter.md

anim-transform-properties.md

anim-will-change.md

bundle-dom-animation.md

bundle-dynamic-features.md

bundle-lazy-motion.md

bundle-strict-mode.md

bundle-use-animate-mini.md

exit-animate-presence.md

exit-mode-wait.md

exit-unique-keys.md

gesture-drag-constraints.md

gesture-drag-elastic.md

gesture-tap-cancel.md

gesture-variants-flow.md

gesture-while-props.md

layout-dependency.md

layout-group.md

layout-id-shared.md

layout-position-size.md

layout-scroll.md

rerender-animate-prop.md

rerender-motion-value-event.md

rerender-motion-value.md

详细介绍

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	版本和参考信息

支持 Markdown

登录后评论