交互模式
当手势识别、物理系统和布局逻辑交织在一起，就构成了可复用的交互模式。 它们是手势驱动界面的积木单元 — swipe-to-dismiss、 pull-to-refresh、carousel 都属于这一层。
Pull to Refresh（下拉刷新）
在可滚动列表顶部继续向下拉，便会进入 overscroll 区域， 并带上橡皮筋阻力 — 拉得越远，阻力越大。 当拉动超过阈值（约 60px 的 rubber-mapped 位移），刷新指示浮现。 在阈值之上释放则触发刷新；阈值之下释放则即刻回弹。
橡皮筋映射是手感的关键所在。如果越界后仍然 1:1 跟手，会显得不对劲 — 因为那里并没有真实内容可供继续滚动。递增的阻力在传达： 你正在做的，是一个与普通滚动截然不同的动作。
Carousel（轮播）
在视口中横向排列整页条带。水平拖动后释放，条带自动吸附到最近的页边界。 图集、引导页、故事流 — 这是移动端最常见的手势模式之一。
吸附逻辑通常由速度辅助：系统根据释放速度预测自然停点， 再舍入到最近页。为防止一次 flick 跨过太多页，目标通常被限制在 当前页 ±1 范围内。边缘处再用橡皮筋反馈边界感。
Draggable Grid（可拖拽网格）
一个 3×3 网格，元素可自由重排。抓起任意方块拖到另一个方块上方， 被挤占的方块便会经由弹簧过渡到空位。交换的触发条件通常是与最近网格中心的接近程度 — 这让交互更可预测，也更宽容。
每个格子一般各自维护 x、y 和 scale 弹簧。 被拖拽项会轻微放大并抬升（阴影增强）以表达"被提起"的状态；释放后继承拖拽速度， 弹性落入最终的网格位置。
Rubber Band Slider（橡皮筋滑杆）
这是一个水平滑杆：当你拖过左右边界，不只是数值被限制 — 整个控件会发生形变。在拖拽方向被拉长，在垂直方向被压扁， 如同真实橡胶体被拉过了极限。
形变通常用平方根曲线计算：前段伸长快、后段趋于收敛， 更接近真实弹性材料的质感。释放后弹簧将形状拉回静止态。 这相当于通过形状而不只是阻力来告诉用户"已到边界" — 反馈更直观，也更有趣味。
fig-403 · rubber band slider