文章目录
- 快速导航
图片转 GIF：把 App 截图串成官网 / README 演示动图
商店列表上的截图是静态的；产品站、GitHub README、更新公告里，经常需要一段会动的短循环——把 3–6 张已有截图按顺序播一遍，比再录一次模拟器省事。
我们上线了本地工具：图片转 GIF。添加多张 PNG/JPG/WebP，拖拽排序，统一或逐帧设时长，选无限循环或指定次数，按 9:19.5 / 9:16 / 1:1 / 16:9 等比例输出；右侧实时预览，生成后显示真实体积再下载。编码用开源 gif.js，在浏览器 Web Worker 里跑，图片不上传。
先说清边界：这不是 App Store 的 App Preview（应用预览）视频。Apple 要求设备内真实操作画面、固定时长与编码规格；把 GIF 丢进 App Preview 槽会不合格。GIF 用在官网、文档、社媒、内部评审即可。
什么时候用 GIF，什么时候别用
| 场景 | 用 GIF？ | 更好的选择 |
|---|---|---|
| 产品站 / README 功能轮播 | 是 | — |
| 社媒短演示、对比前后 | 是 | 或 MP4（体积更小） |
| App Store Connect「App 预览」 | 否 | 真机/模拟器录屏，按 App Preview 规范 |
| Google Play 预览视频 | 否 | YouTube URL + Feature Graphic 封面 |
| 商店静态截图槽 | 否 | /preview 出静图，再 批量处理 |
一手步骤：从多图到可下载 GIF
- 打开 /tools/image-to-gif，拖入 3–6 张已经过商店排版的截图（或 UI 关键帧）。顺序不对就拖缩略图，或用 ‹ ›。
- 帧时长：演示阅读型用 800–1500 ms/帧；快切节奏可到 400–600 ms。逐帧模式适合「某一帧多停一会儿」。
- 循环：官网自动播放用「无限」；邮件/某些客户端若嫌烦，可指定 2–3 次。
- 尺寸预设：竖屏商店图优先 9:19.5 或 9:16；README 横条可用 16:9；头像式对比用 1:1。比例不一致时选「完整显示」并设留白色，或「铺满裁切」。
- 画质：App 截图、扁平 UI 关闭抖动通常更清晰也更小；照片/渐变可开抖动减色带，但体积会涨。
- 点「生成 GIF」，看体积。超过约 2–3 MB 就先减宽度、减帧数，或换「快速」画质，再重生成。
- 下载后嵌到官网或 README。若还要做社交分享静图，可用 /tools/og-share。
决策：宽度、帧数、抖动
| 目标 | 建议 | 说明 |
|---|---|---|
| README 嵌入 | 宽 480–720，4–6 帧 | 体积优先，避免拖慢仓库页 |
| 官网首屏 | 宽 720–1080，3–5 帧 | 可稍清晰；仍控制在几 MB 内 |
| 表情包 / 反应图 | 宽 ≤480，短循环 | 颜色少，关抖动 |
GIF 每帧最多 256 色。渐变背景容易色带——能换成纯色或少停渐变再导出静帧，会比事后开抖动更干净。
和截图管线怎么接
典型顺序：
- /preview 或设计稿导出静帧
- 需要多商店像素时走 /tools/batch-processor
- 挑 3–6 张代表帧进 /tools/image-to-gif
- 上传商店前仍用 /tools/screenshot-check 核静图——不要把 GIF 当截图上传
透明 PNG 目前会先铺背景色再编码（避免单色透明毛边）。要透明动图请改用 APNG / 动态 WebP，本工具暂不保留 Alpha。
帧顺序怎么讲故事（比调帧率更重要）
动图失败常见原因不是「不够丝滑」，而是顺序没有完成一次说服：
- 第 1 帧：结果利益（「30 秒导出」「离线可用」），不要先甩设置页。
- 中间帧：完成该利益的 1–2 个关键步骤。
- 最后一帧：确认态或导出态，让循环回到开头时仍说得通。
五帧叙事模板可参考站内 五帧截图故事板；GIF 通常压缩到 3–6 帧，优先砍氛围图，保留决策帧。
若还在排分镜，可用 /tools/drawnix 白板先画顺序，再回截图工具出静帧。
体积与色带：我们踩过的坑
| 现象 | 原因 | 处理 |
|---|---|---|
| 文件 8 MB+ | 宽度过大 + 帧多 + 开了抖动 | 宽降到 720 以下；帧减到 5；关抖动重试 |
| 渐变色带明显 | GIF 256 色量化 | 静帧改少停渐变/纯色；或接受轻微色带 |
| 预览快、导出慢 | 浏览器播的是 Canvas，导出才量化编码 | 正常；大图耐心等 Worker 跑完 |
| 循环次数被忽略 | 个别桌面看图软件不读 Netscape 循环块 | 浏览器与主流社媒一般遵守；以目标平台实测为准 |
编码脚本从本站 /vendor/gifjs/ 加载（gif.js，MIT）。生成后页面会显示真实字节数——以这个数字为准，不要只看「感觉不大」。
同一套静帧：GIF 还是 MP4？
| GIF（本工具） | MP4（其他流程） | |
|---|---|---|
| README / 多数文档直接粘贴 | 通常不用播放器 | 需要 video 标签或托管 |
| 颜色 | 每帧 ≤256 色 | 真彩色 |
| 扁平 UI 循环体积 | 控制宽度与帧数后可用 | 同清晰度往往更小 |
| 商店预览视频槽 | 不能当 App Preview | 也不等于自动合规，须满足官方视频规范 |
本站做 GIF，是为了「已有静帧 → 无播放器循环」这条最短路径。广告向成片继续用你们的视频流程即可。
小检查清单
- 是否误把 GIF 当成 App Preview 或 Play 预览视频？
- 帧顺序是否讲完一个完整利益点（不是随机轮播）？
- 体积是否可接受；不行就减宽/减帧，而不是只开压缩幻想？
- 品牌名在动图里是否可读（字号过小在缩小宽度后会糊）？
需要横幅级静图封面时，Play 特色图请用 /tools/feature-graphic；竖屏商店图继续用预览图编辑器，不要混槽。