用途
Motion Dev Animations 用于使用 Motion.dev（Framer Motion 的继任者，月下载量 1000 万以上）生成生产级动画，面向 React、Next.js、Svelte、Astro 和 Vue。其目标是遵循 Apple/Jon Ive 设计原则：有目的（服务于功能）、顺滑（120fps）、可访问（支持 reduced-motion）、高性能（仅使用 GPU 加速）、优雅（克制）、一致（统一时序）。
适用与不适用
适用：React 19+/Next.js 15+/Svelte 5+/Astro 4+ 动画实现；滚动效果（视差、揭示）、手势（悬停、拖拽、点按）、布局动画；首屏区块、卡片、需要 60fps+ 性能的微交互；需要弹簧物理、自然运动、可访问性的项目。
不适用：纯 CSS 过渡（使用原生 transition 属性）；无 JavaScript 框架的静态站点；Vue 项目（应使用 motion-v 包，API 不同）；SVG/Canvas 复杂动画（GSAP 更合适）；只有表单的 CRUD 应用（过于重量级）。
工作流程：澄清 → 规划 → 实现 → 验证
第一步澄清需求：确定项目上下文和动画目标，包括框架（React 19+、Next.js 15+、Svelte 5+、Astro 4+）、动画类型（入场、手势、滚动、布局）、设计目标（低调、醒目、活泼、专业）、性能约束（目标设备、包体积限制、可访问性要求）、触发机制（挂载、视口、用户交互）。
第二步规划动画策略：定义要动画化的组件（页头、卡片、按钮、区块）、运动模式（淡入、滑动、缩放、弹簧、视差）、时序规格（时长、延迟、交错间隔）、物理参数（刚度 300-400、阻尼 20、质量 1）、可访问性回退（prefers-reduced-motion 替代方案）。
第三步分阶段实现：先搭建（安装 Motion.dev、配置导入、准备组件结构），再核心动画（应用 initial、animate、transition 等 motion 属性），然后精修（调整时序、缓动曲线、弹簧物理以获得自然手感），接着可访问性（添加 reduced-motion 检测、键盘导航支持），最后优化（验证 GPU 加速、减小包体积、测试性能）。
第四步验证质量标准：性能 ≥60fps（Chrome DevTools → Performance 标签）；布局稳定性 CLS = 0（Lighthouse 审计）；可访问性支持 prefers-reduced-motion（系统设置测试）；键盘导航所有交互元素可键盘访问；移动端响应式手势友好，在 iOS/Android 上测试。
动画模式决策树
入场（页面加载、挂载）：模式 initial={{opacity: 0, y: 20}} animate={{opacity: 1, y: 0}}；时序 0.6-0.8s，ease: [0.22, 1, 0.36, 1]；交错 0.1-0.2s。
手势（悬停、点按、拖拽）：模式 whileHover={{scale: 1.05}}、whileTap={{scale: 0.95}}；物理弹簧（刚度 300-400、阻尼 20）；时序即时响应（无 duration）。
滚动（揭示、视差）：模式 whileInView + viewport 或 useScroll + useTransform；触发 viewport={{once: true, amount: 0.3}}；性能仅用 transform/opacity。
布局（重排、展开）：模式 layout 属性（自动 FLIP）；共享 layoutId="id" 用于形变；注意仅动画化 transforms。
API 速查
motion.div 用于基础动画；whileHover 用于悬停状态（0.2-0.3s）；whileTap 用于点击反馈；whileInView 用于滚动揭示；drag 用于可拖拽元素；layout 用于自动 FLIP 动画；useScroll 跟踪滚动进度（视差、进度条）；useTransform 映射值（滚动关联效果）；useSpring 弹簧物理（平滑值变化）；useInView 视口检测（触发动画）。
框架集成
React/Next.js：从 "motion/react" 导入，组件 <motion.div>，退出动画使用 <AnimatePresence>。 Svelte：从 "motion" 导入，Vanilla API，无退出动画组件。 Astro：从 "motion" 导入，客户端脚本，无退出动画组件。 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 Fade Up（经典 Apple 风格入场）、Hero Stagger（编排多元素）、Hero Split Text（字符揭示）。 滚动效果：Scroll Reveal（Intersection Observer 淡入）、Parallax Layers（多速深度）、Scroll Progress（阅读指示器）。 手势与交互：Card Hover（优雅抬升 + 阴影）、Magnetic Button（跟随光标）、Drag Carousel（触摸滑块）。 布局动画：List Reorder（拖拽重排 FLIP）、Accordion（展开/折叠）、Tab Switch（共享布局）。
参考文档（按需加载）
完整 API 参考（所有组件、钩子、属性）、弹簧物理指南（调整刚度、阻尼、质量）、性能优化（GPU、will-change、懒加载）、可访问性指南（reduced motion、键盘、屏幕阅读器）、故障排除（常见问题与解决）、Framer Motion 迁移（升级指南）。
模板（生产就绪）
Next.js 页面模板（首屏 + 功能 + 推荐语）、组件库（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 属性。
实现最佳实践
从简单开始，从淡入 + 滑动构建，逐步增加复杂度；将动画状态提取为命名变体以便维护；优先使用弹簧物理（比补间更自然）；使用 staggerChildren（0.1-0.2s）为列表项建立节奏和层级；充分测试移动端，验证触摸手势和 iOS/Android 性能；始终提供 prefers-reduced-motion 回退动画；用 Chrome DevTools Performance 标签分析性能，目标 ≥60fps。
设计哲学（Apple/Jon Ive 原则）
简洁：使用 200-400ms 时长，减少同时运动，优先使用 transform 属性。自然物理：实现基于弹簧的过渡，避免线性缓动，应用基于质量的运动。有目的的运动：引导用户注意力，提供交互反馈，建立视觉层级。优雅克制：应用“少即是多”原则，保持时序一致，尊重用户的运动偏好。
验证
结构化输出验证可参考：Motion Config Schema（JSON schema）、Validation Script（自动化检查）。
元数据
版本 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。