把缓动曲线从抽象概念变成直观体验，重点覆盖 back、elastic、steps 等带参数的 ease

Ease Lab

同一段运动，只换曲线，气质就会立刻变掉

当前选择 back.out(1.7) ，先看位移，再看曲线图，最后再决定它该不该进你的页面。

当前体验

先看运动结果，再看曲线形状

越界再回收抽屉、标签、悬浮面板

位移0%

组件感受越界再回收

back

进度反馈1.05s

曲线图

上冲 1.1

0%50%100%

适合抽屉、标签、悬浮面板

注意overshoot 太大会显得笨重

代码ease: 'back.out(1.7)'

参数区

directionout

outininOut

duration1.05s

distance180px

overshoot1.7

overshoot 现在是 1.7，越大越容易先冲出终点再回收。

适合少量重点元素，不适合把整页都做成回弹。

在高频交互里，1.4 到 1.8 往往已经够用。

系统常用预设

先建立一个判断标准

同一段动画的“感觉”，通常由两个东西决定：

1. 走多远。
2. 怎么走。

ease 负责第二件事，也就是速度分配方式。它往往比位移量更影响气质。

常见缓动族怎么选

缓动	观感	常见用途
none / linear	匀速、机械	进度条、仪表、滚动映射
power*.out	干脆、现代	卡片入场、按钮反馈、面板切换
power*.inOut	头尾都有节奏	需要完整表演感的过渡
sine.out	轻柔自然	内容淡入、图片浮现
expo.out	冲刺后急停	强调型动效、速度感
bounce.out	落地反弹	玩味反馈、轻量游戏化
back.out()	越界再回收	抽屉、标签、悬浮面板
elastic.out()	明显弹簧感	吉物感、强反馈、娱乐化页面
steps()	离散跳格	数字滚动、帧动画、像素风

带参数的 ease 要怎么理解

back.out(overshoot)

• overshoot 越大，越界得越远。
• 数值太小，回弹感不明显。
• 数值太大，容易显得夸张和笨重。

elastic.out(amplitude, period)

• amplitude 越大，弹幅越大。
• period 越小，抖动越密。
• 如果同时把两者都调高，视觉会很戏剧化，适合少量重点元素，不适合大面积 UI。

steps(count)

• count 越大，台阶越细。
• count 越小，跳变越硬。
• 它不是“平滑过渡”，而是“分段切换”。

什么时候不要乱用夸张 ease

• 表单、弹窗、导航这类高频交互，优先克制。
• 数据看板、后台系统通常适合 power、sine 这类更中性的曲线。
• elastic、bounce 很吸睛，但如果一个页面到处都弹，会迅速失去层次。

推荐的默认选择

如果你只是想先得到一个稳妥结果，可以从这里开始：

• 大多数 UI 入场：power2.out
• 比较柔和的内容浮现：sine.out
• 多步过渡或往返：power2.inOut
• 强提示但不过分卡通：back.out(1.4 ~ 1.8)

一条经验

如果动画节奏不对，先换 ease，再改时长。很多“不高级”的感觉，其实不是动画太短，而是曲线和场景不匹配。