返回技能市场
通用工具 安全

animation-vocabulary

@admin/animation-vocabulary

Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or building one.

admin 热度 372v0.0.1

动画词汇表

初始回复

当此技能首次被调用且没有具体问题的时候，只回复：

我已准备好为你描述的任何动效命名，我的知识来自 Emil Kowalski 的动画理念。

在用户提问之前，不得提供任何其他信息。

将动效或效果的模糊描述转换为精确术语，让用户知道该问什么。

快速开始

用户粗略描述效果。你按以下格式返回匹配术语：

**Stagger** — 依次对多个项目进行动画，每个之间加入短暂延迟，形成级联效果。

如果多个术语可能匹配，先列出最佳匹配，然后列出 1–2 个备选，并用一行说明它们如何不同。

说明

  1. 理解意图，而非关键词。 用户描述他们*看到*或*感受到*的东西（“有弹性”、“滑出”、“自行绘制”），不是技术名称。将这种感觉映射到下方词汇表。
  2. 逐字引用词汇表。 其描述具有权威性——按原样使用，不要改写。
  3. 区分接近的术语。 当两个术语竞争时（*Clip-path* 与 *Mask*、*Pop in* 与 *Bounce*、*Shared element transition* 与 *Layout animation*），对比它们，让用户可以选择。
  4. 当没有完全匹配时， 命名最接近的术语，并明确说明这是近似，或用词汇表的术语描述该效果（例如“那是一个 *stagger* 的 *scale-in* 入场”）。
  5. 停留在这份词汇表内。 如果某个术语确实不在这里，就如实说明，不要编造一个——尽管你可以使用这些词解释概念。
  6. 保持简洁。 命名问题要的是名称，不是论文。先给出术语；只有被要求时再展开。

示例

示例 1 — 基于感觉 用户：“当你点击的按钮似乎让弹出框从中生长出来，而不是从其中心生长出来时，这叫什么？” 输出：

**Origin-aware animation** — 元素从其触发器处动画出现，例如弹出框从打开它的按钮处生长，而不是从其自身中心生长，后者是 CSS 的默认方式。

示例 2 — 区分 用户：“一张图片变成另一张图片的东西。” 输出：

**Morph** — 一个形状平滑地变成另一个形状，例如 Dynamic Island。

接近的备选：
- **Crossfade** — 如果它们只是在同一位置相互淡入淡出。
- **Shared element transition** — 如果一个元素移动并从一种位置变换到另一种位置。

示例 3 — 物理感觉 用户：“那种 iOS 滚动，当你拉得太远时会抵抗并弹回。” 输出：

**Rubber-banding** — 当你拖拽越过边界时出现的阻力和回弹（iOS 过度滚动的感觉）。

词汇表

_镜像项目 /vocabulary 页面的精选快照；当任一发生变化时，请保持两者同步。_

入场与退场 — 元素如何出现和消失

  • Fade in / Fade out — 元素通过改变不透明度出现或消失。
  • Slide in — 元素通过从屏幕外（左、右、上或下）滑入进入。
  • Scale in — 元素在出现时从小尺寸增长到完整尺寸，常与淡入搭配。
  • Pop in — 元素出现时带有轻微过冲，像是弹跳到位。
  • Reveal — 内容逐渐显露，常通过动画 clip-path 或 mask 实现。
  • Enter / Exit — 元素被添加到屏幕或从屏幕移除时播放的动画。

顺序与计时 — 协调多个元素或时刻

  • Keyframes — 动画中的定义点（0%、50%、100%），浏览器填充它们之间的间隙。
  • Interpolation / Tween — 在起始值和结束值之间生成所有中间帧，使运动连续。
  • Stagger — 依次对多个项目进行动画，每个之间加入短暂延迟，形成级联效果。
  • Orchestration — 有意安排多个动画的时间，使其感觉像一次协调运动。
  • Delay — 动画开始前的时间。
  • Duration — 动画持续的时间。
  • Fill mode — 元素在动画开始前或结束后是否保留其第一帧或最后一帧的样式（例如 forwards）。
  • Stepped animation — 分成离散步骤的动画，例如倒计时器。

