32 lines
5.1 KiB
Markdown
32 lines
5.1 KiB
Markdown
# 阵列悬停、拖动与滚轮
|
||
|
||
2026-09-10。沿用已批准的参考视频与原生实现流程。
|
||
|
||
## 交互
|
||
|
||
- 鼠标命中卡片时额外竖直抬起 0.28，约 200ms 显现，移开后平滑回落。反馈按循环阵列的实际位置保存，选中模型、阵列实例和归位副本共享同一高度，不改变详情抽取进度或镜头目标。
|
||
- 鼠标左键、触摸与笔使用同一组 Pointer Events。7px 内保留点击，10px 后自由拖动；已经移动过的手势回到起点也不当作点击。
|
||
- 用户最新选择自由平面跟随，取消屏幕横竖快捷手势和斜向锁轴。以选中模型中心采样两个轨道的 CSS 投影，逆矩阵同时计算列与档案位移。投影在手势内固定，允许水平、竖直、任意斜向及中途转弯；无效或退化投影不开始拖动。
|
||
- 两个轨道同时由指针或惯性持有，选档不能引发额外镜头吸附。沿实际经过的物理格位选档并更新列内记忆，按钮／键盘切列仍使用该列记忆。
|
||
- 拖动连续改变原有横向与前后轨道。用户进一步要求网页快速滑动的持续惯性：松手后以实际速度继续运动，速度按 `exp(-2.4 × 秒数)` 衰减，不再预选远处目标或限制最多两列／三档。档案随实际经过的位置依次切换，沿用标题、声音、波浪、归位和各列记忆；速度低于 0.6 格/秒后，才以速率 10 的临界阻尼弹簧吸附到最终整数位置。
|
||
- 松手速度来自最近 120ms 的指针样本，包含可用的合并事件并使用事件时间戳；反向时从转折点重新估算。相同距离，拖得越快，继续滚动越远；停止移动超过 80ms 再松手不追加惯性。再次按住立即停止并保留当前轨道位置，尚未拖过方向阈值时也不会自动回弹；点击接住惯性不会误选其他卡片。键盘、滚轮、模式切换和减少动态效果设置会中止惯性。
|
||
- 双向速度共享自由衰减阶段，保留屏幕中的滑行方向；整体放慢后共同吸附。再次按下同时接住两个轨道。
|
||
- 滚轮向上切上一档、向下切下一档。像素、行和页单位归一化，累计 100px 切一档，单事件最多三档；停顿或反向清除旧的累计量。Ctrl+滚轮和主要横向的触控板事件不截获。
|
||
- 捕获丢失、pointercancel、窗口失焦、窗口尺寸变化或新增第二根手指时，停止拖动并吸附；后续单指可继续。详情仍在净空足够后拖动旋转；正文和弹窗不会触发阵列切档。
|
||
|
||
实现：`src/archive-drag.ts`、`src/scene.ts`。原来的松手后单步 swipe 判断已移除。
|
||
|
||
## 验证
|
||
|
||
本次自由拖动：纯逻辑、桌面及手机横竖屏自由路径、鼠标及触摸快慢惯性、悬停与输入回归、生产构建通过。桌面另验证双向惯性比例及同时接住两个轨道。相同 3.2 档拖动，慢拖最终移动 3 档，快拖桌面移动 6 档、触摸模拟移动 8 档（原生事件调度会影响采样速度）。下列响应式与 WebKit 条目还记录此前验证范围；本次结果见对应 JSON 报告。
|
||
|
||
- `node --experimental-strip-types scripts/check-archive-drag.mjs`：小幅移动、逆投影还原任意屏幕方向、连续转弯、反向、停顿、减少动态效果、快慢速度差与最终吸附、负坐标循环，以及 30／60／120fps 的惯性积分一致性。相同 1.6 档距离、80ms 与 800ms 两种输入，模型测试最终位置为第 10 格与第 2 格。
|
||
- `scripts/check-archive-momentum.mjs`：Chromium 实际鼠标与 CDP 触摸，比较同距离快拖和慢拖，检查松手后依次跨档、连续衰减、按住停止、改变方向接管、跨列惯性、键盘中止和减少动态效果。报告为 `.tools/array-input/momentum.json`。
|
||
- `scripts/check-archive-diagonal.mjs`：桌面鼠标、手机竖屏和横屏 CDP 触摸，直接使用实际相机的两条斜向投影，检查正反方向、物理间距跟随，以及同一次拖动中水平、竖直、转弯、回到起点的屏幕位移。纯逻辑检查补充另一组相机、冻结映射、退化投影与双向惯性比例。报告为 `.tools/array-input/diagonal.json`。
|
||
- `scripts/check-array-input.mjs`：实际 Chromium WebGL 页面，1920×1080 鼠标与 390×844 CDP 触摸。检查不足半格时阵列已经跟随、松手前切档、吸附、反向、悬停升起与复原、点击选择、滚轮、弹窗隔离、八档循环、捕获丢失和多指取消、取消后恢复、详情旋转。
|
||
- `scripts/check-responsive.mjs`：Chromium 手机横屏与竖屏原有回归，包括滑动方向、循环、详情、正文、查看器和弹窗。
|
||
- Windows Playwright WebKit 的 390×844 竖屏完整回归通过；使用合成 PointerEvent，不代表 iPhone 真机多指行为。初次开发服务器运行在查看器步骤超时，改用固定生产构建后完整通过。
|
||
- `scripts/check-loop.mjs`：20,000 次相邻循环导航；`npm run check:viewport`：视口与原片构图；`npm run build`：TypeScript、资源与 PWA 构建。
|
||
|
||
本地截图和报告在 `.tools/array-input/`、`.tools/responsive/`。手机触摸验证属于桌面浏览器模拟，没有新增 iPhone 真机测试数据。
|