animation-vocabulary

动画词汇表

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

快速开始

用户松散地描述一个效果。你按以下格式返回匹配的术语：

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

如果多个术语都可能匹配，先列出最佳匹配，然后列出 1-2 个备选，并附上一行说明它们的不同之处。

说明

1. 理解意图，而非关键词。 用户描述的是他们看到或感觉到的东西（“有弹性的”、“滑出”、“自己画出来”），而不是技术名称。将感觉映射到下面的术语表。
2. 逐字引用术语表。 其描述具有权威性——直接使用，不要改写。
3. 区分相近术语。 当两个术语竞争时（Clip-path 与 Mask，Pop in 与 Bounce，Shared element transition 与 Layout animation），进行对比以便用户选择。
4. 当没有完全匹配时， 命名最接近的术语，并明确说明这是一个近似，或者用术语表的词汇描述效果（例如“那是 scale-in 进入的 stagger”）。
5. 仅限于此术语表。 如果一个术语确实不在此处，请如实告知，而不是编造一个——尽管你可以用这些词汇解释概念。
6. 保持简洁。 命名问题只需要一个名称，而不是一篇文章。先给出术语；只有在被问及时才展开。

示例

示例 1 — 基于感觉
用户：“当弹出窗口似乎从你点击的按钮中长出来，而不是从它的中间出现时，这叫什么？”
输出：

**Origin-aware animation（原点感知动画）** — 元素从其触发点开始动画，例如弹出窗口从打开它的按钮中生长出来，而不是从 CSS 默认的自身中心开始。

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

**Morph（变形）** — 一个形状平滑地变成另一个形状，例如灵动岛。

相近备选：
- **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 倾斜/翻转） — 在 3D 空间中旋转（rotateX / rotateY）以增加深度。
• Perspective（透视） — 3D 效果的强度——较低的值会夸大深度，就像观察者更近。
• Transform origin（变换原点） — 缩放或旋转的锚点。
• Origin-aware animation（原点感知动画） — 元素从其触发点开始动画，例如弹出窗口从打开它的按钮中生长出来，而不是从 CSS 默认的自身中心开始。

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

• 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（橡皮筋效果） — 拖拽超出边界时的阻力和弹回（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 设置，减弱或移除运动。