ChunkDisappearImage-一个以矩形为单位的图片消失分解效果 (2)

开始时间
分两种情况：
①当目标点在图片内时，不去算准确的起始时间，直接设置为0。
②当目标点在图片外时，最近点一定是四个顶点之一。遍历四个顶点，计算一下离目标点最近的方块开始运动时的_Delta值，即f第一次不为0的时候
结束时间
计算一下最远点的f为1的情况即可，由于距离目标点最远的点一定是四个顶点之一，所以枚举四个顶点即可。

shader的重写

我们要改动Image默认的shader的顶点着色器来实现每个顶点的位移和alpha值的降低。
我们选择5.37f1的UGUI默认shader，UI-Default.shader进行修改，这个在unity官网就可以下到。

注意：

在Unity高版本打开低版本的shader时，会对一些函数做替换，如在2018.2打开5.37f1的shader时，会对如下语句进行修改。

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

此demo中使用的是2018.2版本的unity，所以在低版本使用时要把这句话改回去，不然会报错。

顶点的移动公式： //计算该方块到目标点的距离，以此为标准作为每个方块移动时间的延迟 float distance = length(target.xyz - leftBottom.xyz); //距离越远的方块是否运行越快，_SpeedArg为1时，所有方块运行速度大致相同，值越小，距离越远的方块运行的越快 float tempDis = 1 + distance * _SpeedArg; float f = clamp((_Delta - distance * _Interval) / tempDis, 0, 1);

根据f在0-1之间的变化，来控制方块在起点到终点之间的移动和alpha值的变化。
①distance * _Interval保证每个距终点距离不同方块之间的开始移动时间会有一个间隔。
②tempDis可以控制不同距离方块之间的速度比。

小结

原理其实并不难，主要只有两部分：改mesh，改shader。就是一些坐标的转换、开始结束时间的控制、版本的兼容性比较麻烦。
在把整个流程跑通一次之后，就会对流程有一个较为全面的认识，下次做2D或是3D的一些效果思路也也会更广一些。

代码链接：https://github.com/blueberryzzz/UIAndShader/tree/master/UIAndShader/Assets/ChunkDisappearImage