阻尼弹性抽屉

支持阻尼橡皮筋回弹的底部抽屉（Bottom Sheet）：拖出锚点范围会被橡皮筋"拉住"，松手根据滑动速度自动吸附到最近的锚点。在下面的手机框里拖动把手试试（手机直接拖）。

实时 Demo

查看完整报告展开抽屉后显示详细数据

趋势对比环比 / 同比切换

设置刷新频率实时 / 5分钟 / 每小时

当前锚点 半展开 40% 松手速度 0 px/ms 橡皮筋拉伸 0px

快速甩动（高速度）会跨过中间锚点直接到顶部；慢慢拖到一半松手则吸附回最近锚点

效果拆解

三个锚点：收起（peek 高度）/ 半展开 / 全展开，抽屉只动 transform: translateY，不碰 height，全程 60fps。
橡皮筋函数：超出范围时位移 resisted = range × (1 - 1/(|overshoot|/c + 1))，c 约 250px——拉得越远阻力越大，永远到不了"完全拖出"，回弹自然。
速度估算：pointermove 里存最近 3~4 个 (y, timestamp) 点，松手时算斜率；|v| > 0.5 px/ms 且方向向上就吸附到"上一个锚点"而不是"最近锚点"——这是"甩一下到顶"手感的关键。
吸附回弹：松手后目标 = 决定出的锚点，用 rAF 弹簧（stiffness 0.12 / 或 CSS transition 0.35s cubic-bezier(.22,1.2,.36,1)）回去，带轻微过冲。
跟手细节：touch-action: none 必须加，否则移动端浏览器会抢占滚动；scrim 透明度随展开比例线性变化。

AI 提示词

实现支持阻尼橡皮筋回弹的底部抽屉（Bottom Sheet）：三个锚点（收起 peek / 半展开 / 全展开），只使用 transform: translateY 移动；拖拽时若超出最上/最下锚点范围，用橡皮筋阻力函数 displaced = range × (1 − 1/(|overshoot|/c + 1))（c≈250px）压缩实际位移；松手时按最近 4 个采样点估算滑动速度，速度超过 0.5px/ms 则朝速度方向吸附到下一个锚点，否则吸附到最近锚点；回弹用 rAF 弹簧或 cubic-bezier(.22,1.2,.36,1) 0.35s 带轻微过冲；抽屉把手区域 touch-action:none，背景 scrim 透明度随展开比例线性过渡。实现支持阻尼橡皮筋回弹的底部抽屉（Bottom Sheet）：三个锚点（收起 peek / 半展开 / 全展开），只使用 transform: translateY 移动；拖拽时若超出最上/最下锚点范围，用橡皮筋阻力函数 displaced = range × (1 − 1/(|overshoot|/c + 1))（c≈250px）压缩实际位移；松手时按最近 4 个采样点估算滑动速度，速度超过 0.5px/ms 则朝速度方向吸附到下一个锚点，否则吸附到最近锚点；回弹用 rAF 弹簧或 cubic-bezier(.22,1.2,.36,1) 0.35s 带轻微过冲；抽屉把手区域 touch-action:none，背景 scrim 透明度随展开比例线性过渡。

橡皮筋系数 c 越小"拉不动"的感觉越强；速度阈值 0.5 越小越容易被"甩飞"。
提示词内置完整算法，AI 能一次写对（这类手势逻辑最容易翻车的就是速度采样）。