motion-dev-animations

Motion Dev 动画

Motion.dev——每月下载量超过 1,000 万次，是 Framer Motion 的继任者 为 React、Next.js、Svelte、Astro、Vue 提供 120fps GPU 加速动画

用途

使用 Motion.dev，遵循 Apple/Jon Ive 原则，生成可用于生产环境的动画： 目的明确（服务于功能）| 流畅（120fps）| 无障碍（支持减少动态效果）| 高性能（仅使用 GPU）| 优雅（细腻）| 一致（统一的时序）

适用场景

✅ 适用于：

• React 19+/Next.js 15+/Svelte 5+/Astro 4+ 动画实现
• 滚动效果（视差、显现）、手势（悬停、拖动、轻触）、布局动画
• 需要 60fps+ 性能的主视觉区域、卡片、微交互
• 需要弹簧物理效果、自然动效和无障碍支持的项目

❌ 不适用于：

• 仅使用 CSS 过渡效果（使用原生 transition 属性）
• 没有 JavaScript 框架的静态网站
• Vue 项目（使用 motion-v 包——API 不同）
• 复杂的 SVG/Canvas 动画（GSAP 更合适）
• 仅包含表单和 CRUD 的应用（杀鸡用牛刀）

工作流：明确需求 → 制定计划 → 实现 → 验证

第 1 步：明确需求

确定项目背景和动画目标：

• 框架（React 19+、Next.js 15+、Svelte 5+、Astro 4+）
• 动画类型（入场、手势、滚动、布局）
• 设计目标（细腻、突出、活泼、专业）
• 性能限制（目标设备、包体积限制、无障碍要求）
• 触发机制（挂载、视口、用户交互）

第 2 步：制定动画策略

确定实现方案：

• 要添加动画的组件（标题、卡片、按钮、区块）
• 动效模式（淡入淡出、滑动、缩放、弹簧、视差）
• 时序规范（持续时间、延迟、交错间隔）
• 物理参数（刚度：300-400，阻尼：20，质量：1）
• 无障碍回退方案（prefers-reduced-motion 的替代效果）

第 3 步：分阶段实现

逐步构建动画：

• 准备：安装 Motion.dev，配置导入，准备组件结构
• 核心动画：应用 motion 属性（initial、animate、transition）
• 调整：调节时序、缓动曲线和弹簧物理效果，让动效更自然
• 无障碍：添加减少动态效果的检测和键盘导航支持
• 优化：验证 GPU 加速、尽量缩小包体积、测试性能

第 4 步：验证质量标准

根据要求检查：

• 性能：≥60fps（Chrome DevTools → Performance 标签页）
• 布局稳定性：CLS = 0（Lighthouse 审计）
• 无障碍：遵循 prefers-reduced-motion（测试系统设置）
• 键盘导航：所有交互元素均可通过键盘访问
• 移动端适配：手势适合触控，并在 iOS/Android 上测试

动画模式决策树

INPUT: What should animate?

├─ ENTRANCE (page load, mount)
│   → Pattern: initial={{opacity: 0, y: 20}} animate={{opacity: 1, y: 0}}
│   → Timing: 0.6-0.8s, ease: [0.22, 1, 0.36, 1]
│   → Stagger: 0.1-0.2s between elements
│   → Example: ./examples/hero-fade-up.md
│
├─ GESTURE (hover, tap, drag)
│   → Pattern: whileHover={{scale: 1.05}}, whileTap={{scale: 0.95}}
│   → Physics: Spring (stiffness: 300-400, damping: 20)
│   → Timing: Instant response (no duration)
│   → Examples: ./examples/card-hover.md, ./examples/magnetic-button.md
│
├─ SCROLL (reveal, parallax)
│   → Pattern: whileInView + viewport OR useScroll + useTransform
│   → Trigger: viewport={{once: true, amount: 0.3}}
│   → Performance: Transform/opacity only
│   → Examples: ./examples/scroll-reveal.md, ./examples/parallax-layers.md
│
└─ LAYOUT (reorder, expand)
    → Pattern: layout prop (auto FLIP)
    → Shared: layoutId="id" for morphing
    → Caveat: Only animates transforms

API 快速参考

组件/Hook	用法	适用场景
motion.div	<motion.div animate={{x: 100}}>	基础动画
whileHover	whileHover={{scale: 1.05}}	悬停状态（0.2-0.3s）
whileTap	whileTap={{scale: 0.95}}	点击反馈
whileInView	whileInView={{opacity: 1}}	滚动显现
drag	drag="x" dragConstraints	可拖动元素
layout	<motion.div layout />	自动 FLIP 动画
useScroll	跟踪滚动进度	视差、进度条
useTransform	映射数值	滚动联动效果
useSpring	弹簧物理效果	平滑的数值变化
useInView	检测视口	触发动画

