这个效果是怎么做出来的
抽屉的灵魂在三处。第一是跟手：pointermove 里把手势位移直接写进 transform，不经过任何动画函数，手指到哪抽屉到哪。第二是橡皮筋：当抽屉被拖出边界时，超出的部分要打折映射——比如每超出 1px 只显示 0.3px，拖得越远阻力越大，这就是 iOS 那种拉不断的橡皮筋手感。第三是速度吸附：松手前记录最近几帧的位置和时间戳，算出松手瞬间的速度，结合当前位移决定吸到哪个锚点（收起/半开/全开），快甩一下即使位移不大也能翻到下一档。
吸附动画用弹簧曲线收尾，带一点越过的回弹，抽屉像是被磁铁吸进去的。位移全程走 transform，拖动期间零重排，这是跟手不卡的前提。
怎么用这条提示词
底部抽屉是移动端最高频的交互之一：筛选面板、评论区、播放列表都靠它。发给 AI 时说明你的锚点位置（比如 30% 和 80% 两档），它会生成对应的吸附逻辑。如果抽屉里是长列表，记得让 AI 加上「抽屉全开时内部才允许滚动」的判断，否则手势会和页面滚动打架。
想效果更好？试试这些
速度采样至少保留 5 帧，只用最后两帧算速度会在慢拖时误判。橡皮筋的阻尼系数 0.3 到 0.5 之间最像原生，超过 0.6 会显得抽屉是软的。加一层随位移变化的背景遮罩透明度，抽屉拉得越高背景越暗，沉浸感立刻出来。最后别忘了在抽屉顶部画一个小把手条，用户靠它识别「这里可以拖」，比任何文案都直观。