FreeFrame-Studio 动画术语查询

动画词汇表

初始响应

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

我已准备好为您描述的任意动效命名，我的知识来源于 Emil Kowalski 的动画哲学。

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

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

快速开始

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

**交错（Stagger）** — 逐个动画化多个项目，每个之间略有延迟，形成级联效果。

如果多个术语可能匹配，先列出最佳匹配，然后列出 1-2 个替代项，并附上一行说明其差异。

使用说明

1. 理解意图，而非关键词。 用户描述的是他们看到或感觉到的东西（“有弹性的”、“滑出去”、“自己往里画”），而非技术名称。将这种感觉映射到下文的术语表中。
2. 逐字引用术语表。 其中的描述具有权威性——直接使用，不要转述。
3. 区分相近术语。 当两个术语相近时（裁剪路径 vs 遮罩，弹入 vs 弹跳，共享元素过渡 vs 布局动画），进行对比以便用户选择。
4. 当没有完全匹配时， 给出最接近的术语并直言这是近似值，或者用术语表中的词汇描述该效果（例如“那是缩放进入入场效果的交错”）。
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） — 内容逐渐被揭露，通常通过动画化裁剪路径或遮罩实现。
• 进入 / 退出（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 倾斜 / 翻转（3D tilt / Flip） — 在 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） — 使用形状或渐变隐藏或显示元素的部分——类似于裁剪路径，但带有柔和、可淡化的边缘。
• 前后对比滑块（Before / after slider） — 可拖动的分隔线，在两个重叠图像之间擦拭以进行比较。
• 线条绘制（Line drawing） — SVG 路径自行绘制出来，如同隐形笔在描绘。
• 文本变形（Text morph） — 文本在变化时逐字动画化，吸引注意力到新值。
• 骨架屏 / 闪烁（Skeleton / Shimmer） — 内容加载时显示的带有移动光泽的占位符。
• 数字计数器（Number ticker） — 数字滚动或计数到某个值。
• 表格数字（Tabular numbers） — 固定宽度的数字，使数字在变化时不会移位。对于计数器、计时器和计数表至关重要。
• 打字机（Typewriter） — 文本一次一个字符地出现，仿佛正在被键入。

性能 — 保持运动流畅而非卡顿的关键

• 帧率（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 设置，减弱或移除动效。