状态之间的转换 · A 变成 B
像素溶解Pixel dissolve
- 数字感
- 有顺序
- 复古
下一张图不是淡进来的，是一格一格「长」出来的：每一格有自己的阈值，阈值 = 对角位置 + 一点随机，所以溶解斜着扫过去，而且不是齐刷刷的。
什么时候用它
适合「换一张图 / 换一个配色」这种等价替换：前后对比、滤镜切换、同一张照片换风格。别用它做页面之间的跳转 —— 一格一格换完要一秒上下，比一次过渡慢得多，人会以为卡住了；也不要用在需要看清细节的图上，溶解过程中细节是碎的。
参数
32×18 cells (10×10px) · threshold = diagonal + jitter, normalised 0–0.94 · per frame, no easing · 6% growth room
配方
条件 threshold = diagonal + jitter, normalised 0–0.94逐帧积分，不过缓动像素溶解 → 32×18 cells (10×10px) · per frame, no easing · 6% growth room
给 AI 的一句话
做一个像素溶解过渡：把画布切成 32×18 格（每格 10×10px），每一格算一个阈值 —— 对角位置（行号除以总行数 加 列号除以总列数，再除以 2）加一点随机抖动（正负 0.17），然后把所有阈值归一化到 0 到 0.94。压低上限是为了给每格留 6% 的生长余量，否则最后一批永远长不满。进度 p 从 0 走到 1：阈值小于 p 的格子画新图，每格从自己的中心缩放着长到满格（grow = min(1, (p 减 阈值) / 0.06)）。取样前先把两张原图各自缩放画进一张与画布等大的离屏画布，所有 drawImage 都从离屏画布取 —— 直接按画布坐标去取原图，拿到的是「另一幅图」的左上角一块。