资源工作台钉住的标题栏移出画布缩放层：整行文字不再发虚

- 钉在视口上的栏目标题栏（栏目名 / 计数徽标 / 资源总览入口）改挂场景根，成为带 scale() 的 .game-resource-book-scene-world 的兄弟节点，不再用 scale(1 / s) 抵消 world；总览态的栏目标题栏仍留在 world 里与缩略卡对齐 - index.tsx 抽出 ResourceBookScene.renderTitlebar(placement.pinned) 一处产出两种宿主，删除只服务抵消变换的 titlebarTransform 与 safeViewport/safeMainViewport 中间量 - resourceBookController 按节点自己的坐标系换算：world 内用 world 缩放，world 外（钉住标题栏）用 1；新增 nodeWorldTransform，readWorld 补 element 输出，nodeWorld 贯穿 cleanRect / FLIP 反向 transform / worldScale - 更新 resourceBookFlipValues 与 readOrigin 的口径注释：translate 单位是宿主自身坐标系，不再假定所有宿主都在 world 里 - appSurface 用例改钉新不变量：钉住的标题栏内联 transform 必须为空、不在 world 内、父节点为场景根，卡片必须仍在 world 内；并说明标题栏宿主不再跨视图同一节点、转场仍由控制器按 key 记录的 First 屏幕矩形驱动 - resourceBookController 用例新增「屏幕坐标系的宿主不被 world 缩放除」，并保留 world 内卡片仍按缩放除的对照 - 技术方案 2026-09-05 段落同步新结构；pitfalls 增记取证（截图墨色峰值 98.6 vs 同色正文 91.7、点阵周期反推 dpr=1）、本机复现尝试与结论、三处变异验证和真机判据
2026-09-12 17:09:42 +08:00
parent 46788edbb8
commit ff0bc5a3e7
6 changed files with 206 additions and 62 deletions
@@ -3,8 +3,9 @@
 ## 2026-09-05 资源画本独立转场

 - `resourceBookModel` 立即提交目标 `main / child + category`，`entering / returning-main` 只表示尚未收尾的视觉过程，不承载待提交的栏目。总览栏目缩略卡片、「所有资源」入口、下一页与资源定位共用分类导航入口；栏目互切直接到达目标，不经过总览（列表卡片本身就在总览上，所以从总览进栏目是先总览后直达）。滚轮不切换栏目。
- 转场对**真实元素**做 FLIP，不使用克隆快照层。总览与子画布之间同一张卡是同一个 DOM 节点（同一 React key、同一父节点，只有布局函数在 `resourceBookOverviewCardLayout` 与 `resourceBookChildCardLayout` 之间切换），标题栏同理。`resourceBookController.begin` 在状态提交前按 key 记录 First 屏幕矩形与当前不透明度；提交后的 layout effect 调 `play` 测 Last，给同一个节点加反向 transform 再过渡回 identity。动画结束没有"克隆 → 真实节点"的交接，因此不存在交接瞬间的跳变；遮挡关系由真实 DOM 的 z-index/DOM 顺序决定，与静止态一致。
- 反向 transform 写在宿主节点自身坐标系：`transform-origin: 0 0`，缩放比取 `First.size / Last.size`，位移按宿主原点偏移换算后除以 `.game-resource-book-scene-world` 的缩放。标题栏激活时内联的"抵消 world"transform 作为 base 与反向 transform 组合，结束帧回到该 base。
+- 转场对**真实元素**做 FLIP，不使用克隆快照层。总览与子画布之间同一张卡是同一个 DOM 节点（同一 React key、同一父节点，只有布局函数在 `resourceBookOverviewCardLayout` 与 `resourceBookChildCardLayout` 之间切换）。`resourceBookController.begin` 在状态提交前按 key 记录 First 屏幕矩形与当前不透明度；提交后的 layout effect 调 `play` 测 Last，给同一个节点加反向 transform 再过渡回 identity。动画结束没有"克隆 → 真实节点"的交接，因此不存在交接瞬间的跳变；遮挡关系由真实 DOM 的 z-index/DOM 顺序决定，与静止态一致。
+- 钉在视口上的那条栏目标题栏是**例外**：它是 `.game-resource-book-scene-world` 的**兄弟节点**（挂在场景根下），只在子画布态渲染；总览态的栏目标题栏仍在 world 里。原因是文字清晰度——world 带 `scale()`，挂进去就必须给标题栏自己加 `scale(1 / s)` 抵消才能回到 1:1，而反向缩放只保证几何，整条标题栏的文字（栏目名、计数徽标、`资源总览` 入口）仍要在被缩放的祖先里栅格化/合成，一旦那一层被提升或复用旧纹理就会整行发虚。钉住的那一层本来就活在屏幕坐标系里。转场由控制器按 key 记录 First 屏幕矩形、在新宿主上从该矩形回到静止位驱动，仍然是真实元素的 FLIP，只是标题栏宿主不再跨视图保持同一个节点（卡片仍然保持）。
+- 反向 transform 写在宿主节点自身坐标系：`transform-origin: 0 0`，缩放比取 `First.size / Last.size`，位移按宿主原点偏移换算后除以**宿主自己的坐标系缩放**（world 里的卡片取 `.game-resource-book-scene-world` 的缩放，world 外的钉住标题栏取 1，见 `resourceBookController.nodeWorldTransform`）。
 - `begin` 之后的所有布局提交都调 `sync`：比较每个节点的布局签名，变化时取消旧动画、重新测量，以**当前视觉矩形**（含运行中的 transform）为起点重基到新的干净终点。转场进行中用剩余时长（`startTime + 420 - now`，下限 80ms），空闲布局变化用完整 420ms。卡片预览尺寸是异步到达的，因此"动画期间甚至动画结束之后"的二次布局变化同样是动画而不是瞬移。窗口/容器尺寸变化与拖拽中的卡片不做布局动画。
 - 目标不可见的节点（内联 `opacity` 为 0）钉在 First 位置淡出，没有 First 的挂载节点淡入；搜索/排序导致的卸载保留一帧后用同一套淡出撤下，进入栏目期间其他栏目保留挂载淡出，返回总览时源栏目未回到摞上的卡片按子画布布局淡出。转场时长统一 420ms；动画创建失败、零尺寸、容器尺寸变化或 `prefers-reduced-motion` 时不创建动画，也不等待定时器。
 - `begin` 只记录**当时可见**的节点。不可见节点的屏幕矩形是"看不见的位置"：非活动栏目标题栏在子画布态保留总览布局坐标，却被子画布 world 变换推到屏幕外，若把它当 First，返回总览时标题栏会从屏幕外飞进来。不可见节点没有 First，只走淡入，位置保持不动；进入栏目方向它们仍然可见，因此照旧钉在原地淡出。同理，卡片只有在提交前可见时才参与几何 FLIP。