animation-vocabulary

动画术语

初始响应

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

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

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

将对动态或效果的模糊描述转换成准确术语，让用户知道该如何询问。

快速开始

用户会宽泛地描述某种效果。你要按以下格式返回匹配的术语：

**Stagger** — Animate several items one after another with a small delay between each, creating a cascade.

如果有多个术语可能符合，先列出最匹配的术语，再列出 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** — 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).

术语表

经过整理的快照，与项目的 /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 — 将动画划分为离散的步骤，例如倒计时器。

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

• 平移 — 沿 X 轴或 Y 轴移动元素。
• 缩放 — 放大或缩小元素。
• 旋转 — 让元素绕某个点旋转。
• 倾斜 — 沿 X 轴或 Y 轴倾斜元素，使其变形为非矩形。
• 3D 倾斜 / 翻转 — 在 3D 空间中旋转（rotateX / rotateY）以增加纵深感。
• 透视 — 3D 效果的强弱；值越小，纵深感越夸张，就像观看者离得更近。
• 变换原点 — 缩放或旋转时作为锚点的位置。
• 感知原点的动画 — 元素从触发它的位置开始动画，例如弹出层从打开它的按钮处展开，而不是从 CSS 默认的自身中心展开。

状态间的过渡 — 将一个状态、视图或元素与另一个连接起来

• 交叉淡化 — 一个元素淡出，同时另一个元素在同一位置淡入。
• 连续性过渡 — 通过视觉连接变化前后的状态，让用户保持方向感。例如，让同一个矩形变大或缩小。
• 形变 — 一种形状平滑地变成另一种形状，例如 Dynamic Island。
• 共享元素过渡 — 一个元素从一个位置移动并变形到另一个位置，例如缩略图展开为卡片。
• 布局动画 — 元素的大小或位置发生变化时，动画过渡到新位置，而不是突然跳转。
• 手风琴 / 折叠 — 某个区域平滑地展开或收起，以显示或隐藏内容。
• 感知方向的过渡 — 前进时内容向一个方向滑动，返回时则向相反方向滑动，让导航具有方向感。

滚动 — 与滚动或视图间导航相关联的动效

• 滚动显现 — 元素进入视口时淡入或滑入。
• 滚动驱动动画 — 动画进度直接关联滚动位置。
• 视差 — 滚动时背景和前景以不同速度移动，营造纵深感。
• 页面过渡 — 从一个页面或路由导航到另一个页面或路由时播放的动画。
• 视图过渡 — 浏览器在两个状态或页面之间进行形变，将共享元素连接起来。

反馈与交互 — 响应用户的操作

• 悬停效果 — 光标移到元素上时发生的视觉变化。
• 按下 / 点击反馈 — 点击元素时轻微缩小，让它感觉更有实体感。
• 按住以确认 — 用户按住按钮时逐渐填满的进度效果。
• 拖动 — 抓住元素并移动，松开时通常会带有惯性。
• 拖动以重新排序 — 拖动列表中的项目以调整顺序，同时其他项目会移开腾出空间。
• 滑动以关闭 — 将元素拖出屏幕以关闭它，例如抽屉或提示条。
• 橡皮筋效果 — 拖过边界时产生阻力并弹回（iOS 的过度滚动效果）。
• 摇晃 / 摆动 — 快速左右抖动，表示错误或输入被拒绝。
• 波纹 — 从点击位置扩散的圆圈，用来确认按下操作。

缓动 — 动画速度如何变化

• 缓动 — 动画加速或减速的速率。
• 缓出 — 开始快，结束慢。大多数 UI 和响应用户操作的场景都默认使用这种方式。
• 缓入 — 开始慢，结束快。通常应避免使用，因为可能感觉迟缓。
• 缓入缓出 — 慢、快、慢。适合已在屏幕上的元素从 A 移动到 B。
• 线性 — 匀速。UI 中应避免使用，仅用于加载指示器或跑马灯。
• 三次贝塞尔曲线 — 可自定义的缓动曲线，用于精确控制动画。
• 非对称缓动 — 加速和减速速率不同的曲线。比对称曲线更有活力。

弹簧动画——以基于物理的运动替代固定时长的缓动

