grahama1970/animation-vocabulary

动画词汇表

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

快速开始

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

**Stagger** — 依次对多个元素进行动画，每个元素之间有一个小延迟，形成级联效果。

如果多个术语都可能匹配，先列出最佳匹配，然后提供 1–2 个备选，并附上一行说明它们的区别。

说明

1. 理解意图，而非关键词。 用户描述的是他们看到或感受到的东西（“有弹性”、“滑出”、“自己画出来”），而不是技术名称。将这种感受映射到下面的术语表中。
2. 逐字引用术语表。 其描述具有权威性——原样使用，不要改述。
3. 区分相近术语。 当两个术语冲突时（Clip-path vs Mask，Pop in vs Bounce，Shared element transition vs Layout animation），说明它们的区别，以便用户选择。
4. 当没有精确匹配时， 说出最接近的术语，并直截了当地说明这只是近似结果，或者用术语表中的词汇描述该效果（例如，“这相当于一个scale-in入场的stagger效果”）。
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 — 在三维空间中旋转（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 — 将元素拖离屏幕以关闭它，例如抽屉或提示条。
• 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 设置，降低或移除动画。