状態間のトランジション · A から B へ
シェーダー画像遷移着色器图像过渡
- 押し出される
- 境界がうねる
- 水面のよう
2 枚の画像の切り替えはフェードではありません。水面や砂のように一箇所から押し分けられ、境界がうねりながら新しい画像が現れます。途中では 2 つの模様が絡み合って見えます。
使いどころ
画像の切り替え、商品ギャラリー、カバーのカルーセル、章の変わり目に向きます。同じ要素の数値が変わるだけの場所には使わないでください。1 秒以上かかり、再読み込みに見えます。
パラメータ
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 に渡す一文
シェーダーによる画像遷移を作ってください。2 枚の画像を GPU に渡し、フラグメントシェーダーでノイズ場を使ったしきい値合成を行います。しきい値は進捗に応じて −0.3 から 1.3 へ動かします。さらにしきい値付近でサンプリング座標をずらし（約 0.09、境界で最大・両端で 0）、境界が直線ではなく歪むようにします。全体は 1200ms。