无缝循环 APNG:GIF 的 Netscape 循环与 APNG 的 `num_plays`、最后一帧 dispose 不是同一套语义,迁移时最容易「少播一圈」或闪接缝
`loop-gif-apng` 面向加载态、点赞反馈、呼吸灯等需要「首尾相接」的微动效。GIF 习惯用无限循环标记配合 disposal 清屏,而 APNG 用播放次数与 dispose/blend 控制累积缓冲区;映射错了会在回到第一帧时出现半帧残影或节奏突然加快。此类动效通常画布小但循环极长,还要警惕省电模式下降级为静帧。验收应数完整循环周次并对照毫秒表测周期,而不是只看「看起来在转」。
循环变体步骤:先写清有限次还是无限次,再对齐首尾帧 dispose,最后在低帧率省电模式下抽检
- 记录源 GIF 的 loop 计数(0 表示无限)与最后一帧 disposal,明确 APNG `num_plays` 目标;若需要「恰播三次」必须在工单写死数字,避免工程按默认无限出包。
- 用逐帧步进对比首帧前一帧与首帧的合成结果,检查接缝是否有亮线或透明闪动;必要时插入一帧全清或调整 blend 以匹配视觉上的无缝。
- 在开启系统「低电量」与「减少动态效果」的手机上各录屏 30 秒,确认降级策略符合设计预期而不是意外停在第一帧。
循环变体问答:播放次数、接缝闪、省电策略
源 GIF 写无限循环,导出的 APNG 却停在最末帧不动,是 `num_plays=1` 被写进去了还是播放器实现 bug?
先用二进制查看器确认 `acTL` 里 `num_plays` 是否为 0(规范里 0 常表示无限,需与所用编码库文档核对)。若元数据正确仍停止,换官方浏览器试播以排除自研解码 bug;记录问题帧索引与 dispose 链给客户端同学复现。
每轮循环回到起点时总有一帧白色闪一下,是首帧不该 blend 还是末帧该 clear to background?
多半是 dispose 未在循环边界清缓冲区导致上一圈残影叠加。尝试让循环点前一帧 `dispose` 为全幅清或让首帧使用 `blend_source` 与背景一致。改动后用透明棋盘底与纯白底各测一遍,闪动常只在某一种底暴露。
需要「播放三次后停在最后一帧」供用户点确认,APNG 单文件能否表达,还是要靠 JS 切 `src`?
APNG 自带有限次播放能力时可把 `num_plays` 设为 3 并确保末帧 dispose 正确;若库或平台忽略该字段,就要 JS 监听 `animationend` 或换用视频/GIF。不要假设所有 WebView 都遵守 `num_plays`,关键交互应有二次检测。
循环动效在设计师工具里顺滑,上线后周期忽快忽慢,是帧延时丢失还是被全局倍速?
导出后核对每帧 `delay_num/delay_den` 是否与 GIF 的 centisecond 对齐;再查页面是否误用 `steps()` CSS 动画叠加。若仅部分设备漂移,记录系统动画缩放设置(无障碍「减弱动态效果」有时会改变表现)。
想把循环微动效同时用于 PWA 推送富媒体,APNG 支持度不够时怎么兜底?
富媒体通道往往只认静态图或视频截帧,需单独导出方形封面与短循环 MP4/WebP;主站继续用 APNG。各渠道素材表应列明格式与最大 KB,避免同一 URL 硬塞所有入口。