Animation Vocabulary 是一个反向查询术语表技能,旨在帮助用户把对网页动画或动效的模糊、感性描述,转换成精确的专业术语。它的核心用途是“命名”——当用户知道某个效果看起来或感觉上是什么样,但不知道它叫什么时,这个技能可以给出准确的术语,让用户知道该用什么词去提问、搜索或与团队沟通。
主要能力
该技能覆盖了网页动效领域的广泛术语,按主题组织成多个类别:
- 入场与退场:描述元素如何出现和消失,如 Fade in / Fade out、Slide in、Scale in、Pop in、Reveal、Enter / Exit。
- 时序与编排:协调多个元素或时刻,如 Keyframes、Interpolation / Tween、Stagger、Orchestration、Delay、Duration、Fill mode、Stepped animation。
- 位移与变换:改变元素的位置、大小或角度,如 Translate、Scale、Rotate、Skew、3D tilt / Flip、Perspective、Transform origin、Origin-aware animation。
- 状态之间的过渡:连接一个状态、视图或元素到另一个,如 Crossfade、Continuity transition、Morph、Shared element transition、Layout animation、Accordion / Collapse、Direction-aware transition。
- 滚动相关:与滚动或视图导航相关的动效,如 Scroll reveal、Scroll-driven animation、Parallax、Page transition、View transition。
- 反馈与交互:响应用户操作,如 Hover effect、Press / Tap feedback、Hold to confirm、Drag、Drag to reorder、Swipe to dismiss、Rubber-banding、Shake / Wiggle、Ripple。
- 缓动:动画速度的变化方式,如 Easing、Ease-out、Ease-in、Ease-in-out、Linear、Cubic-bezier、Asymmetric easing。
- 弹簧动画:基于物理的运动,如 Spring、Stiffness / Tension、Damping、Mass、Bounce、Perceptual duration、Momentum、Velocity、Interruptible animation。
- 循环与氛围动效:自行运行的动画,如 Marquee、Loop、Alternate (yoyo)、Orbit、Pulse、Float、Idle animation。
- 细节与效果:区分优秀与卓越的小细节,如 Blur、Clip-path、Mask、Before / after slider、Line drawing、Text morph、Skeleton / Shimmer、Number ticker、Tabular numbers、Typewriter。
- 性能:保持动效流畅而非卡顿,如 Frame rate (FPS)、Jank、Dropped frame、Compositing、will-change、Layout thrashing。
- 需要了解的原则:指导何时以及如何做动画,如 Purposeful animation、Anticipation、Follow-through、Squash & stretch、Perceived performance、Frequency of use、Spatial consistency、Hardware acceleration、Reduced motion。
使用方式
该技能以对话方式工作。用户用自然语言描述一个动效,技能会返回匹配的术语,格式为“术语 — 描述”。如果多个术语都可能匹配,会先列出最佳匹配,再给出 1–2 个备选,并用一句话说明区别。当没有完全匹配的术语时,会给出最接近的术语并说明这是近似,或者用术语表中的词汇来描述该效果。技能强调“读意图而非关键词”,用户描述的是看到或感觉到的效果,而不是技术名称。回答保持简洁,术语优先,只有用户要求时才展开。
适用场景
- 设计师或开发者想描述一个动效但不知道术语,需要快速找到准确词汇。
- 团队沟通中需要统一动效术语,避免歧义。
- 搜索实现方案时,需要知道正确的关键词。
- 学习网页动效概念,通过模糊描述反向查找术语。
限制
该技能的知识范围限于其内置的术语表。如果某个术语确实不在表中,技能会明确说明,而不是编造术语。它不提供代码实现、不生成动画、不评估性能,也不涉及具体框架或库的用法。该技能基于 Emil Kowalski 的动画理念,术语描述以术语表原文为准,不进行改写。