中文术语与反向检索
来源:animation-vocabulary/SKILL.md。保留其术语范围,解释用中文重写并补充边界。目标是把“那个弹一下的效果”说成可实现、可验证的需求。
8.1 缓动与时间
| 英文 | 中文与判断 |
|---|---|
| Easing | 缓动:进度随时间怎样变化 |
| ease-out | 先快后慢,常用于及时响应后停稳 |
| ease-in | 先慢后快,是否适用看场景,作者不喜用于常规交互 |
| ease-in-out | 慢起、加速、慢停,屏内往返常用 |
| ease | CSS 默认曲线,不是 linear |
| linear | 匀速,计时、匀速旋转常用 |
| Custom easing / cubic-bezier | 自定义时间曲线,四个控制点坐标 |
| Symmetric / asymmetric | 对称/非对称,把变化平均安排或前置/后置 |
| Duration | 持续时间,与曲线一起决定观感 |
| Perceived performance | 感知速度,界面感觉多快,不等于请求真正变快 |
| Trackability threshold | 眼睛难以跟踪变化的速度边界,没有所有人的通用常数 |
| Frequency of use | 出现频率,决定动画是否会成为日常等待 |
8.2 弹簧与物理
| 英文 | 中文与判断 |
|---|---|
| Spring animation | 基于目标、当前位置和速度的弹簧运动 |
| Bounce | 越过目标后的回弹表现,不等于 spring 本身 |
| Perceptual duration | 感觉已完成的时间,可能早于数值完全收敛 |
| Stiffness / damping / mass | 刚度/阻尼/质量;阻尼过高会慢,不是越大越快 |
| Interruptibility / momentum | 可中断性/动量;位置连续与速度连续需分别判断 |
| linear() | CSS 分段线性缓动函数,可近似采样的弹簧曲线,但不自动带入新释放速度 |
8.3 入场、反馈与编排
| 英文 | 中文与判断 |
|---|---|
| Pop in / scale-in | 近完整尺寸缩放入场,常配淡入 |
| Scale-from-zero | 从零缩放;原文列为常规 UI 的反模式,非技术禁令 |
| Press feedback / scale-on-press | 按压反馈,例如 scale(0.97) |
| The lift | Hover 抬升,命中区域应稳定 |
| Hover flicker | Hover 命中与位移互相打断形成抖动 |
| Blur transition / motion blur | 小模糊混合状态;CSS blur 不是物理真实运动模糊 |
| Stagger | 多项错峰,延迟累加 |
| Orchestration | 编排多个运动的先后、重叠和层级 |
| Layered entry | 父子重复入场;通常应简化 |
8.4 空间与身份
| 英文 | 中文与判断 |
|---|---|
| Spatial consistency / awareness | 空间一致性:来去方向、层级关系前后一致 |
| Object permanence | 对象恒常性:用户持续认出这是同一对象 |
| Origin-aware animation | 围绕触发位置展开,不从无关中心冒出 |
| Direction-aware animation | 随前进/返回等方向改变运动 |
| Crossfade | 两份内容在原处交叉淡入淡出 |
| Morph | 可见对象连续改变形状或尺寸 |
| Shared element transition | 同一视觉身份跨布局/视图移动和变形 |
区分示例:“图淡掉,另一张图出现”主要是 crossfade;“同一张缩略图扩成详情图”是 shared element;“按钮容器长成表单”强调 morph,可由 shared layout 实现。
8.5 Motion 与布局
| 英文 | 中文与判断 |
|---|---|
| Layout animation | 在旧新布局矩形间做视觉过渡 |
| Shared layout / layoutId | 连接不同节点的视觉身份 |
| AnimatePresence | 在移除节点时管理退出呈现生命周期 |
| popLayout | 退出节点离开布局流,让周围可立即重排 |
| wait | 先退出再进入,一次一个子项 |
| Variants | 命名目标集,可接收 custom 动态参数 |
| Motion value | 可高频更新、无需每帧 React render 的值 |
| Auto-height animation | 内容变高时,通过测量或支持的内在尺寸过渡来衔接 |
8.6 SVG
| 英文 | 中文与判断 |
|---|---|
| Line-drawing / self-drawing stroke | 用虚线偏移揭示线条,产生描边绘制感 |
| stroke-dasharray / stroke-dashoffset | 虚线段/间隙,以及虚线模式偏移 |
| Path morphing | 路径 d 形状之间的插值,结构需要匹配或使用专用插值 |
| viewBox | SVG 用户坐标可视区域,与 preserveAspectRatio 一起影响显示映射 |
| transform-box | 指定变换参考盒,fill-box 与 view-box 常用于解决 SVG 原点问题 |
8.7 手势
| 英文 | 中文与判断 |
|---|---|
| Rubber-banding | 越界后阻力逐渐增大的拉伸感 |
| Momentum dragging | 释放后按速度继续运动并衰减 |
| Drag-to-dismiss | 拖动达到距离/速度条件后关闭 |
| Follow-the-cursor | 装饰元素跟随鼠标,可有弹性;直接操控不应故意滞后 |
| Hover intent / debounce | 稍作停留再开启,降低误触;连续 tooltip 可以即时切换 |
| Two-tap pattern | 第一次展示 hover 信息,第二次执行;仅适用于明确需要的交互模型 |
8.8 性能、无障碍与设计判断
| 英文 | 中文与判断 |
|---|---|
| Hardware acceleration / GPU offload | 某些渲染或推进工作可离开主线程,不是零成本保证 |
| Layout / Paint / Composite | 布局、绘制、合成 |
| will-change | 提前告知可能变化的提示,可能增加资源成本 |
| Reduced motion | 减少非必要运动,保持状态与操作可理解 |
| Feeling | 曲线、速度、幅度共同形成的产品性格 |
| Cohesion / single entity | 多个子动画像同一个对象在变化 |
| Taste | 能解释好坏与取舍的设计判断能力 |
| Animations as proof of care | 细节传达打磨程度,但不能靠繁复运动替代功能 |
| Micro-interaction | 小范围响应,例如按压、状态切换 |
8.9 命名 skill 怎样工作
读用户描述的视觉意图→给最接近术语→若有歧义补 1–2 个候选→说明差异。职责是命名,不是未经要求展开实现。原文要求逐字引用术语释义;本教材为中文学习做了改写,不把英文句子当必须背诵内容。
自测与答案
“一个形状变成另一个”:先问有没有移动/身份连接、还是只淡化交接;可能是 morph、shared element 或 crossfade。“感觉像拖着糖浆”:如果是直接操控,查 spring/transition 造成的跟手延迟。“卡片一排依次出来”:stagger,若父容器也滑入还要查 layered entry。
关于这份笔记
来自作者已整理的 Skills 中文自学资料。数字和配方是调试起点,库与浏览器的行为需结合实际版本验证;教材中的原演示验收记录不等同于你的项目已通过测试。
技术校正与版本边界 ↗完整来源说明 ↗继续下一篇选工具与控制依赖