跟手、释放、惯性与可重新抓取

来源：gesture-ui/SKILL.md。核心模型：按住时直接操控，松手后才由物理接管。

4.1 先选现有能力

完整 Sheet 不只有 y 位移，还包括拖动、滚动竞争、遮罩、焦点陷阱、Escape、屏幕阅读器、关闭后焦点恢复。优先评估项目现有原语或成熟 Sheet。自建手势适用于确有差异的卡片/滑动行为，不把教学原型直接当完整无障碍弹窗。

4.2 Track 与 Release

Track 需要保存手势起始位置和当前偏移；中途抓住正在归位的面板，起点应是当前视觉位置，不是上次静止位置。接管时通常停止自主动画，让新指针成为控制来源。

4.3 高频更新不走业务状态

用 motion value 或元素 transform 更新每帧位置；React state 保存 open/closed、当前 snap point 等离散业务状态。不要每次 pointermove 同时更新多个 state。父级继承 CSS 变量驱动整个子树可能引起样式重算，优先缩小更新范围，并通过性能录制确认。

4.4 关闭判断：距离与速度，也要看方向

源配方以移动约 40–50% 或快速甩动为关闭条件。垂直下滑示意：offset.y > threshold || velocity.y > velocityThreshold。不能只看绝对速度：向上高速回拉不应触发向下关闭。速度单位、内容高度、视口与用户意图一起定义。

按住 → 更新偏移
松开 → 检查距离、速度、方向
       → 关闭：从当前位置继续到关闭位置
       → 保留：快速归回合适停靠点
取消 → 停止手势并恢复合理状态

阈值 500px/s 是原文起点，非所有设备通用；原文的速度只服务界面，不应影响业务正确性。

4.5 Rubber-band 与 Snap Point

越界后继续少量移动，给出阻力感；dragElastic≈0.2 是示例。多个停靠点需综合当前位置、速度、方向来选目标。简单移动小部件通常不需要惯性；可关闭 dragMomentum，释放即停。

4.6 联动值从同一来源派生

抽屉 y 从 0 到 drawerHeight 时，遮罩 opacity 可映射 1→0。背景缩放、圆角也从同一进度派生。独立启动遮罩淡出会在用户反向拖动时与抽屉失去同步。测量高度变化后记得更新映射范围，并限制越界范围。

4.7 释放弹跳与点击关闭不同

拖拽释放可能有少量回弹，点击关闭通常不需要。快归位不意味着不受控地弹几次。Reduced motion 下保留用户主动操控的跟手，去掉多余惯性、振荡与装饰联动。

4.8 CSS 仿弹簧的边界

原文 Sheet 曲线 cubic-bezier(0.32,0.72,0,1)、500ms，把运动提前，尾部柔和。它模仿视觉曲线，不能自动携带任意释放速度。小浮层可以用约 200–270ms，开合、变高、内容切换共同调节。

4.9 触摸与滚动竞争

纵向拖动区域可能设置 touch-action: pan-x，让浏览器保留水平滚动而把纵向留给手势；但这也会限制区域内纵向原生滚动，不能不加区分地用于长内容。常用策略是明确拖动把手，内容区保留滚动；顶部到边界时是否接管，需设计。Pointer capture、pointercancel、多指、失焦、方向锁定都要验证。库提供的 no-drag 标记只按其当前文档使用。

4.10 实际验收

慢拖、快甩、距离小但速度大、距离大但往回拉、关闭中重新抓取、内容滚到顶部/底部、点击内部按钮、输入法弹出、横竖屏变化、真实手机与 reduce 都要覆盖。点击目标推荐达到约 44×44px，扩大命中区时防止相邻目标互相覆盖。

Skill 的实现方式

本 skill 把复杂“自然”拆成两阶段，再给每阶段禁止项、派生值规则与手机验收清单。这样 AI 能把“拖着像糖浆”定位为 Track 被 spring 延迟，而不只是把 stiffness 随意调大。

自测与答案

1. 拖动时滞后，先加 stiffness？先检查是否本就不该加 spring。

2. 快甩短距离应关闭吗？可以，但必须满足正确方向与设定阈值。

3. 遮罩反向拖动不同步？检查是否独立计时，而非由拖动值派生。

4. 关闭中抓取跳变？接管起点不是当前视觉状态，或旧动画没有正确停止。