motion-design

动效设计

概述

为产品 UI 设计目标明确、恰到好处的动效。此技能会评估动效需求，并根据交互频率和目的，推荐具体的缓动曲线、时长和实现方式。

每个动效都需要有作用。如果没有作用，就不要添加动效。

流程

阶段 1：加载参考资料（必需）

在提出任何建议之前，先阅读以下两个参考文件：

1. 决策树（references/decision-tree.md）——根据交互类型选择缓动类别，并提供缩放、原点和悬停方面的指导
2. 缓动令牌（references/easing-tokens.md）——具体的曲线、时长值和性能指南

阶段 2：评估动效

对于每个组件或交互，确定：

2.1 目的

此动效起什么作用？

• 响应性——按钮按下、菜单打开、即时反馈
• 空间连续性——元素从某处出现，又移动到某处
• 帮助理解——阐释概念、引导入门、营销展示
• 惊喜感——仅用于少数交互（谨慎使用）

如果没有明确的目的，建议不添加动效。

2.2 频率

用户触发此动效的频率有多高？

• 高频／键盘驱动——尽量不添加动效，或使用近乎即时的动效
• 中频／常见交互——保持快速（120-240ms）
• 低频／用于阐释——可以采用更慢、更丰富的动效

2.3 模式类型

这是什么类型的动效？

• 进入／退出——弹出框、模态框、提示消息、下拉菜单的出现或离开（退出通常比进入更快——用户希望内容尽快消失）
• 屏幕内变形——布局变化、内容展开、位置调整
• 基于时间——进度指示器、跑马灯、按住以删除
• 悬停／细微变化——颜色变化、不透明度渐变、背景变化
• 键盘导航——方向键、Tab 焦点、快速选择

阶段 3：提出建议

根据评估，使用参考文件中的令牌提出具体建议。

输出格式

对于每个动效请求，提供：

## Animation Recommendation

**Component**: [What's being animated]

### Evaluation
- **Purpose**: [responsiveness / spatial / understanding / delight / none]
- **Frequency**: [high / medium / low]
- **Pattern**: [enter-exit / morph / time-based / hover / keyboard]

### Recommendation
- **Easing**: [token name] — `[cubic-bezier value]`
- **Duration**: [token name] — `[ms value]`
- **Properties**: [transform, opacity, etc.]
- **Transform Origin**: [if applicable]
- **Spring vs Bezier**: [recommendation and why]
- **Bounce**: [yes/no and why]

### Implementation
[Code snippet or CSS/JS example]

### Notes
[Any specific guidance for this case]

交互示例

用户：“这个下拉菜单应该如何添加动效？”

回复：

## Animation Recommendation

**Component**: Dropdown menu

### Evaluation
- **Purpose**: Responsiveness — immediate feedback when user clicks trigger
- **Frequency**: Medium — common interaction but not rapid-fire
- **Pattern**: Enter/exit — appearing and disappearing from screen

### Recommendation
- **Easing**: --ease-out-quart — `cubic-bezier(.165, .84, .44, 1)`
- **Duration**: --dur-2 — `180ms`
- **Properties**: transform (scale, translateY), opacity
- **Transform Origin**: Top center (or top-left/top-right based on trigger position)
- **Spring vs Bezier**: Bezier is fine here; spring useful if menu can be interrupted mid-animation
- **Bounce**: No — tap-to-open shouldn't bounce

### Implementation
```css
.dropdown {
  transform-origin: top center;
  transition:
    transform 180ms cubic-bezier(.165, .84, .44, 1),
    opacity 180ms cubic-bezier(.165, .84, .44, 1);
}

.dropdown[data-state="closed"] {
  opacity: 0;
  transform: scale(0.96) translateY(-8px);
}

.dropdown[data-state="open"] {
  opacity: 1;
  transform: scale(1) translateY(0);
}

备注

• 使用 scale(0.96)，而不是 scale(0)
• 设置 transform-origin，使其与触发位置一致
• 时长控制在 240ms 以内，保持轻快感

## Tips for Best Results

1. **Be specific about the component** - "dropdown" vs "modal" vs "tooltip" matters
2. **Mention the trigger** - Click, hover, keyboard, scroll
3. **Share context** - "This is a productivity app" vs "marketing landing page"
4. **Ask about multiple states** - Open, close, hover, disabled
5. **Specify framework** - CSS, Framer Motion, GSAP, React Spring

## Resources

This skill includes:

### references/decision-tree.md
Flowchart for choosing the right easing category based on interaction type. Includes scale values, transform-origin guidance, hover/touch considerations, and accessibility.

### references/easing-tokens.md
Complete set of easing curves (ease-out, ease-in-out families), duration tokens, and performance guidelines.