FrameFlow · 第一期验收实测

图片转动图 · 第一期验收实测报告

按技术方案 v1.2 第十章「验收标准」9 条逐项实测。全部结论来自真实浏览器（CDP 驱动）+ ffprobe 独立复核，不以界面提示为准。

测试日期
2026-09-18

被测文件
index.html（88 KB 单文件原型）

加载方式
file:// 直接打开

浏览器
Chrome 无头 + CDP（Emulation 固定视口）

独立复核
ffprobe 9.0.1-full_build

本地服务
server.mjs @ 127.0.0.1:8787（零依赖）

测试素材
12 张 PNG（360×320 ~ 1024×768）+ 2 秒 440Hz 音频

视口
375×812 / 768×1024 / 1280×800

结论摘要

9 条验收标准中：5 条完全通过，3 条部分通过，1 条未达标。

完全通过

部分通过（有保留项）

未达标

未捕获 JS 异常

#	验收标准	结果	关键证据
1	单文件双击可用、无需安装、无需联网（依赖已内联）	部分	`file://` 下正常加载、IndexedDB 可用、无需安装 —— 但 `mp4-muxer` 与 `gifenc` 均为运行时从 CDN 动态 import，断网即无法导出 MP4 / GIF
2	五条输入渠道全部可用	通过	点选 / 拖拽 / 粘贴 / 整文件夹 / 手机相册多选，逐条触发并断言状态变化
3	至少 8 个动效模板，均可实时播放	未达标	实测仅 4 个：呼吸缩放 / 飘雪 / 光尘上浮 / 辉光呼吸。差 5 个
4	导出真 MP4 / GIF 可正常播放	通过	MP4（含 AAC 音轨）、GIF、WebP 三格式均经 ffprobe 复核，帧数与设计精确吻合
5	循环无缝量化验证（首尾帧 PSNR ≥ 40dB、环绕步落在相邻帧区间）	部分	环绕步全部落在相邻步区间（真无缝）；但绝对阈值 40dB 对粒子模板不成立 —— 判据本身需修正
6	批量 10 张不崩、单张失败不阻塞、可重试	通过	10/10 成功；失败隔离实测 OK→err→OK，失败项带「重试」且产物不入库
7	导出体积符合所选档位（默认 ≤ 10MB）	通过	3s / 720P 实测 33–62 KB，远低于上限
8	手机浏览器可完成「选图 → 预览 → 导出」全流程	部分	375 / 768 / 1280 三档零横向溢出、关键控件均可点；真机 iOS Safari / Android Chrome 未验证；触控目标偏小
9	中文、浅色、极简工具风，无控制台报错	通过	全程 0 个未捕获异常；唯一 `console.error` 是产品自身记录的「批量单张失败」

需要行动的 4 项

按优先级排列。前两项是产品承诺与实现之间的实质差距，后两项是文档与体验的修正。

①依赖未内联 —— 「无需联网」不成立

实现与验收标准第 1 条直接冲突；也是「单文件原型」这一交付形态的破口。

实测: 页面在加载自检时执行 import('https://cdn.jsdelivr.net/npm/mp4-muxer/+esm') 与 .../gifenc/+esm，实测耗时 274ms / 0ms（后者已缓存）。
影响: 断网环境下页面可打开、可预览，但 MP4 与 GIF 两条导出链路直接失效（WebP 依赖本地服务，同样不可用）。方案第 5 节已注明「若体积过大或授权受限，退化为 CDN 引用」，但第十章验收标准未同步修改，形成文档自相矛盾。
建议: 二选一：把两个库源码内联进 HTML（mp4-muxer 约 30KB、gifenc 约 10KB，gzip 后更小，代价可接受）；或把第 1 条验收标准改为「首次联网加载后可离线使用」并加缓存策略。

②动效模板 4 个 —— 验收要求 8 个

方案第四章已列出 8 个候选，实际只落地 4 个，缺口明确。

已实现: 呼吸缩放 breath / 飘雪 snow / 光尘上浮 dust / 辉光呼吸 light
待补 5 个: 镜头推拉、光晕扫过、分层视差、雨丝、光斑摇曳
建议: 前三者可直接复用现有周期函数（z = 1 + amp·sin(2πt)）与粒子系统扩写，成本集中在「周期对齐 N 帧」这一约束上，机制已有先例可循。

③无缝循环的验收判据需要修正

不是实现有缺陷，而是「首尾帧 PSNR ≥ 40dB」这条线本身不适用于粒子类模板。

实测: breath 48.00 dB、light 48.22 dB（过线）；snow 34.69 dB（未过线）—— 但 snow 的相邻帧 PSNR 中位数也只有 34.32 dB。
判读: 三个模板的「环绕步」（末帧 → 首帧）PSNR 全部落在相邻步 PSNR 的分布区间内，说明循环真正无缝。粒子模板每帧差异本身就大，PSNR 基线天然偏低，用绝对阈值会误判。
建议: 验收标准改为相对判据：环绕步 PSNR ≥ 相邻步 PSNR 分布的下界（本次实测为 min(adj) × 0.98），40dB 仅保留为「静态类模板」的附加要求。

④移动端触控目标偏小

