状态之间的转换 · A 变成 B
着色器图像过渡Shader image transition
- 被推开
- 边界在扭
- 像水面
两张图之间的切换不是淡入淡出：画面像被水波或沙粒从一处推开，边缘扭曲着把新图顶出来，中途能看见两边的花纹绞在一起。
什么时候用它
图片切换、商品图浏览、封面轮播、章节过渡用它；同一个元素只改数值的地方别用 —— 这一下要花一秒多，用户会以为页面重载了。
参数
fragment shader · noise(uv × 4.5) threshold = progress × 1.6 − 0.3 · uv offset ±0.09 × (1 − |2m − 1|) · 1200ms · per frame, no easing
配方
着色器图像过渡 → 1200ms逐帧积分，不过缓动着色器图像过渡 → fragment shader · noise(uv × 4.5) threshold = progress × 1.6 − 0.3 · uv offset ±0.09 × (1 − |2m − 1|) · per frame, no easing
给 AI 的一句话
做一个着色器图像过渡：把两张图交给 GPU，在片段着色器里按一张噪波图取值做阈值混合，阈值随进度从 −0.3 推到 1.3；并且在阈值附近给采样坐标加偏移（幅度约 0.09，在边界处最大、两端为 0），这样交界处是被扭曲的而不是一条直线。整段 1200ms。