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

4.0 KiB
Raw Permalink Blame History

UIBook中还有一个FlipAni函数是调用上个章节的翻页动画协程和重置状态逻辑

!Pasted image 20240328165936.png

这是翻页中的逻辑继承自Page页面基类开始翻页BeginDragPage的时候才调用SetActivevState将它设置为显示设置一下锚点和坐标旋转等信息 还有对应的Shadow组件Init初始化 SetShadowFollow设置阴影跟随逻辑ResetShadowData是同名的阴影重置位置信息逻辑调用

!Pasted image 20240328170308.png

对应使用到的表现,是这俩

!Pasted image 20240328170410.png

!Pasted image 20240328170437.png

对应的阴影也是Child(0)

!Pasted image 20240328170858.png

!Pasted image 20240328170920.png

拖曳的抽象逻辑基类,声明了需要用到的,各个变量,构造函数,完成初始化,有左右翻页拖曳,两个继承的子类

!Pasted image 20240328171149.png

!Pasted image 20240328171320.png

有三个函数开始拖曳函数是设定裁切mask蒙版的锚点鼠标的点击坐标赋值 然后拖曳中的前页和背面页分别是TheDraggingPage声明的_frontPage和_backPage调用上述提及解析的他们的BeginDragPage开始拖曳函数即可 GetClippingMaskPivot和GetPagePivot是两个抽象函数在两个继承子类会重写分别是获取裁切mask蒙版的锚点和设计页面的锚点

!Pasted image 20240328171237.png

左右重写

!Pasted image 20240328171719.png

!Pasted image 20240328171737.png

背面页,翻页过程中,左右也是有区别的,这里是获取,不同的背面页翻页,对应的角度偏转,也是有两个继承子类的重写

!Pasted image 20240328171855.png

左右重写; 翻左页的时候表现上会旋转180°

!Pasted image 20240328172008.png

!Pasted image 20240328172019.png

更新背页的逻辑UpdateBackSide局部坐标转世界坐标配合当前被拖动的书页顶点位置 CurrentPageCorner反三角函数得到角度调用上述的左右翻页偏转角度处理对背页的旋转完成修改赋值即可参考Unity——Mathf.Atan和Atan2的异同Mathf.Rad2Deg

!Pasted image 20240328172259.png

更新裁切mask页面的相关逻辑调用了之前提及解析的UIBook里面CulculateFoldAngle得到mask偏转角度赋值计算即可 其中调用的抽象函数GetBookCorner获取书本角落逻辑也是左右有不同的逻辑重写

!Pasted image 20240328172621.png

!Pasted image 20240328172745.png

左右

!Pasted image 20240328172832.png

!Pasted image 20240328172842.png

拖曳中的更新函数,获取到,当前鼠标点击坐标; 前背两页分别设置裁切mask和书籍本体作为服务体参考worldPositionStays; 不断配合鼠标点击位置更新、页面拖曳的角落Corner 裁切页面,背页,也会不断更新,拖曳位置; 前页还会通过SetAsFirstSibling设置层级遮挡参考SetAsLastSibling用法

!Pasted image 20240328172927.png

拖曳的结束逻辑,会校验,书页的角落顶点位置,最终合法; 再调用之前解析提及的FlipAni函数调用协程完成松开手的动画播放

!Pasted image 20240328173818.png

回到UIBook管理类在开始函数中还会有InitData初始化数据对应的调用

!Pasted image 20240328174049.png

具体逻辑,是完成书籍数据模型的实例化; 调用资源加载函数Resources.LoadAll把Book目录下的所有图片资源加载到_bookSprites图片数组 在游戏开始的时候会把书籍的sizeDelta尺寸设置成书页的width和height 对BookModel数据模型各个字段调用工具函数完成赋值即可

!Pasted image 20240328174133.png

继续,对角线,页面宽度等字段,也是完成初始化赋值; 正在拖曳页面的阴影使用InitShadow完成初始化即可

!Pasted image 20240328174409.png