jorinyang Finding Animation Opportunities · 动画机会发现
核心前提：Emil Kowalski 的 "You Don't 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：本技能使用它们的原则来判断什么值得动画