缓动Easing
视觉效果与操作状态控制动画开始和结束时怎样加减速
缓动决定一个动作在相同时长内怎样分配速度。持续旋转常用匀速，界面入场和退场会使用不同曲线；项目里最好收敛成少量可重复使用的规则。
ease-out 入场ease-in 退场linear 机械
什么时候用
- ease-out：先快后慢，稳稳停住
- 退场用 ease-in：元素加速离开，不磨叽ease-in：起步缓，加速离开
- cubic-bezier 自定义：四个参数捏出品牌自己的手感cubic-bezier 四个数，捏出任意曲线
- 定成全站变量：一条曲线全站用，动效气质才统一--ease按钮卡片弹窗全站共用一条曲线，动效气质统一
什么时候不用
- 默认用 linear：匀速不自然，像机器人linear 匀速，像机器人一样不自然
- 入场用 ease-in：先磨叽再猛冲进来，方向反了入场用 ease-in：先磨叽，再猛地冲进来
- 每个动画随手一条曲线：全站动作气质分裂
- 贝塞尔两端拉过头求回弹：失控难看，要弹性用 弹性 Spring两端拉过头，回弹失控；要弹性该用弹簧
组成结构 · Anatomy
横轴：时间 →纵轴：进度 ↑
1曲线形状Curve弯在哪里，快慢就在哪里
2时间轴Time横轴，动画从头播到尾
3进度轴Progress纵轴，属性变到了多少
常见变体 · Variants
先快后慢ease-out
入场与出现，先快后稳停住
先慢后快ease-in
退场与消失，加速离场
两头都缓ease-in-out
原地状态切换，两端都柔和
自定义曲线cubic-bezier
要独特品牌手感时微调
典型使用场景
按钮悬停的手感
B
I
🔗
🖱️
ease-out：变色先快后慢，手指能感到“跟手”
弹窗入场刹车
ease-out 入场：快速冲进来，到点前“刹车”停稳
元素退场加速
ease-in 退场：起步缓、加速离开，150ms 收干净
全站统一动效曲线
设计规范 · 动效 Tokens
--ease-standard
cubic-bezier(.2,.8,.2,1)
按钮悬停
弹窗入场
卡片浮起
全用这一条