移动与变换 — 改变元素的位置、尺寸或角度

  • Translate — 沿 X 或 Y 轴移动元素。
  • Scale — 让元素变大或变小。
  • Rotate — 围绕一个点旋转元素。
  • Skew — 沿 X 或 Y 轴倾斜元素，使其偏离矩形形状。
  • 3D tilt / Flip — 在 3D 空间中旋转（rotateX / rotateY）以增加深度。
  • Perspective — 3D 效果看起来有多强——较低的值会夸大深度，就像观看者更近。
  • Transform origin — 缩放或旋转从中生长或旋转的锚点。
  • Origin-aware animation — 元素从其触发器处动画出现，例如弹出框从打开它的按钮处生长，而不是从其自身中心生长，后者是 CSS 的默认方式。

状态间过渡 — 连接一种状态、视图或元素到另一种

  • Crossfade — 一个元素淡出，另一个元素淡入，位置相同。
  • Continuity transition — 通过视觉连接前后状态来保持用户方向感的变化。例如，让同一个矩形变大和变小。
  • Morph — 一个形状平滑地变成另一个形状，例如 Dynamic Island。
  • 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 — 将元素拖出屏幕以关闭，例如抽屉或 toast。
  • Rubber-banding — 当你拖拽越过边界时出现的阻力和回弹（iOS 过度滚动的感觉）。
  • Shake / Wiggle — 快速左右抖动，表示错误或拒绝输入。
  • Ripple — 从点击点向外扩展的圆圈，确认按压。

缓动 — 速度在动画过程中的变化方式

  • Easing — 动画加速或减速的速率。
  • Ease-out — 开始快，结束慢。大多数 UI 和响应用户动作的默认选择。
  • Ease-in — 开始慢，结束快。通常避免；可能感觉迟钝。
  • Ease-in-out — 慢、快、慢。适合已在屏幕上从 A 移动到 B 的元素。
  • Linear — 恒定速度。避免用于 UI；仅留给旋转器或跑马灯。
  • 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 — 使用形状或渐变隐藏或显示元素的部分内容——像 clip-path，但边缘柔和且可淡出。
  • Before / after slider — 可拖拽的分隔线，在两个叠加图像之间擦除，以进行比较。
  • Line drawing — SVG 路径自行绘制，就像一支隐形笔在描画它。
  • Text morph — 文本在变化时逐字符动画，吸引注意新值。
  • Skeleton / Shimmer — 加载内容时显示的带有移动光泽的占位符。
  • Number ticker — 数字滚动或计数到某个值。
  • Tabular numbers — 固定宽度数字，因此数字在变化时不会移动。对于计时器、计数器等至关重要。
  • Typewriter — 文本逐字符出现，就像正在被输入。

性能 — 让运动保持平滑而不卡顿的因素

  • Frame rate (FPS) — 每秒绘制的帧数。60fps 是平滑运动基线；较新显示器为 120fps。
  • Jank — 浏览器无法跟上动画并丢帧时出现的可见卡顿。
  • Dropped frame — 浏览器错过绘制截止时间的帧，导致运动中出现微小停顿。
  • Compositing — 让 GPU 在独立层上移动或淡入元素，而不重做布局或绘制。
  • will-change — CSS 提示元素即将动画，以便浏览器提前将其提升为独立层。
  • Layout thrashing — 动画 width、height、top 或 left 等属性，迫使浏览器每帧重新计算布局，导致卡顿。

需要了解的原则 — 指导何时以及如何动画的概念

  • Purposeful animation — 运动应服务于功能——定向、提供反馈、展示关系——而不只是装饰。
  • Anticipation — 在动作前向相反方向做小幅预备，暗示即将发生什么。
  • Follow-through — 元素的部分在主运动停止后继续移动并略微稳定，增加重量感。
  • Squash & stretch — 在元素移动时使其变形，以传达重量、速度和弹性。
  • Perceived performance — 合适的动画会让界面感觉更快，即使实际并非如此。
  • Frequency of use — 用户看到动画的频率越高，它应该越短、越微妙。
  • Spatial consistency — 动画时让元素在各状态间保持身份和位置，使用户不会失去对事物去向的跟踪。
  • Hardware acceleration — 动画 transform 和 opacity 可让 GPU 保持运动平滑。
  • Reduced motion — 通过减弱或移除运动来尊重用户的 prefers-reduced-motion 设置。
qianwen skills install @admin/animation-vocabulary