目录

1. 需求简述

2. 大方向思路

3. 具体实现思路

4. 问题描述

5. 问题解决

1. 需求简述

需求是一个九宫格拼图的游戏，每两张图都可以随意对换，当拖动图片经过被交换图片时，拖动图片不动，被交换图片缓动至原拖动图片位置，可任意次数重复。

2. 大方向思路

对于本需求我做了两层图片，第一层使用GridLayout布局定位置同时方便扩展（4x4，5x5之类，可以随需求千变万化）），第二层用于拖动，通过继承unity的EventTrigger类，使用AddEvent，为Drag，BeginDrag，EndDrag事件添加回调来实现拖拽。

3. 具体实现思路

实现思路是在BeginDrag中定死拖拽的UI（上层图片，确定时下层隐藏），在Drag中判断是否"碰撞"到其他UI，若碰撞，则变换成对方父类的子类，这样就可以通过锚点位置（0，0）直接吸附（也尝试过直接用position，以及其他方法，但最终由于一直对不齐，猜测时因为布局问题导致的，因此才用了这种方法，逻辑清晰、实现简便及方便维护扩展），最后在EndDrag里移动吸附。

对于移动动画，我用了DOTween的DOLocalMove方法，并在OnStart的回调里把下层图片sprite设为nil，这样下层就是一个空白方块（需求），并在EndDrag中将其内容设为上层图片并将上层设为不可见。

4. 问题描述

偶现下层图片恢复不过来的bug

5. 问题解决

个人定义为代码时序问题。Drag和EndDrag同时进行，虽然是在Drag回调中非常前面的位置进行初始化操作，但还是有概率先执行EndDrag中的图片还原，再执行赋空操作，想来应该是Drag中的代码太费时，以致于EndDrag执行完毕后依然未执行完所有代码。

解决办法是把OnStart里的这段代码放到它的上面，虽然是放在OnStart里，但代码运行至此花费时间比想象中长，因此尽量把主要代码提前，以避免时序问题。