像素化过渡

淡入淡出的中间态是两张图糊在一起的泥色。像素化换了个思路: 中间态不是"两张图的平均",而是同一张图的低分辨率版本—— 每一帧都是自洽的画面,没有叠影。

在最低分辨率那一帧换源图,不是中途换—— 低分辨率时人眼分辨不出内容,切换就被藏住了。

imageSmoothingEnabled = false 是这个效果的全部,忘了它就是普通模糊、 一点马赛克感都没有;而且每次 drawImage 前都要设,某些浏览器在 canvas 尺寸变化后会重置。
r 走离散档位而不是线性插值,连续变化看起来像缩放而不是降分辨率。
canvas 会丢掉一切语义,真实项目里它只当过渡层盖在真实内容之上,过渡完撤掉。
故障/闪烁类效果对光敏感人群风险更高,prefers-reduced-motion 下直接换图不做过程。
配色排版是占位。进项目要跟项目的设计体系走(库规范铁律 6)。