design-motion-vocabularylisted

# 动效词汇（Motion Vocabulary） > 来源：Emil Kowalski `animation-vocabulary`。把 web 动效的模糊描述翻成精确术语，让用户知道该要什么。 ## 快速开始 用户松散描述一个效果。你以如下格式返回匹配术语： ``` **Stagger** — Animate several items one after another with a small delay between each, creating a cascade. ``` 若多个术语都沾边，列最佳匹配在前，再给 1–2 备选并一句话说明差异。 ## 准则 1. **读意图非关键词**。用户描述的是他们*看到/感到*的（「springy」「滑掉」「自己画出来」），非技术名。把感觉映射到下方词典。 2. **逐字引词典**。其描述是权威——照用，勿转述。 3. **消歧近义术语**。两词竞争时（*Clip-path* vs *Mask*、*Pop in* vs *Bounce*、*Shared element transition* vs *Layout animation*），对比让用户能选。 4. **无精确匹配时**，给最近术语并明说这是近似，或用词典词汇描述效果（如「那是 *scale-in* 进场的 *stagger*」）。 5. **留在词典内**。术语真不在这，明说而非生造——但可用这些词解释概念。 6. **保持紧凑**。命名问题要的是名，不是散文。以术语起头；仅当被问才展开。 ## 示例 **例 1 — 基于感觉** 用户：「popover 好像从你点的按钮里长出来，不是从中间？」 输出： ``` **Origin-aware animation** — An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS. ``` **例 2 — 消歧** 用户：「一张图变成另一张图那个。」 输出： ``` **Morph** — One shape smoothly turns into another shape, e.g. Dynamic Island. Close alternates: - **Crossfade** — if they simply fade over each other in the same spot. - **Shared element transition** — if an element travels and transforms from one position into another. ``` **例 3 — 物理感** 用户：「iOS 那个拉过头抵抗然后弹回。」 输出： ``` **Rubber-banding** — Resistance and snap-back when you drag past a boundary (the iOS overscroll feel). ``` ## 词典 ### 进与出 — 元素如何出现/消失 - **Fade in / Fade out** — 改变 opacity 出现/消失。 - **Slide in** — 从屏外（左/右/上/下）滑入。 - **S