loop-cover

循环封面 GIF

在满是静态图的动态中，会动的封面更容易被注意到。只有当动作幅度很小、循环衔接自然，且第一帧单独看也说得通时，这才有效。

**开始前：**如果存在 brand.md 和 MOTION.md，请先阅读。如果不存在，请先运行 brand-intake，或询问十六进制色值、字体和 Logo 文件。没有这些信息，绝不要声称成品符合品牌规范。

第 1 步：询问三件事，然后等待

1. **封面。**一张完成的静态图（PNG），或用 HTML 构建的封面。尺寸为 896 x 640，或形状比例相同的更大图片（7:5）。
2. **唯一的动效元素，**用简单明了的方式描述。“灯塔光束。”“橙色线条自行绘制。”“单元格之间的线条。”
3. **动效方式。**脉冲、描绘、缓慢漂移或发光。只选一种动作，不要三种。

第 2 步：制作

**如果封面是 HTML：**只将指定元素作为时间的纯函数进行动画处理，添加 window.seek(seconds)，并以 20fps 捕获 180 帧（9 秒）。

**如果封面是图片：**用代码为静态图制作动画。按颜色为指定元素创建蒙版（例如，选取蓝色明显强于红色的每个像素），将蒙版边缘柔化几个像素，并逐帧只改变这些像素。蒙版以外的部分不动。

无论哪种方式，都应使用一个干净的正弦周期，或一个描绘、停留再淡出的过程，贯穿 9 秒，让最后一帧自然衔接到第一帧。

**旋转循环顺序，让第 1 帧呈现完成后的图片。**收件箱和链接预览会将第 1 帧显示为静态图。第 i 帧绘制的是 ((i + offset) mod 180) / 20 秒时的画面，其中 offset 会将完全绘制完成的状态放在首帧。

编码时不要使用抖动，因为抖动会让扁平图像的每一帧都产生闪烁：

ffmpeg -y -framerate 20 -i f%03d.png -filter_complex "split[x][y];[x]palettegen=max_colors=128:stats_mode=full[p];[y][p]paletteuse=dither=none" -loop 0 cover.gif

第 3 步：测量

ffmpeg -v error -y -i cover.gif -vf scale=216:154,format=gray -f rawvideo frames.raw
python3 -c "
n = 216 * 154
d = open('frames.raw', 'rb').read()
f = [d[i:i + n] for i in range(0, len(d), n)]
diff = lambda a, b: sum(abs(x - y) for x, y in zip(a, b)) / n
print('frames', len(f))
print('seam', round(diff(f[-1], f[0]), 2))
print('excursion', round(max(diff(x, f[0]) for x in f), 2))
"

根据我发布过的封面设定目标：180 帧，接缝差异为 0.0 到 0.3，偏移量约为 0.7 到 2.8，文件大小为 0.6 到 2.3 MB。偏移量接近零意味着没有可见的动作。

我吃过亏才学到的事

• **“你把整张图都改了。”**我的第一张 GIF 让一条色带扫过整个画面。只对指定的元素做动画。
• **视频模型会添加镜头运动。**即使要求“镜头完全静止”，它还是会推进镜头。用代码为静态图制作动画，是锁定镜头的唯一方法。
• **绝不要在中间帧测量动作。**正弦运动在那里回到零，因此正常工作的动画会被报告为没有动作。应测量与第 0 帧相比的最大变化。
• **在 ffmpeg 的 eq 滤镜中，添加 eval=frame，**否则表达式只运行一次，画面不会动。
• **将图片缩小到 240px 宽再看一遍。**这就是它在收件箱中的显示尺寸。如果动效元素消失了，说明它太小。
• **直接上传 GIF 文件。**有些上传工具会将其转换为 PNG，动画就这样悄无声息地消失了。检查上传后的链接是否仍以 .gif 结尾。