JMOS 第一批改进样张 · motion-batch1

来源：仓库 reviews/2026-10-09/motion-batch1/README.md · 版本 0ca44f9 · 候选样张，未并入主应用 · 录屏 motion-batch1.mp4 与总览图 motion-batch1.png 体积较大，未随本站发布（仓库同目录可看）

留档说明（2026-10-09）：样张代码在 prototypes/motion-batch1/，未并入主应用。文中提到的 *.patch 是当时交付的补丁，内容就是该目录；补丁文件本身不入库。

状态：只是样张，没有并入 app/jmos。 等你确认后再合并。 基线是 33cffc2，样张在 prototypes/motion-batch1/。运行方法：node server.mjs，打开 （本机预览地址） 进入动效对照页。

交付文件：motion-batch1.png（总览）、motion-batch1.mp4（对照页录屏）、motion-batch1-sample.patch（只含 prototypes/motion-batch1/，相对 33cffc2；在 33cffc2 和 6782659 的临时副本上 git apply --check 都通过）。

数值和做法参考 RhineLabUI（MIT）reference.md 3.6、3.11 和 4.1 中第 6、14、15 项。代码都是新写的，没有复制片段，所以不需要附 MIT 声明。也没有使用莱茵生命的名称、配色或字体。样张文件只用语义 token，没有新增 HEX、rgba 或 color-mix。

0. 修正记录（2026-10-09 17:40–18:10 北京时间，复看录屏后）

注意：第 1 项让出场曲线和 spatial-motion.json 里的 motion.easing.exit (0.4,0,1,1) 不再一致。合并时需要同步修改契约，或者在契约里新增 exitMove / exitFade。

1. 现状盘点（33cffc2 实际使用的时长和曲线）

现有 token：--jm-duration-fast 120 / base 200 / slow 320，--jm-ease-out (0.22,1,0.36,1)，--jmx-ease / --xa-ease / --mo-ease 都是 (.2,.8,.2,1)，--xa-in 200 / --xa-out 140，--mo-dur 300。

完整清单（78 条 CSS transition/animation）见附录 A。

2. Token 定义（prototypes/motion-batch1/motion-tokens.{json,css}）

统一的范围只有面板、弹窗、页签、问小锦和抽屉。07 窗口、应用中心浮层和 05 卡片保持原样，已批准的角度和参数没有动。

可打断。 JMMotion.enter/leave 用 WAAPI 实现。打断时先读取当前的 opacity 和 transform，从这个值继续走，剩余时长按剩余距离等比缩放，最少保留 40%。CSS transition 部分（问小锦、抽屉）本来就从当前值反向。页签下划线从当前几何位置继续。

3. 改动内容（都只在样张里，靠服务端注入和带锚点的替换实现）

1. 动效节奏

• 问小锦：进场 300ms / 12px / enter 曲线；出场 200ms / 8px，位移走 exit 曲线，透明度线性。修复了打开时起点错误的问题：首次打开先清掉过渡；关闭过程中再打开，则从当前值继续。
• 手机底部抽屉：进场使用 long 曲线。
• 弹窗：遮罩和面板都改为 300ms 进 / 200ms 出（新增 .xa-out 出场）。
• 12 左右抽屉：300ms long 进 / 200ms exit 出。
• 12 命令面板：补上出场，可以打断。
• 07 手机问小锦面板：300ms long 进 / 200ms exit 出。
• 07 用户菜单和 assist 菜单、气泡、提示：150/120ms，4px。
• 页签（10、05 详情）：下划线 180ms 平移，内容 150ms 从 0.35 淡入。静止时和原页逐像素一致。

1. 减少动态效果

• 设置面板「动效与 3D 性能」提供 完整 / 减少 / 自定义 三档，加 7 个分组：面板与弹窗、问小锦面板、切页与工作台切换、3D 镜头动画、数字滚动（预留）、加载动画、主题切换过渡。
• 首次打开跟随系统的 prefers-reduced-motion。
• 关闭某个分组时：面板、弹窗和问小锦只保留 120ms 淡入淡出；其他分组瞬切或静止显示。
• 偏好存在本机 localStorage['jmos.ui.preferences.v1'].reducedMotion，原有的其他字段保留不动。
• 同步方式和 theme-sync 相同：storage 事件通知其他标签页；07 用 postMessage {type:'jmos-prefs'} 下发给内嵌页；内嵌页点头像时，打开的是 07 宿主的面板。
• 面板支持浅色和深色，在 599px 以下变成底部抽屉；触屏目标不小于 44px；键盘支持 Esc、方向键、Home/End 和 Tab 循环，关闭后焦点回到入口。

