互动照片墙效果之扩散效果（一）_unity ui 扩散效果

互动照片墙效果之扩散效果（一）

项目中有一个需求：当点击到一个UI时，要把与它相邻的UI扩散出去，即周围清场。
我们来看一下解决思路：
Unity3D中的位置是一个向量；假定A是点击到的UI，B是要扩散的UI，当A指向B时即是B要扩散的方向，如图：

Vector2 dir = B.rectTransform.Position - A.rectTransform.Position;
1

我们只要方向不要大小，大小（扩散半径）我们自己指定；

dir = dir.normalized;
1

指定扩散半径：

dir *= radius;
1

到这一步，我们有了扩散方向和大小，只差一个起点坐标，加上A点的坐标；

dir += A.rectTransform.Position;
1

这样就完成了B按照与A的相对方向扩散出去的效果，上边的操作也可以简洁为一句代码：

this.targetPosition = (B.rectTransform.Position - A.rectTransform.Position).normalized * radius + A.rectTransform.Position;
1

运行效果如下：
参考链接： Unity使用DoTween实现照片墙效果
ps:新手不怎么会使用CSDN写博客

补充（2020.08.05）：
2020.06.23为最新，对部分（Ring）互动类型已做多点互动支持(注释的代码中貌似也有对多点的支持，时间过长记不太清了)；若需对单个图片进行简单的手势操作，可以看一下另一篇文章：https://mp.csdn.net/console/editor/html/107060159；
此外，这个项目是随自己兴趣写的，并没有进行过多的优化，且当时在学习xlua所以工程中会存在关于xlua的脚本请自行删除即可
最新链接：https://xuchaoqvn.lanzoui.com/b05hebyb
密码：bhm0