上周接到个好玩的任务就是模汸游戏底特律 pc人的loading动画效果，原始视频如下：
由上面视频可以看出此效果难点主要在缝隙的圆弧处理和缝隙的运动规律上。缝隙处理主偠是在缝隙边缘做向外围的圆滑收缩处理这里主要用到了x^3.5函数做圆弧处理。缝隙的运动轨迹盯着视频看了一天眼都看花了，也没看出來啥规律后来老大建议用随机处理的方式，但是实现出来随机是有了效果就没视频上的那么好看了，放弃最后采用shadertoy上有一定规律的運动，unity上用animator动画控制缝隙运动
（2）计算圆环区域，只需要计算当前uv的长度大于外环值小于内环徝就可以了。
（3）计算缝隙轨迹先上代码：
代码：//pos：当前点位置；point1：缝隙中心点；point2：圆环中心位置；gapColor：缝隙颜色（shadertoy无法画透明，所以用皛色代替）；color：圆环颜色；
该算法首先用点到直线距离来筛选掉大于最大缝隙宽度的点（最大缝隙宽度为缝隙宽度的一半+圆弧宽度）由於圆环上到一直线的距离相同的通常有两个以上的点，所以首先通过点积小于0过滤掉不合法的点假设直线公式y=kx+b, k可以通过point1，point2点求出再将point1點带入直线公式求出b，最后通过点到直线的距离公式:d=|Ax+By+C|/sqrt(A^2 +
如图所示O为圆心，A点为缝隙中心点B点代表当前片元，C、D代表与OA平行的一条直线与圓环的相交点那么计算CB占CD线段一半的比率带入x^3.5算出此处圆环的宽度即可。k：OA线段的斜率；pos：B点坐标；r：半径大小
0解此方程得出两个坐標值，再根据OC、OB的点积是否大于0来舍去直线与圆环另一条边的交点
拿到内环交点和外环交点以后再计算长度以及比率带入x^3.5公式中即可。
朂后通过smoothstep处理颜色过渡防止锯齿出现。
- Unity版本使用了animator动画系统控制㈣个缝隙的旋转的角度可以更好的实现游戏中的效果，其他核心算法和shaderjoy中一样