北京
我正在为 Isovalent Labs 开发一项新功能，细节还不太方便透露，不过很快就会对外正式公布。现在能聊的，是开发过程中掉进去的一个技术坑：用 AI 生成视频、做动画版 WebP，结果遇到了透明度处理问题，最后却找到了一个出乎意料的干净解法。
这次的新界面需要一种会动的卡片——等距视角的城市建设场景图，每个学习分区固定一张，鼠标悬停时画面就活起来。每张卡片都是先有一个静态 PNG，接着给它配一段循环起来的短视频，做成动画效果。下面是几张带背景的 PNG 卡片例子。
对视频的生成提示词，我刻意限制了范围，要求“非常轻微、极其克制地给这张卡片添加动画，不要有任何镜头移动，也别改变视角。”后来证明，这个约束非常关键，直接决定了后面技术路线的可行性。
为了得到无缝循环，我把同一张 320×320 像素的 PNG 同时传给工具作为起始帧和结束帧。工具只支持输出 16:9 或 9:16 的画幅，我就选了 16:9，分辨率 720p，最短时长 4 秒。生成的结果是一个 1280×720 的 MP4，卡片居中，背景被自动渲染成了黑色。一眼就能看出来，动起来以后卡片的边缘已经被破坏，看起来毛毛糙糙，完全不够干净。
接下来的目标是把这块正方形的卡片区域裁切出来，去掉全黑的背景，然后转成带透明通道的动画版 WebP。听上去很直接，做起来却远没有这么简单。
第一次尝试：靠颜色检测去背景。我找到的最便捷的线上工具是 ezgif.com，步骤大致是这样：先把 MP4 裁切成 720×720 的方形，转成 WebP 格式，缩回 320×320（和原始 PNG 尺寸一致），然后靠检测黑色像素把背景去掉，最后再优化一下文件大小。结果相当不理想，边缘全是抖动的杂色团，看上去既脏又晃。问题在于，黑色背景的意思不仅是边缘会出毛刺，就连画面里任何深色区域都可能被错误去掉——阴影、轮廓线、屋顶、甚至眼珠，检测算法根本分不清这是“背景的黑色”还是“画面里本该有的黑色”。
第二次尝试：用色度键控。我考虑给原始 PNG 加上一整片纯色背景，然后再拿给 AI 生成动画。考虑场景里会有大量绿色植被、蓝色天空和灰色石面，选品红最合适，它基本不会在这些元素里出现。于是挑了一张卡片，把背景填成亮粉色，再用这张新图去生成了一版动画。然后依旧裁剪、去背景、优化文件，结果却更糟了：粉色背景怎么都去不干净，画面边缘总有残留的粉色像素，一眼就能看出不该出现在那里。问题的根源在于，AI 视频模型并没有原样保留我选的那个精确色值，而是像处理其他颜色一样进行了插值融合。原本设定的 #FF00FF 到了生成的视频里，变成了一团由不同粉红、洋红、紫色混杂而成的色雾。后来我试着腐蚀检测到的边缘，让保留区域向内收几个像素，收到 5 像素的时候，那些零星的杂色像素基本消失了，但边缘比第一次尝试还要粗糙斑驳。
然后我忽然反应过来：其实手里本来就有一块干净的遮罩——原始静态 PNG 的 Alpha 通道。每张卡片一开始就是带透明层的图，既然已经有了清晰的边缘轮廓，为什么还要舍近求远去搞颜色检测和色键？直接把 Alpha 通道用到动画上，切割出同样的透明区域就可以了。这个思路一旦打开，整个问题的解法就变得异常干净，边缘和原始静态图一样锐利，也不再受深色内容或杂色背景的困扰。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
