SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场interaction-physics

interaction-physics

前端与建站

查看项目

更新于 10-16 02:18

技能介绍

用途

Interaction Physics 用于为 UI 构建动效层，让每一次用户操作都获得物理化的响应：一致的时长、有意义的缓动，以及即时到达的反馈。其首要原则是：每个动画都必须承担一项职责——确认操作、引导注意力或解释状态变化。不承担任何职责的动效应被删除，而不是被调优。

该技能同时交付两份成果：一份项目级动画规范（使后续动效保持一致）和范围内交互的实现代码。

何时使用 / 何时不用

适用：悬停/按压/焦点反馈、进入/退出过渡（模态框、提示、页面、列表项）、表单反馈动画、动画审计、选择时长与缓动、prefers-reduced-motion 支持。

以下情况应转交其他技能：

  • 需要决定显示哪种加载指示器以及何时显示 → skills/frontend-design/loading-states（本技能负责为其添加动画，该技能负责选择指示器）
  • 乐观 UI、感知延迟、Core Web Vitals → skills/frontend-design/performance-optimization
  • 渲染管线、布局抖动、帧预算 → skills/frontend-design/design-engineer-mindset
  • 非动效的视觉打磨（间距、对比度、层级） → skills/frontend-design/visual-hierarchy-refactoring

第 0 步——先检查代码库，再只询问剩余问题

  • 搜索现有动效：transition、animation、@keyframes、framer-motion、motion.、react-spring、gsap、Tailwind transition-/animate- 类。记录所有在用的时长和缓动——此处的不一致（例如悬停同时使用 150ms、200ms、250ms、300ms）通常就是第一个发现。
  • 检查是否存在 prefers-reduced-motion 处理。缺失即为自动修复项。
  • 确定动画载体：如果项目已使用动效库，就用它实现；否则默认使用 CSS 过渡/关键帧。绝不为 CSS 能实现的效果引入动效库。
  • 找出失效交互：没有悬停/激活状态的按钮、无过渡直接出现的模态框/提示、突然弹出的表单错误。
  • 询问用户（仅当无法推断时，一次性批量询问）：期望的个性（沉稳/专业 vs 活泼——若产品领域明显可直接推断）和范围（全应用通盘 vs 特定流程）。如果用户说“应用感觉卡顿”，不要追问——直接审计、说明假设并继续。

工作流程

1. 先编写动画规范

在动代码之前先固定词汇。标准时长类别：

类别 时长 缓动 适用于
微反馈 150–250ms ease-out 悬停、按压、焦点、切换、颜色/状态变化
结构性过渡 300–500ms 进入 ease-out，退出 ease-in 模态框、抽屉、页面、手风琴、提示
注意力 500–1000ms ease-in-out 警报、脉冲、一次性强调
连续 约 1s 循环 linear 旋转器、不确定进度

决策规则：

  • 按方向选择缓动：进入元素减速（ease-out）；退出元素加速（ease-in）；屏幕内移动使用 ease-in-out；只有机械循环使用 linear。像 cubic-bezier(0.34, 1.56, 0.64, 1) 这样的弹性曲线仅用于刻意的活泼感——一个应用中最多一两处。
  • 按时长和距离选择时长：小元素短距离移动取范围下限（悬停着色：150–200ms）；大表面或长距离取上限（全屏抽屉：400–500ms）。工具提示和模态框不能共用同一时长。
  • 退出快于进入（约为进入时长的 75%）——用户已经决定离开。
  • 将第 0 步发现的不一致值收敛为最多 3–4 个命名令牌（例如 --duration-fast: 200ms; --duration-base: 300ms; --duration-slow: 450ms），定义为 CSS 变量或主题令牌。

2. 用四部分解剖法规定每个微交互

对范围内每个交互说明：触发器（用户操作/系统事件）→ 规则（什么变化、时长、缓动）→ 反馈（用户感知到什么）→ 循环与模式（是否重复、能否中断）。可中断性规则：对于用户能快速切换的任何内容，状态驱动的过渡（CSS transition 或动效库）优于发射后不管的关键帧——半开的菜单必须平滑反向，而不是重新开始。

