wait4xandGLM-5.3
54769bcfdf
五站研究（PhotoSwipe 源码级核对/medium-zoom/Unsplash◐/图虫◐/Flickr） → 六维差距 → v2.1 增强提案十项（P0=原位起飞开合+背景点击关；P1= chrome 双层淡入/相邻预载/双指缩放；P2=换片过渡/缩放指示/长图侧置 meta/HD 交换/竖拖关闭）+ 明确不做清单八条 + 可交互单文件 mockup （仓内实拍 5 张、13 项交互可点）。 验证: mockup 引用路径 ../content/photos/ 相对仓根可开；文档引文对 PhotoSwipe defaultOptions 源码核对注记 Spec: none (研究文档+设计预览稿，v2.1 立项待用户拍板) Co-authored-by: GLM-5.3
120 lines
10 KiB
Markdown
120 lines
10 KiB
Markdown
# 灯箱美化探索：图片查看体验天花板五站研究（v2.1 输入）
|
||
|
||
> 只读调研 + 提案，不动代码。基线 = 灯箱 v2 车道（fit-contain / 滚轮锚点缩放 0.5–5x / 拖拽平移 /
|
||
> 双击 1x↔2.5x / caption+EXIF 分层 / ←→ 与触摸快滑），提案全部**叠加在 v2 之上，不推翻缩放引擎**。
|
||
> 配套可交互演示：`design/lightbox-mockup.html`（浏览器直接打开，交互为提案演示）。
|
||
> 标记：✅ = 静态抓取并核对源码/文档；◐ = 站点可达但查看器 JS 渲染，基于已知稳定形态记录。
|
||
|
||
## 一、五站笔记
|
||
|
||
### 1. PhotoSwipe（photoswipe.com）✅ 业界标杆 lightbox
|
||
|
||
- **A 开合过渡**：`showHideAnimationType: zoom`（默认）= 从缩略图原位起飞到舞台、关闭回落原位；
|
||
无缩略图时降级 fade；`prefers-reduced-motion` 自动 none。时长 333ms ×3（show/hide/zoom 同拍），
|
||
曲线 `cubic-bezier(.4,0,.22,1)`，双击缩放共用同曲线（节奏统一的关键）。
|
||
**cover 裁切缩略图路线**：`object-fit:cover` + `data-cropped` —— 我们的 masonry 正是这种缩略图。
|
||
- **B 舞台纯净度**：底色实色 + `bgOpacity`（默认 .8，透明度走 JS 合成不走 rgba，性能纪律）；
|
||
文档明示**禁止 backdrop blur**（重性能坑）。`tapAction:'toggle-controls'`：单击即隐全部 chrome，纯看图。
|
||
- **C 信息层**：核心无 caption（a11y 原因删出 v5），官方 dynamic-caption 插件——"依剩余空放置于
|
||
图下或图侧"：竖图自动把 caption 挪进侧边 letterbox，横图回底部。计数器 `n / N` 极简。
|
||
- **D 导航**：边缘箭头 + loop + `arrowKeys`；幻灯片间距 `spacing:.1`（10% 视口，换片有"路过"感）；
|
||
`allowPanToNext`：放大态继续滑 = 翻页（先耗尽平移余量再走片）。
|
||
- **E 微交互**：`preload:[1,2]` 相邻预载；`preloaderDelay:2000`——加载指示 2s 后才出现（快图不打扰）；
|
||
`maxWidthToAnimate:4000` 超宽图不做起飞动画（防掉帧）。图标自带描边阴影，深浅底通吃。
|
||
- **F 移动端**：`pinchToClose`（捏合关闭）、`closeOnVerticalDrag`（竖拖关闭）、双指缩放到 max 档；
|
||
`trapFocus + returnFocus`（焦点圈与归还，原生 `<dialog>` 免费同款）。
|
||
|
||
### 2. medium-zoom（francoischalifour.com）✅ Medium 的克制哲学
|
||
|
||
- **A**：点击 = 从缩略图位置 FLIP 放大到视口居中（margin 默认 0 贴边），关闭回落原位。
|
||
与 PhotoSwipe 同为"原位起飞"，但它只有这一种动画——整库只做一件事。
|
||
- **B**：默认底色 `#fff`（Medium 白，页面即舞台）；无任何 chrome、无 caption、无导航。
|
||
**克制到"查看器不存在"**：这就是它的设计立场。
|
||
- **C**：零信息层；`template` 选项可注入自定义布局（Facebook / Dropbox Paper 官方范例）——
|
||
证明"纯放大内核 + 自定义信息壳"是可行分层。
|
||
- **D**：无连拍导航（单图语义）；`scrollOffset:40`：**滚动页面即关闭**，把"关"交给最顺手的手势。
|
||
- **E**：HD 模式 `data-zoom-src`：页内小图、开箱瞬间换高清（同宽高比前提），预览零等待。
|
||
- **F**：移动端点按开/点按关，无多余手势；无缩放（一档即满）。
|
||
|
||
### 3. Unsplash 照片页 ◐（curl 被 bot 墙拦截，未逐项复核）
|
||
|
||
- **A**：列表→详情是页面跳转非灯箱；大图页首屏即图主体，顶部细导航浮层滚动隐现。
|
||
- **B**：图外留白极小，信息全靠**悬浮层**：右侧竖排操作列（下载/尺寸选择/点赞/加合集/ⓘ），
|
||
不占图也不占底。
|
||
- **C**：ⓘ 召唤 Info 面板：相机/镜头/光圈/快门/ISO/焦距/发布时间/浏览数全量 EXIF；
|
||
平时全隐——"轻常驻 + 重召唤"的范本。下载默认给适配尺寸，原图藏在尺寸菜单。
|
||
- **D**：集合/相册内 ←→ 键连续浏览；相关照片网格殿后（发现回路）。
|
||
- **E**：渐进加载 + blur-up 占位是全站基建；L 键点赞的快捷键 affordance。
|
||
- **F**：移动端操作列收进底部栏，Info 面板变全屏抽屉。
|
||
|
||
### 4. 图虫 ◐（主站可达，查看器 JS 渲染未复核）
|
||
|
||
- **A**：信息流点击 → 全屏查看器直开（社区产品重内容直达，弱化过渡本身）。
|
||
- **B**：舞台全黑，chrome 依赖手势（边缘滑动）而非常驻按钮。
|
||
- **C**：摄影师视角分层：caption/描述 + **醒目完整 EXIF（机身/镜头/参数条）** + 作者卡（头像/
|
||
关注）+ 标签 + 社区数据（赞/藏）——信息密度最高，但靠 JS 分层收纳（常驻只留作者卡）。
|
||
- **D**：同组连拍左右滑 + 组内缩略导航；键盘支持弱于 PhotoSwipe/Flickr。
|
||
- **E**：加载有占位图（信息流即高清小图，开箱升级）。
|
||
- **F**：App 化手势（快滑翻页带跟手位移）；双指缩放齐全。
|
||
- 教训面：信息全堆常驻会让暗房变"仪表盘"——我们只取它的 **EXIF 完整度**，不取密度。
|
||
|
||
### 5. Flickr（自选）✅ SSR 复核 + ◐ 视觉层
|
||
|
||
- **A**：照片 URL **直接开进 lightbox**（无中间页）：暗房全屏沉浸，从网格进入有原位起飞感。
|
||
- **B**：舞台近纯黑（#212121 系）；chrome 默认轻常驻：底部左侧 title/作者小卡（可隐），
|
||
其余全靠召唤。
|
||
- **C**：三段式：常驻小卡（title+作者）→ 右缘动作列（收藏/加画册/分享/下载尺寸/ⓘ）→
|
||
ⓘ 滑出右侧 EXIF 全量面板（机身/镜头/参数/软件/日期）。20 年沉淀的"常驻最轻、重的全召唤"。
|
||
- **D**：边缘 hover 箭头 + ←→/Esc/f/i 全键盘；f=收藏的键位文化。
|
||
- **E**：大图渐进加载；浏览数/评论在下折区（不抢舞台）。
|
||
- **F**：移动端 swipe 翻页、双指缩放、上滑收 chrome——三手势覆盖 95% 操作。
|
||
- 选它的理由：唯一同时满足"成熟产品 + SSR 可复核 + 键盘流 + 信息分层范本"。
|
||
|
||
## 二、差距矩阵（现状 v2 vs 天花板）
|
||
|
||
| 维度 | 我们现状（v2） | 天花板做法（出处） | 差距 |
|
||
|---|---|---|---|
|
||
| A 开合 | dialog 直开直关，零过渡 | 原位起飞+回落 333ms 单曲线（PS/MZ） | **大** |
|
||
| B 舞台 | backdrop .95 常驻；meta 恒占底条 | toggle-controls 沉浸（PS）；轻常驻重召唤 | 中 |
|
||
| C 信息层 | 一层底条：caption+title+EXIF+动作平铺 | 双层：常驻轻卡 + 召唤 EXIF（FL/US）；caption 就空放置（PS 插件） | 中 |
|
||
| D 导航 | ←→ 键/两侧钮/触摸滑动/loop ✅ | 同款 + spacing 换片节奏 + 放大态滑透翻页（PS） | 小 |
|
||
| E 微交互 | 切图 160ms 淡入；光标三态 ✅ | 相邻预载 [1,2]、2s 延迟加载指示、缩放档位语义（PS）；HD 交换（MZ） | 中 |
|
||
| F 移动端 | 快滑翻页 + 双击缩放；**无双指缩放** | pinch 缩放/捏合关/竖拖关（PS）三件套 | **大** |
|
||
|
||
## 三、v2.1 增强提案（叠加式，不动 v2 引擎）
|
||
|
||
| # | 提案 | 做法 | 灰阶适配 | 工作量 | 优先级 |
|
||
|---|---|---|---|---|---|
|
||
| 1 | **原位起飞开合** | 点击缩略图：FLIP 动画双盒（外盒=裁切窗从缩略图矩形→舞台矩形，内图=cover 几何→contain 几何同步过渡，等价 PS `data-cropped` 路线）；300ms `cubic-bezier(.4,0,.22,1)`（与站 `--ease` 同族）；关闭回落到当前缩略图位置；reduced-motion 直开直关 | 起飞的是图不是 chrome；backdrop 照旧恒深 | 0.5–1 天 | **P0** |
|
||
| 2 | **背景点击关闭** | 点击落在图外区域即关（PS `bgClickAction:'close'` 同款），Esc 保留 | 无新增视觉 | 0.5h | **P0** |
|
||
| 3 | **chrome 双层淡入 + 召唤** | 开箱：层1（关闭/箭头/计数）+140ms、层2（caption/EXIF/动作）+300ms 淡入；`i` 键或图上单击 toggle 全隐（toggle-controls）；zoom>1 自动隐、回 1x 淡回 | 淡入只有 opacity，无位移无色彩 | 0.5 天 | P1 |
|
||
| 4 | **相邻预载** | 开箱后 idle 预载 ±1 张 fullSrc（PS `preload` 精神，我们取 [1,1] 克制档） | 纯网络层 | 数行 | P1 |
|
||
| 5 | **双指缩放（移动端）** | pointer events 双指距离比→锚点缩放（复用 v2 `zoomAt` 数学）；v2 已有 `touch-action:none` 地基 | 同 v2 | 0.5 天 | P1 |
|
||
| 6 | **换片过渡** | 切片：旧图 140ms 淡出、新图自侧向 10% 位移淡入（PS `spacing:.1` 节奏）；v2 换图已回正缩放，天然兼容 | 仅 opacity/transform | 0.5 天 | P2 |
|
||
| 7 | **缩放指示 + 首开提示** | 缩放停稳后右下 90% 淡入 `168%` 900ms 淡出；首开箱 hint 胶囊"滚轮缩放 · 双击放大 · Esc 关闭"2.6s 自隐 | mono 小字，与 EXIF 同语言 | 数行 | P2 |
|
||
| 8 | **长图侧置 meta** | 竖图（ratio<0.9）且视口 ≥820px：caption+EXIF 移入侧 letterbox（PS dynamic-caption"就空放置"）；横图维持底部条 | 文字色不变，只挪位 | 0.5–1 天 | P2 |
|
||
| 9 | **HD 交换** | zoom>1.5x 懒换 `/photos-originals/` 原图，<1.5x 回 1440（MZ `data-zoom-src` 模式）；404 兜底留 1440 | 纯数据层 | 0.5 天 | P2 |
|
||
| 10 | **移动竖拖关闭** | zoom=1 时竖向拖 >80px 关闭并回落缩略图（PS `closeOnVerticalDrag`） | 同关闭回落 | 0.5 天 | P2 |
|
||
|
||
落地注：生产保持原生 `<dialog>`（免费 focus-trap/returnFocus，PS 同款能力）；起飞动画在 dialog 内
|
||
用 fixed 双盒实现，mockup 用 fixed 覆盖层纯为演示等价几何。
|
||
|
||
## 四、明确不做清单（与灰阶克制冲突）
|
||
|
||
- 粒子/彩光/视差/自动播放/轮播——舞台只属于照片
|
||
- backdrop blur——PhotoSwipe 文档明示重性能坑，且暗底已够沉浸
|
||
- 缩略图条（thumbstrip）——21 张规模用不上，常驻 chrome +1 与克制冲突（>50 张再议）
|
||
- 社交分享按钮——PS v5 自己都删了；博客无此回路
|
||
- tile deep-zoom / 万像素级缩放——仓内照片 2400px 封顶，用不到
|
||
- 全屏按钮——PS v5 已删（浏览器 F11 更顺）；Esc + 沉浸足够
|
||
- 音效、进度条、弹跳物理回弹——动效纪律：全站唯一曲线
|
||
- chrome 染 accent 色——灯箱恒深恒灰，强调色止于站内链接
|
||
|
||
## 五、验证记录
|
||
|
||
- PhotoSwipe：photoswipe.com 七页 + unpkg v5.4.4 `photoswipe.esm.js` defaultOptions 源码核对（✅）
|
||
- medium-zoom：francoischalifour.com options/HD 指南 + GitHub README（✅）
|
||
- Unsplash：curl 被 bot 检测墙拦截，标记 ◐；图虫：详情页 JS 渲染不可静态复核，标记 ◐
|
||
- Flickr：照片页 SSR 抓取成功（photo-model/person-model JSON 在源码中），视觉层标 ◐
|
||
- mockup：单文件无依赖；图片引用 `../content/photos/` 仓内实拍（相对路径，需与仓库同置打开）
|