1. 3D 性能档位

• 自动 / 流畅 / 均衡 / 高画质。
• 自动档根据 WebGL 渲染器判断设备：Apple M 基础款（含 MacBook Air）、Intel 集显、移动 GPU、软件渲染、触屏、4 核以下或内存 4GB 以下都选流畅；M Pro 选均衡；M Max/Ultra 和独显选高画质；无法识别时选均衡。
• 流畅：关闭阴影，像素比上限 1，渲染比例 0.8，画布像素上限 0.92MP。均衡：像素比上限 1.5，阴影用页面原配方。高画质：像素比上限 2，阴影贴图 2048。页面本来就没有 AO、景深和透射，面板里如实标为「未使用」。
• 文字、标签和 DOM 始终按屏幕原生清晰度显示；材质和灯光配方没有改。
• 页面隐藏、画布滚出视口、或在 07 里不在舞台上时停止绘制，回来后补画一帧。
• 自动降档：只统计连续帧，90 帧中位帧时超过 25ms 就降一档，只降不升。原因和时间显示在设置面板里，并提供「重新检测」。
• 04-glb 原来的「画质」开关换成四档选择；04 查看器（twin-scene.js）接入同一套档位。

4. 验证结果

验证时间：2026-10-09 17:00–17:30（北京时间）。浏览器为 Playwright 自带的 Chromium 和 WebKit，3D 使用 SwiftShader 软件渲染。

3D 相对成本（软件渲染，只看比例）：

三档的绘制次数相同（glb 232，查看器 304），差别来自像素数和阴影。以上不是帧率，真实帧率需要在你的 MacBook Air 上测。

关键帧见 motion-batch1.png 第 ② 部分（进场，暂停后定位到 0/60/120/200/300ms）和第 ③ 部分（修正后的退场，0/50/100/150/200ms，录帧时冻结了页面计时器，避免元素被提前移除）；第 ⓪ 部分是修正记录。mp4 已按修正后的版本重录：对照页 0.25× 慢放（弹窗、页签、面板、问小锦、手机抽屉，每个场景都包含「打断」），已剪掉页面加载的空白段，约 69 秒、3.3MB。

5. 需要你决定 / 已知问题

• 系统开了「减少动态效果」时，是否压过用户的选择？ 样张目前按 spatial-motion 契约「任一开启即生效」处理：系统开启时所有分组都关闭，面板会提示。如果希望用户能在这台设备上手动改回完整，需要改契约。
• 页签下划线滑动和 spatial-motion 里的候选规则「tabChange instant / 不做滑动跑马线」冲突。那条规则还没批准；样张按本次指令做了 180ms。
• 均衡档像素比 1.5，在 Retina 屏上比原来的标准档（2）低。如果你希望均衡档在 Air 以外的 Mac 上画质不变，可以改成 2。
• 出场曲线已按第 0 节修正：透明度线性，位移 (0.4,0,0.6,1)。是否把契约里的 motion.easing.exit 一并改掉，需要你决定。
• 抗锯齿是创建 WebGL 上下文时决定的，切档不重建上下文，所以没有改。
• 偏好里新增了 renderQuality 字段，合并时需要同步更新偏好契约。
• 07 在手机宽度下隐藏头像。这时设置面板要从内嵌页（例如 12）的头像进入。手机上的设置入口还需要定一个位置。
• 原页已有的问题，不是这次引入的：07 手机问小锦里，内嵌 12 的命令面板左侧被裁切（改前改后一样）。04-glb 工具栏在 390px 下本来就是横向滚动的（499/372px），样张换成四档后宽 571px，仍然在滚动条内，页面没有溢出。
• 05 加载时，系统开启减少动态效果就切到网格视图。这个逻辑保持原样，只看系统设置。
• 真实帧率必须在你的 MacBook Air 上测。 这里的 3D 数据是在 SwiftShader 软件渲染下得到的，只能比较相对成本（像素数、阴影、绘制次数），不能代表实际帧率。测法：打开 /sample/04-孪生-glb.html?bench=1，分别切到三个档位，读取 window.__frameTimes，或者看设置面板里的自动降档记录。

6. 合并时要改的文件

附录 A：CSS 动效完整清单