缓动Easing
你可能会说
动画一卡一卡的不自然，能不能像真实的东西那样有快有慢？
缓动是规定动画在持续时间内如何加速和减速的速度曲线进度条和持续旋转常用 linear，界面入场常从快到慢，退场常从慢到快。具体曲线要结合移动距离和界面语义测试；项目里应收敛成少量可复用规则，回弹等物理运动再考虑弹性 Spring。
也常被叫作动效曲线动画曲线Easing Curve
什么时候用
- ease-out：先快后慢，逐渐减速并停下
- 退场可尝试 ease-in：元素加速离开；不是所有切换都适用
- cubic-bezier 自定义：用四个参数调整曲线，并收敛为可复用的动效变量
- 定成少量动效变量：按反馈、进入、离开等用途复用，统一但不强迫所有动作一条曲线--ease按钮卡片弹窗按动作类型复用少量曲线，兼顾一致性与场景差异
什么时候不用
- 位移入场直接使用 linear：它更适合进度和连续旋转，应按语义选择曲线linear 保持匀速，不适合所有入场位移
- 把 ease-in 当入场硬规则：有时会显得起步迟缓，应按目标与距离测试入场使用 ease-in，前段反馈可能显得迟缓
- 每个动画随意定义不同曲线：会削弱动效系统的一致性
- 用过度拉伸的贝塞尔曲线模拟回弹：难以稳定控制；需要物理回弹时可用 弹性 Spring两端拉过头，回弹失控；要弹性该用弹簧
组成结构 · Anatomy
横轴：时间 →纵轴：进度 ↑
弯在哪里，快慢就在哪里
横轴，动画从头播到尾
纵轴，属性变到了多少
常见变体 · Variants
先快后慢ease-out
入场与出现，先快后稳停住
先慢后快ease-in
退场与消失，加速离场
两头都缓ease-in-out
原地状态切换，两端都柔和
自定义曲线cubic-bezier
要独特品牌手感时微调
典型使用场景
按钮悬停的手感
B
I
🔗
🖱️
ease-out：变色先快后慢，手指能感到“跟手”
弹窗入场刹车
ease-out 入场：快速冲进来，到点前“刹车”停稳
元素退场加速
ease-in 退场：起步较缓，随后加速离开
全站统一动效曲线
设计规范 · 动效 Tokens
--ease-standard
cubic-bezier(.2,.8,.2,1)
按钮悬停
弹窗入场
卡片浮起
全用这一条
延伸阅读 · 权威出处