animation-motion-design

动画与动效设计

使用 Motion（原名 Framer Motion，每周 npm 下载量超过 1,800 万次）和 View Transitions API（2026 年获得跨浏览器支持）构建高性能、易访问动画的模式。涵盖布局动画、手势交互、退出过渡、微交互和动效无障碍。

快速参考

规则	文件	影响	使用场景
布局动画	rules/motion-layout.md	高	共享布局过渡、FLIP 动画、layoutId
手势交互	rules/motion-gestures.md	高	使用弹簧物理效果实现拖动、悬停、轻触
退出动画	rules/motion-exit.md	高	AnimatePresence、卸载过渡
View Transitions API	rules/view-transitions-api.md	高	页面导航、跨文档过渡
动效无障碍	rules/motion-accessibility.md	严重	prefers-reduced-motion、认知负荷
动效性能	rules/motion-performance.md	高	60fps、GPU 合成、布局抖动

总计：3 个类别中的 6 条规则

决策表 — Motion 与 View Transitions API

场景	建议	原因
组件挂载/卸载	Motion	AnimatePresence 负责处理生命周期
页面导航过渡	View Transitions API	浏览器内置支持，适用于任何路由器
复杂的可中断动画	Motion	弹簧物理效果，可在手势交互中断时响应
页面间简单淡入淡出	View Transitions API	不增加 JS 包体积
拖动/重新排序交互	Motion	使用 drag 属性实现布局动画
路由间共享元素	View Transitions API	viewTransitionName CSS 属性
滚动触发动画	Motion	useInView、useScroll hooks
多步骤编排序列	Motion	staggerChildren、variants

快速入门

Motion — 组件动画

import { motion, AnimatePresence } from "motion/react"

const fadeInUp = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
  exit: { opacity: 0, y: -10 },
  transition: { type: "spring", stiffness: 300, damping: 24 },
}

function Card({ item }: { item: Item }) {
  return (
    <motion.div {...fadeInUp} layout layoutId={item.id}>
      {item.content}
    </motion.div>
  )
}

function CardList({ items }: { items: Item[] }) {
  return (
    <AnimatePresence mode="wait">
      {items.map((item) => (
        <Card key={item.id} item={item} />
      ))}
    </AnimatePresence>
  )
}

View Transitions API — 页面导航

// React Router v7+ with View Transitions
import { Link, useNavigate } from "react-router"

function NavLink({ to, children }: { to: string; children: React.ReactNode }) {
  return <Link to={to} viewTransition>{children}</Link>
}

// CSS for the transition
// ::view-transition-old(root) { animation: fade-out 200ms ease; }
// ::view-transition-new(root) { animation: fade-in 200ms ease; }

Motion — 默认易于访问

import { useReducedMotion } from "motion/react"

function AnimatedComponent() {
  const shouldReduceMotion = useReducedMotion()

  return (
    <motion.div
      animate={{ x: 100 }}
      transition={shouldReduceMotion
        ? { duration: 0 }
        : { type: "spring", stiffness: 300, damping: 24 }
      }
    />
  )
}

规则详情

布局动画（Motion）

基于 FLIP 的布局动画，使用 layout 属性；通过 layoutId 实现共享布局过渡。

加载：rules/motion-layout.md

手势交互（Motion）

使用弹簧物理效果和手势组合实现拖动、悬停和轻触交互。

加载：rules/motion-gestures.md

退出动画（Motion）

使用 AnimatePresence 为即将从 React 树中卸载的组件添加动画。

加载：rules/motion-exit.md

View Transitions API

使用 document.startViewTransition() 和框架集成实现浏览器原生页面过渡。

加载：rules/view-transitions-api.md

动效无障碍

尊重用户的动效偏好，并通过动效敏感模式降低认知负荷。

加载：rules/motion-accessibility.md

动效性能

使用 GPU 合成、避免布局抖动，并确保动画保持 60fps。

加载：rules/motion-performance.md

核心原则

1. 要么达到 60fps，要么不做 — 只为 transform 和 opacity（合成属性）添加动画。绝不为 width、height、top 或 left 添加动画。
2. 集中管理预设 — 在共享文件中定义动画变体，而不是在每个组件中内联定义。
3. 退出动画使用 AnimatePresence — React 会立即卸载组件；使用 AnimatePresence 包裹组件，才能为其添加退出动画。
4. 优先使用弹簧而非持续时间 — 弹簧效果自然且可中断。使用 stiffness/damping，而不是 duration。
5. 尊重用户偏好 — 始终检查 prefers-reduced-motion，并提供即时替代方案。

性能预算

指标	目标	测量方式
过渡时长	< 400ms	用户感知阈值
动画属性	仅限 transform、opacity	DevTools > Rendering > Paint flashing
JS 包（Motion）	约 16KB（gzip 压缩后）	只导入需要的内容
首次绘制延迟	0ms	动画不得阻塞渲染
帧丢失率	< 5% 的帧	Performance API：PerformanceObserver

反面模式（禁止）

• 对布局属性设置动画 — 切勿直接对 width、height、margin、padding 设置动画。请改用 transform: scale()。
• 缺少 AnimatePresence — 组件会立即卸载，退出动画也会悄然丢失。
• 忽略 prefers-reduced-motion — 会导致约 35% 对运动敏感的用户出现前庭障碍。
• 内联过渡对象 — 每次渲染都会创建新对象，破坏 React 记忆化。
• 基于 duration 的弹簧 — Motion 弹簧使用 stiffness/damping，而非 duration。混用会导致行为异常。
• 同步调用 startViewTransition — 始终等待或处理 document.startViewTransition() 返回的 promise。

详细文档

资源	描述
references/motion-vs-view-transitions.md	对照表、浏览器支持情况及限制
references/animation-presets-library.md	适用于常见模式的预设变体，可直接复制粘贴
references/micro-interactions-catalog.md	按钮按压、切换、复选框、加载、成功/错误

相关技能

• ork:ui-components — shadcn/ui 组件模式和 CVA 变体
• ork:responsive-patterns — 响应式布局和容器查询模式
• ork:performance — Core Web Vitals 和运行时性能优化
• ork:accessibility — WCAG 合规、ARIA 模式及屏幕阅读器支持