【案例】图文过渡/转场

开发平台：Unity 6.0
开发工具：Shader Graph
 

一、效果图

---

 

二、Shader Graph 路线图

---

 

三、案例分析

---

核心思路：Texture2D RGB 的 Lerp 插值输出

  实现图文的转场变化在于 Lerp （插值节点）的 T （输入值）。如何给到合适的值是实现各类型转场效果的关键。下面将记录效果思路说明。

3.1 无动画覆盖形式转场

主依赖于 Lerp（插值节点）的变量 Fade 输入以实现效果。
 

3.2 动画形式 | 来自 X 轴向的过渡

该过渡效果在 3.1 基础上要求图片不再是整体形式的过渡，而是由局部转向整体的过程。实现该过程的表现通过 UV 完成。

例如实现 X 轴向的移动表现
使用 Split（分割节点）获取 X 轴值信息。
使用 Step（最小值节点），通过变量 Step 输入值，将 X >= Step 的值作为1输出，反之0输出来控制纹理显示的区域。

此处使用 One Minues (取反节点) 仅为控制输入值递增时的过渡方向表现。 最终由插值计算，输入中 1 的部分将保留并输出，反之隐藏实现最终效果i。
 
以此可以推理，取 Split（分割节点）中 Y 值可实现纵向的过渡效果。