UI 动效 006：Pull to Refresh，为什么往下拖一下就能刷新

自制 GIF：列表顶部被下拉、越过阈值后进入刷新中，再回到原位；这是机制示意，非真实产品截图。

它叫什么

视觉上发生了什么

1. 边界检测：只有列表已经在顶部，继续向下拖才进入下拉刷新。否则这次手势应该先用于普通滚动。
2. 位移映射：内容区域跟着手指向下移动，但位移会被压缩，常见做法是让 UI 只移动手指距离的一部分。
3. 阈值触发：指示器必须越过阈值，松手才会刷新。Material Design 明确要求刷新指示器超过阈值后再触发，并用透明度、旋转速度和位移变化提示状态。1
4. 刷新与回位：刷新开始后，指示器继续留在可见位置；数据完成后，列表和指示器再回到初始位置。Flutter 的 RefreshIndicator 文档也采用类似流程：子滚动视图 overscroll 时淡入圆形进度，拖得足够远并结束滚动后调用 onRefresh，Future 完成后指示器消失。3

什么时候该用，什么时候别用

• 内容有明确的顶部或底部边界。
• 用户手动刷新后，有较大概率看到新内容。

实现时，其实是在写一个小状态机

const THRESHOLD = 80;
let startY = 0;
let pull = 0;
let state = "idle";

list.addEventListener("touchstart", (event) => {
  if (list.scrollTop === 0) {
    startY = event.touches[0].clientY;
    state = "idle";
  }
});

list.addEventListener("touchmove", (event) => {
  const dy = event.touches[0].clientY - startY;
  const atTop = list.scrollTop === 0;

if (!atTop || dy <= 0) return;
  event.preventDefault();

pull = Math.min(dy * 0.55, THRESHOLD * 1.4);
  const progress = Math.min(pull / THRESHOLD, 1);
  state = progress >= 1 ? "armed" : "pulling";

surface.style.transform = `translateY(${pull}px)`;
  indicator.style.opacity = progress;
  indicator.style.transform = `rotate(${progress * 240}deg)`;
});

list.addEventListener("touchend", async () => {
  if (state === "armed") {
    state = "refreshing";
    await loadLatestItems();
  }

state = "settling";
  surface.animate(
    [{ transform: `translateY(${pull}px)` }, { transform: "translateY(0)" }],
    { duration: 240, easing: "cubic-bezier(.2,.8,.2,1)" }
  );
  pull = 0;
});

html,
body {
  overscroll-behavior-y: contain;
}

各平台现成组件怎么想这件事

设计细节：别让 spinner 抢戏

• 指示器是否只在内容边界出现，不打断普通滚动。
• 松手前是否能看出「还差一点」和「已经可以刷新」。
• 刷新中是否保持可见反馈，不要让用户以为手势丢了。
• 刷新结束后是否回到原位，不要留下额外空白。