视频预览
圆点消散特效
设计思路
首先我们需要把图像分成 N*N 的网格（N 即代码中的 dots），每个网格中的坐标 pos 的取值范围都是 [0.0, 1.0] 的，且每个网格内的中心坐标都是 (0.5, 0.5)。那么我们就可以在网格内部依据像素到中心的距离 distance(pos, grid_center) < r 来绘制出一个圆。
接下来的问题是——如何设计网格中的圆的半径 r ？这里的设计是让 uv 离变化中心 (center) 越近的半径越大，越远的半径越小。如图所示，由于本例的变化中心就是屏幕中心，所以中间的圆半径最大，而屏幕四角的圆半径较小。
最后，我们通过乘上 progress 来让网格中圆的半径随着时间变化，以控制圆的缩放。