用途:这是一份关于“跟随手指或光标运动”的手势交互技能文档,适用于拖拽、滑动关闭、底部面板(sheet)、动量、速度阈值、橡皮筋边界,以及弹簧动画中途被打断等场景。核心主张是:手势元素从第一个像素起就粘住指针,直到释放,随后由动画以指针释放时的精确速度接手,使拖拽与动画之间没有接缝。
主要能力与原则:默认使用弹簧而非曲线,推荐 { type: "spring", duration: 0.5, bounce: 0 },按速度而非距离判定关闭。文档给出三个核心数值:速度判定 velocity = |swipeAmount| / timeTaken,超过 0.11 即关闭;投影落点 project(v, d = 0.998),d = 0.99 用于更短投掷;橡皮筋 rubberband(overshoot, dimension, c = 0.55)。其余原则包括:从抓取点而非元素中心 1:1 跟踪;从呈现值而非目标值中断动画;重定向时混合速度而非硬切;二维拖拽拆分为独立的 X、Y 弹簧;每个边界都做橡皮筋;吸附前先投影静止点;可抓取元素用弹簧、非可抓取用曲线;每次拖拽都要有指针捕获、单指针与迟滞保护;反馈发生在 pointerdown 并贯穿整个手势。
使用方式:文档建议先采用项目已有的手势层,不要新增第二套;通过搜索 vaul、@use-gesture、embla、Motion 的 drag / useDragControls / dragConstraints、裸 pointerdown、touch-action、CSS scroll-snap 来判断现有方案。若项目用 Vaul 处理 sheet,下一个 sheet 也用 Vaul;若本质是吸附轮播,scroll-snap 加 overscroll-behavior 优于任何库。文档还提供“问题/修复”对照表与检查清单,要求在写代码前把手势写成契约:跟踪轴、守卫条件、提交判定(速度与距离)、收尾弹簧、边界行为、减少动态效果路径,并给出具体数值。
适用场景与限制:适用于 Web 前端手势交互实现与评审。限制方面,文档未提供具体平台、收费、价格或效果数据;其数值与做法来自公开资料中的经验总结,实际项目需结合元素尺寸与真实设备测试,不能仅依赖桌面指针验证。