animation-vocabulary / 中文方法笔记

中文术语与反向检索

整理于 2026.10.23 · 10 个小节

来源:animation-vocabulary/SKILL.md。保留其术语范围,解释用中文重写并补充边界。目标是把“那个弹一下的效果”说成可实现、可验证的需求。

8.1 缓动与时间

英文中文与判断
Easing缓动:进度随时间怎样变化
ease-out先快后慢,常用于及时响应后停稳
ease-in先慢后快,是否适用看场景,作者不喜用于常规交互
ease-in-out慢起、加速、慢停,屏内往返常用
easeCSS 默认曲线,不是 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 liftHover 抬升,命中区域应稳定
Hover flickerHover 命中与位移互相打断形成抖动
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 形状之间的插值,结构需要匹配或使用专用插值
viewBoxSVG 用户坐标可视区域,与 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 中文自学资料。数字和配方是调试起点,库与浏览器的行为需结合实际版本验证;教材中的原演示验收记录不等同于你的项目已通过测试。

技术校正与版本边界 ↗完整来源说明 ↗
继续下一篇选工具与控制依赖