• 弹簧——由物理参数（张力、质量、阻尼）驱动的运动，而非设定时长。
• 刚度 / 张力——弹簧拉向目标的力度。值越高，感觉越迅捷。
• 阻尼——弹簧稳定下来所需的速度。阻尼越低，弹跳和振荡越明显。
• 质量——动画元素感觉有多重。质量越大，运动越慢、越迟滞。
• 弹跳——弹簧越过目标后再稳定下来，增添俏皮感。
• 感知时长——弹簧给人的完成感持续多久，即使它实际上还在进行细微的稳定调整。
• 动量——携带速度的运动，尤其是在拖动或动画被打断后。
• 速度——元素移动的快慢和方向。弹簧动画被打断时，会将速度带入下一段动画，因此快速甩动的元素会保持原有速度。
• 可中断动画——可在运动过程中平滑改变方向，而不必先播放完毕的动画。

循环与环境动效——自动运行的动画

• 跑马灯——循环连续滚动的文本或内容。
• 循环——重复播放指定次数或无限次的动画。
• 交替（往返）——循环中的每次迭代都先正向播放再反向播放，而不是跳回起点。
• 环绕——元素沿连续路径绕着另一个元素转动。
• 脉冲——反复轻微改变缩放比例或不透明度，以吸引注意。
• 浮动——轻柔、持续地上下漂移，让静态元素显得鲜活、轻盈。
• 待机动画——元素静止等待交互时播放的细微动效。

润色与效果——让优秀更出色的细节

• 模糊——用于柔化元素或遮掩细微瑕疵的模糊滤镜。
• 裁剪路径——将元素裁剪为特定形状，用于揭示效果、遮罩和前后对比滑块。
• 遮罩——使用形状或渐变隐藏或显示元素的部分区域——类似裁剪路径，但边缘柔和且可渐隐。
• 前后对比滑块——可拖动的分隔线，通过擦除效果在两张叠加图片之间切换，以便进行比较。
• 线条绘制——SVG 路径自行显现，就像一支隐形画笔沿路径描绘。
• 文本变形——文本变化时逐个字符播放动画，以突出显示新值。
• 骨架屏 / 闪光效果——内容加载期间显示的占位内容，带有移动的光泽效果。
• 数字滚动器——滚动数字或递增计数至指定值。
• 等宽数字——宽度固定的数字，不会在变化时左右跳动。对数字滚动器、计时器和计数器至关重要。
• 打字机效果——文本逐个字符出现，仿佛正在输入。

性能——保持动效流畅、避免卡顿

• 帧率（FPS）——每秒绘制的帧数。60fps 是流畅动效的基准；较新的显示器可达 120fps。
• 卡顿——浏览器因无法跟上动画而丢帧时出现的可见停顿。
• 丢帧——浏览器未能在截止时间前绘制的一帧，会导致运动出现短暂卡顿。
• 合成——让 GPU 在元素自己的图层上移动或淡化元素，而无需重新计算布局或绘制。
• will-change——一种 CSS 提示，表明元素即将播放动画，以便浏览器提前将其提升至独立图层。
• 布局抖动——对 width、height、top 或 left 等属性进行动画处理，会迫使浏览器每帧重新计算布局，从而导致卡顿。

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

• 目的明确的动画 — 动效应发挥实际作用 — 帮助用户定位、提供反馈、展示关系 — 而不只是装饰。
• 预备动作 — 在动作发生前，先向相反方向轻微蓄势，暗示接下来会发生什么。
• 跟随动作 — 元素的部分区域在主要动作停止后继续移动并稍作停顿，增添重量感。
• 挤压与拉伸 — 元素移动时使其发生形变，以表现重量、速度和灵活性。
• 感知性能 — 恰当的动画能让界面感觉更快，即使实际并非如此。
• 使用频率 — 用户看到某个动画的次数越多，该动画就应越短、越含蓄。
• 空间一致性 — 通过动画让元素在不同状态下保持其身份和位置，使用户始终清楚各元素去了哪里。
• 硬件加速 — 为 transform 和 opacity 添加动画可让 GPU 保持动效流畅。
• 减少动态效果 — 遵循用户的 prefers-reduced-motion 设置，减弱或移除动效。