验收标准第 8 条涉及真机可用性，当前密度在手机上会点不准。

实测: 375px 视口下共 21 个可点元素高度不足 44px，最小 24px（时长 / 强度 / 清晰度 / 格式 / 音效各分段按钮）；.src-btn 为 31px。
建议: 至少给 .seg button 与 .src-btn 加一条 @media (max-width:760px) 规则，把最小高度提到 40–44px。桌面端保持现有紧凑密度即可。
待办: 真机 iOS Safari / Android Chrome 的全流程仍未验证 —— 本机无法完成，需人工确认。

逐项实测数据

以下均为程序读取的原始值，非界面提示或目测。

音轨导出（方案中标注「欠着」的一项）
输入	2 秒 440Hz 正弦，48000Hz 立体声（页面内构造 AudioBuffer）
产出	MP4 · 162,505 B · 编码耗时 225ms
ffprobe 视频流	h264 (High) · 640×480 · 24 fps · 72 帧 · 3.000s
ffprobe 音频流	aac (LC) · 48000 Hz · stereo · 141 帧 · 128 kbps · 3.008s
音视频时长差	0.008 s通过

三格式导出（ffprobe 独立复核）
格式	产出	复核结果
MP4	62,334 B · ~100ms	h264 · 400×304 · 24fps · 72 帧 · 3.000s
GIF	472,719 B · 110ms	gif · 400×304 · 30 帧 · 3.000s（10fps）
WebP	118,182 B · 684ms	webp_anim · 400×304 · 60 帧（20fps，经本地 ffmpeg libwebp 转码）

五渠道输入
渠道	实测方式	结果
点选	`#fileInput` change → loadFile	A-pick.png 500×400 载入通过
拖拽	派发 `dragenter` / `drop` + DataTransfer	B-drop.png 载入；高亮态 `.over` 进入加、落下移除通过
剪贴板	`ClipboardEvent('paste')` + clipboardData	C-paste.png 载入，toast 提示正确通过
整文件夹	拦截文件选择器，检视动态创建的 input	`webkitdirectory=true, multiple=true`；4 图 + 1 txt → 入队 4（非图片被过滤）；全 txt 时提示「这个文件夹里没有图片」通过
手机相册 / 多选	`#multiInput`（`accept="image/*"` multiple）change	3 张全部入队，预览取第 1 张通过

批量队列（10 张）与失败隔离
场景	结果
10 张连续跑	10/10 成功，0 失败；内存作品库 10 条、IndexedDB 10 条 / 508,315 B，UI 逐条显示体积与耗时通过
产出抽检	ffprobe 复核为真 MP4：h264 400×304 · 24fps · 72 帧 · 3.000s；参数快照（template / duration / strength / format / resolution / audioMode / bitrate）完整
失败隔离	队列 OK1 → BROKEN（截断 PNG）→ OK2：成功 2 张、失败 1 张，OK2 正常完成未被阻塞；失败项 UI 带「重试」按钮，失败产物不入库通过

无缝循环量化（N = 72 帧，720P）
模板	首尾帧 PSNR	环绕步 PSNR	相邻步中位 / 均值	环绕步落在相邻区间	首尾 ≥ 40dB
呼吸缩放	48.00	48.00	51.82 / 51.69	是	是
辉光呼吸	48.22	48.22	49.42 / 49.81	是	是
飘雪	34.69	34.69	34.32 / 33.94	是	否

视口与布局（CDP 固定布局视口）
视口	clientWidth	scrollWidth	横向溢出	关键控件
375 × 812	375	375	零溢出	选择文件 / 整个文件夹 / 粘贴 / 生成 / 开始批量均可点
768 × 1024	753	753	零溢出	同上，均可点
1280 × 800	1265	1265	零溢出	同上，均可点

「预览暂停 / 继续」按钮在三档下都位于首屏之下（需滚动），属正常折叠，非遮挡。

测试环境自检快照

页面内能力检测面板的实测值，用于确认结论的环境前提。

WebCodecs         可用
H.264 编码        可用
AAC 音轨          可用
GIF 编码器        就绪（运行时从 CDN 加载）
本地服务          在线 · WebP 可用（ffmpeg 已识别）
AI 通道           就绪 · 队列 0 / 100
作品库            就绪（file:// 下 IndexedDB 实测可读写）
未捕获异常         0

可复跑说明

本轮测试留下的驱动与素材都在工程目录内，可直接复跑。

文件	用途
`_cdp.mjs`	通用 CDP 驱动：`ping` / `eval <js>` / `shot` / `reload` / `mobile <w> <h>` / `dirpick`
`_mobile_check.js`	视口溢出 + 控件可达性 + 触控尺寸体检
`_t1_base.js` … `_t11_fail.js`	11 组用例：基础可用性、音轨、输入渠道、批量、循环量化、格式导出、失败隔离
`_test_assets/`	12 张测试图 + 2 个音频样本
`_out/`	本轮导出的 MP4 / GIF / WebP 实物，可用播放器复看

启动顺序：先 node server.mjs（或双击 start-server.cmd），再以 --remote-debugging-port=9222 启动 Chrome 打开 index.html，随后执行 node _cdp.mjs <mode>。