完整 API：参见完整 API 参考

框架集成

框架	导入	组件	退出动画
React/Next.js	"motion/react"	<motion.div>	<AnimatePresence>
Svelte	"motion"	原生 API	N/A
Astro	"motion"	客户端脚本	N/A
Vue	"motion-v"	<motion.div>	类似 React

质量标准

类别	要求	验证方法
性能	≥60fps	Chrome DevTools → Performance
GPU 加速	仅使用 transform/opacity	不使用 width/height/left/top
包体积	<50KB	webpack-bundle-analyzer
无障碍性	prefers-reduced-motion	系统设置测试
移动设备	触控友好	iOS/Android 测试
布局偏移	CLS = 0	Lighthouse 审核

示例库（渐进式加载）

根据动画类型按需加载：

Hero 区块

• Hero 淡入上移 - 经典 Apple 风格入场效果
• Hero 交错动画 - 编排元素的动画
• Hero 分割文本 - 逐字显示

滚动效果

• 滚动显示 - 使用 Intersection Observer 淡入
• 视差图层 - 多种速度，营造纵深感
• 滚动进度 - 阅读指示器

手势与交互

• 卡片悬停 - 优雅上浮 + 阴影
• 磁性按钮 - 跟随光标移动
• 拖拽轮播 - 触控滑块

布局动画

• 列表重排 - 拖拽重排 FLIP
• 手风琴 - 展开/折叠
• 标签页切换 - 共享布局

完整示例：./examples/ 目录中的所有文件

参考文档（按需加载）

• 完整 API 参考 - 所有组件、hooks、props
• 弹簧物理指南 - 调整刚度、阻尼、质量
• 性能优化 - GPU、will-change、延迟加载
• 无障碍指南 - 减少动态效果、键盘、屏幕阅读器
• 故障排除 - 常见问题及解决方案
• Framer Motion 迁移 - 升级指南

模板（可用于生产环境）

• Next.js 页面模板 - Hero + 功能 + 用户评价
• 组件库 - 10+ 个可复用组件
• 滚动模板 - 视差 + 显示模式
• 仪表盘模板 - 交互式卡片、图表

安装

# React/Next.js/Svelte/Astro
npm install motion

# Vue
npm install motion-v

常见模式（可直接复制粘贴）

模式 1：淡入上移

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
/>

模式 2：悬停卡片

<motion.div
  whileHover={{ y: -8, boxShadow: "0 20px 40px rgba(0,0,0,0.12)" }}
  transition={{ type: "spring", stiffness: 300, damping: 20 }}
/>

模式 3：滚动显示

<motion.div
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, amount: 0.3 }}
/>

更多模式：交错列表、退出动画、布局过渡 → ./examples/ 目录

错误处理

问题	解决方案
动画未触发	检查 initial ≠ animate 的值
性能不佳	仅使用 transform/opacity + will-change CSS
布局偏移	设置明确尺寸，使用 layout 属性
退出动画无效	使用 <AnimatePresence> 包裹，并添加 key 属性

实现最佳实践

1. 从简单开始 → 先实现淡入 + 滑动，再逐步增加复杂度
2. 提取变体 → 将动画状态定义为具名变体，以便维护
3. 优先使用弹簧物理 → 默认采用弹簧过渡（比补间动画更自然）
4. 为列表项添加交错效果 → 使用 staggerChildren（0.1-0.2s）营造节奏感和层次感
5. 充分测试移动设备 → 在 iOS/Android 设备上验证触控手势和性能
6. 支持减少动态效果 → 始终提供 prefers-reduced-motion 回退动画
7. 分析性能 → 使用 Chrome DevTools 的 Performance 标签页，目标为 ≥60fps

设计理念（Apple/Jon Ive 原则）

将这些设计原则应用于所有动画：

• 简洁：使用 200-400ms 的时长，尽量减少同时发生的动态效果，优先使用 transform 属性
• 自然物理效果：实现基于弹簧的过渡，避免线性缓动，应用基于质量的运动
• 有目的的动态效果：引导用户注意力，提供交互反馈，建立视觉层次
• 优雅克制：遵循“少即是多”的原则，保持时序一致，尊重用户对动态效果的偏好

验证

有关结构化输出验证，请参阅：

• Motion 配置 Schema - JSON Schema
• 验证脚本 - 自动化检查

元数据

版本：3.0.0（基于研究的优化） 优化：祈使式语言、少样本模式（3 个示例）、分层复杂度、渐进式加载 Token 效率：核心内容减少 87%（15K → 2K）+ 自动缓存 Motion.dev：v11+ 框架：React 19+、Next.js 15+、Svelte 5+、Astro 4+、Vue 3+ 研究：arXiv 2402.07927v1、2211.01910、2310.14735v5、PubMed 40334089 许可证：MIT