3. 在性能与无障碍约束下实现

  • 只动画 transform 和 opacity（对合成器友好）。绝不直接动画 width、height、top、left 或 box-shadow；通过交叉淡化伪元素的 opacity 来伪造阴影动画。仅对小控件可接受动画 background-color。
  • 在同一次变更中交付 reduced-motion 块——基线见 references/patterns.md。装饰性动效消失；信息性动效（进度）可保留为仅 opacity。
  • 反馈绝不只依赖动效：每个动画状态变化都搭配颜色/文本/图标变化，使其在 reduced-motion 下依然有效。
  • 键盘对等：每个 :hover 效果都要有 :focus-visible 等价物。
  • 闪烁绝不快于每秒 3 次（癫痫风险——这是 WCAG 要求，不是风格偏好）。

典型微反馈示例（完整图库——按钮、表单验证、提示、模态框、页面过渡——见 references/patterns.md）：

button {
  transition: background-color 200ms ease-out, transform 200ms ease-out;
}
button:hover:not(:disabled)  { background-color: var(--color-primary-dark); }
button:active:not(:disabled) { transform: scale(0.98); }
button:focus-visible         { outline: 2px solid var(--color-focus); outline-offset: 2px; }

4. 验证

尽可能运行应用（或推演渲染路径）：确认过渡触发、退出有动画（常见遗漏——元素在退出动画前就卸载了）、快速切换不卡顿或重启、reduced-motion 媒体查询确实抑制了移动。

必需输出格式

交付两份成果：

  1. 代码——使用项目现有动效载体和令牌实现的过渡/动画。

  2. 动画规范（markdown，成为项目的动效参考）：

## Motion tokens
| Token | Value | Easing | Used for |
| --duration-fast | 200ms | ease-out | hover, press, focus, toggles |
| --duration-base | 300ms | ease-out/ease-in | toasts, dropdowns, accordions |
| --duration-slow | 450ms | ease-out/ease-in | modals, drawers, page transitions |

## Interaction inventory
| Interaction | Trigger | Motion | Duration/easing | Status |
| Button hover | pointer/focus | bg tint + scale on press | fast / ease-out | implemented |
| Modal open | click | fade + 20px rise | slow / ease-out | implemented |
| Toast exit | timeout/dismiss | slide right + fade | base×0.75 / ease-in | implemented |

## Audit findings (for audit engagements)
| Issue | Location | Fix |
| 5 different hover durations | [files] | collapsed to --duration-fast |
| No reduced-motion support | global | baseline block added |

## Deliberately not animated
[List, with one-line reasons — restraint is part of the spec]

质量标准（交付前检查）

  • 交付代码中的每个动画都对应一个目的（确认/引导/解释）——被质疑时能说出它
  • 所有时长来自规范的令牌；触及文件中不留魔法数字
  • 进入 = ease-out，退出 = ease-in，循环 = linear——无例外，除非说明理由
  • 只动画 transform/opacity（小控件颜色变化除外）
  • prefers-reduced-motion 块存在且有效
  • 每个 :hover 状态都有 :focus-visible 对应项
  • 动画状态变化同时改变颜色/文本/图标（动效不是唯一信号）
  • 无任何闪烁超过每秒 3 次；无无限装饰循环

硬性禁止：禁止滚动劫持；禁止在文本输入按键时动画；CSS 足够时不添加动效库；禁止动画布局属性。

集成

  • skills/frontend-design/component-architecture → 提供本技能要动画的组件状态（悬停/激活/加载/禁用）；若存在令牌系统，在其中添加令牌。
  • skills/frontend-design/loading-states → 决定显示哪种指示器；本技能提供其微光/旋转/进度动效。
  • skills/frontend-design/performance-optimization ← 消费规范中“只动画合成器属性”的约束；若动画仍掉帧则回传发现。
  • skills/frontend-design/accessibility-excellence ← 审计所交付内容的 reduced-motion 和闪烁频率合规性。

参考

references/patterns.md —— 完整实现图库：完整按钮状态集、表单验证、骨架/旋转器/进度动效、提示进入/退出、页面与模态框过渡、reduced-motion 基线块。编写实际 CSS 时阅读它。