obsidian/笔记文件/2.笔记/UGUI整体解决方案-案例篇_第八章.md
2025-03-26 00:02:56 +08:00

3.9 KiB
Raw Permalink Blame History

回到单个照片实体逻辑类其中CanMove获取器调用的是透明特效FadeEffect对应的布尔判断 还有两个Action事件委托分别会绑定队列容器增删中心id的相关逻辑操作

!Pasted image 20240327160141.png

设置照片实体,名称接口

!Pasted image 20240327160419.png

对应表现

!Pasted image 20240327160506.png

单个照片实体,相关数据的重置接口

!Pasted image 20240327160545.png

添加和移除中心id队列容器相关逻辑

!Pasted image 20240327160721.png

通过位置信息和缩放尺寸,配合MathF.SqrtMathF.Pow数学函数,完成影响半径的计算赋值,主要用于透明特效作用范围

!Pasted image 20240327160843.png

获取周边照片实体的id需要判断当前节点是否为左右边界Border再加到NeighborIds队列容器即可

!Pasted image 20240327161239.png

照片实体的初始化函数,声明的各个变量,完成初始化赋值; 调用上述函数命名照片拿到周边照片实体id队列容器再在自身新增FadeEffect透明特效组件计算得到影响半径Radius配合完成初始化 FluctuateEffect缩放特效同理

!Pasted image 20240327161636.png

批量移动照片实体的相关逻辑,是这里; 一个isMove布尔判断是否要整体移动 centerId是中心节点队列容器也是通过传参赋值 items容器通过传参拿到总的照片实体队列容器 itemPos和changePos都是配合用于照片墙的整体移动 Init初始化函数对以上变量进行初始化赋值即可

!Pasted image 20240328112954.png

重置位置信息,是将照片实体的锚点坐标,跟屏幕尺寸相关,配合赋值即可

!Pasted image 20240328113304.png

有几个工具方法,分别是配合中心节点,影响范围,使用MathF.SqrtMathF.Pow换算得到各个X和Y轴的最大/小数值

!Pasted image 20240328113416.png

设置状态的相关逻辑中心节点centerPos是根据照片实体节点的锚点坐标anchoredPosition直接赋值然后配合实体的Radius范围限制使用上述的工具方法得到最大和最小的坐标以中心节点centerPos为key添加到 CircleXMax 和 CircleXMin 字典容器即可

!Pasted image 20240328113748.png

整体移动的相关逻辑; 遍历所有的照片实体item提取其中的 CircleXMax 和 CircleXMin 数据容器对应中心节点的坐标比较判断对changePos移动坐标完成修改和赋值

!Pasted image 20240328114323.png

后半部分逻辑继续判断修改changePos移动位置坐标相关即可

!Pasted image 20240328114606.png

初始化位移逻辑InitMove就是调用了上述相关逻辑 更新函数中按W可以重置移动isMove布尔判断是否要调用整体移动函数

!Pasted image 20240328120310.png

运行游戏按w是可以重新移动的表现正常

!Pasted image 20240328120436.png

回到照片墙最外层,管理逻辑; 纵横两个row和column是配合屏幕宽高和单个照片的预制体Prefab宽高进行计算初始位置亦然参考Mathf.FloorToInt 两个遍历循环分别遍历row和column实例化多个照片实体添加PhotoWallItem组件Init初始化 设置锚点坐标使用DOAnchorPosX完成初始化移动即可

!Pasted image 20240328114816.png

逻辑的后半部分就是把Item逻辑的 _addCenterAction 和 _removeCenterAction 两个委托逻辑,完成绑定; 在遍历完之后左右边界Border也是基于index和column列参数得到的

!Pasted image 20240328115532.png

外部照片墙还有一个GetItem函数接口是通过Index索引从总的照片队列容器拿到特定照片实体即可

!Pasted image 20240328115941.png