# Find Animation Opportunities

> 动画机会发现——在代码库或UI中搜索真正适合添加动画的时刻，同时拒绝所有不应该动画的地方。只读；它提出精确值的运动建议，不实现它。适用于'这里可以加什么动画'、'让这个感觉更有生命力'等场景。吸收自 emilkowalski/skills。

- Skill: `jorinyang/find-animation-opportunities` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jorinyang/find-animation-opportunities`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jorinyang/find-animation-opportunities/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jorinyang (https://skillmd.com/u/jorinyang)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jorinyang/find-animation-opportunities

---


# Finding Animation Opportunities · 动画机会发现

> **核心前提**：Emil Kowalski 的 ["You Don't Need Animations"](https://emilkowal.ski/ui/you-dont-need-animations)——有时最好的动画是没有动画。到处建议运动的机会发现器比无用更糟——它产生缓慢、过度动画的界面。

**定位**：这是一个过滤器，和发现器一样多。期望拒绝大多数候选者。高确信度的短列表胜过长的愿望清单。

---

## 四道门槛

每个候选者必须按顺序通过所有四个问题。记录答案——它会出现在报告中。

### 1. 频率——用户多久看到一次？

| 频率 | 判定 |
|------|------|
| 100+次/天（键盘快捷键、命令面板、核心导航） | **拒绝。永远不要动画。** |
| 每天几十次（悬停状态、列表导航、频繁切换） | 拒绝，或仅建议几乎不可察觉的运动 |
| 偶尔（模态、抽屉、toast、设置） | 合格——标准动画 |
| 稀少/首次（引导、空状态、成功、庆祝） | 合格——愉悦预算在这里 |

键盘触发的操作（命令面板、快捷键、焦点跳转）是取消资格项，不是判断调用。

### 2. 目的——为什么这个要动画？

答案必须是以下之一，明确命名：
- **反馈** — 确认界面听到了用户
- **空间一致性** — 显示事物从哪里来或去了哪里
- **状态指示** — 使状态变化可读
- **防止突变** — 没有桥梁的内容传送、出现或消失
- **解释** — 展示功能如何工作的运动（仅限营销/引导）
- **愉悦** — 仅在稀少/首次频率层允许

"看起来酷"不在这份清单上。如果不能用这些词之一命名目的，拒绝候选者。

### 3. 速度——能在预算内吗？

建议必须在标准预算内工作（UI 300ms以下）：

| 元素 | 持续时间 |
|------|---------|
| 按钮按下反馈 | 100-160ms |
| 工具提示、小弹窗 | 125-200ms |
| 下拉、选择器 | 150-250ms |
| 模态、抽屉 | 200-500ms |
| 营销/解释性 | 可以更长 |

如果这个时刻只作为慢的、炫耀的动画才"有效"，它没有通过门槛。

### 4. 功能——运动在这里帮助还是阻碍？

功能性、信息密集UI上的装饰会阻碍。装饰性的鼠标跟踪效果在营销页面上没问题；在银行应用的功能图表上，没有动画更好。

---

## 搜索位置

### 反馈缺口
- 没有 `:active` 状态的可按压元素 → `transform: scale(0.97)`
- 用普通点击确认的破坏性操作 → 按住确认填充

### 传送状态
- 交换、出现或瞬间消失的内容 → 淡入/缩放入场
- 突然打开的手风琴/折叠 → 高度+透明度过渡
- 没有桥梁添加/移除的列表项 → 进入/退出过渡

### 缺失的空间故事
- 没有连接到触发器就出现的面板、弹窗、菜单 → 从触发器缩放
- 以不同于进入方式退出的可关闭表面 → 对称路径

### 组入口
- 页面用户偶尔看到时一次弹出的网格或列表 → 30-80ms错开

### 手势接缝
- 没有物理就吸附的可拖动/可滑动元素 → 弹簧 + 基于速度的dismiss

### 愉悦预算
- 渲染平淡的稀少高情感时刻——首次运行、空状态、成功/完成、庆祝

---

## 必需输出格式

### 第一部分——机会表

| # | 位置 | 今天 | 目的 | 频率 | 建议运动 |
|---|------|------|------|------|---------|
| 1 | `Toast.tsx:41` | 新toast瞬间出现 | 防止突变 | 偶尔 | 通过 `@starting-style` 进入：`opacity: 0; translateY(100%)` → settled, `transition: 400ms ease` |
| 2 | `Button.tsx:18` | 没有按下反馈 | 反馈 | 每天几十次 | `:active { transform: scale(0.97) }`, `transition: transform 160ms ease-out` |

每个"建议运动"单元格携带确切值——曲线、持续时间、属性——从共享词汇表中提取，永不近似。

### 第二部分——被拒绝的候选者（必需）

列出2-5个你考虑过并**故意没有**建议的地方，每个都带有杀死它的门槛问题：

- `CommandMenu.tsx:12` — 命令面板打开/关闭。**拒绝：键盘触发，100+/天。永远不要动画。**
- `Chart.tsx:88` — 分析图表上的动画线条绘制。**拒绝：用户正在阅读的功能数据；装饰阻碍。**

这部分是将此技能与动画愿望清单区分开来的。

### 第三部分——结论

简短段落：这个界面实际上需要多少运动，是否已经接近正确，以及哪个单一建议有最高杠杆。

---

## 与其他技能的协作

- **与 improve-animations**：本技能发现机会，improve-animations 审计并修复现有动画
- **与 review-animations**：本技能寻找新的，review-animations 审查现有的
- **与 apple-design / emil-design-eng**：本技能使用它们的原则来判断什么值得动画