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

4.4 KiB
Raw Permalink Blame History

这个场景,对应的是,翻书特效,运行的初始效果,还有翻书效果,表现

!Pasted image 20240328125850.png

!Pasted image 20240328125930.png

逻辑上这个翻书效果的实现主要是通过点击交互配合Mask遮罩实现翻书特效这是书籍的数据模板类

!Pasted image 20240328145411.png

后续的变量声明

!Pasted image 20240328145506.png

书籍页面上,会有阴影,对应的逻辑类,是这个; 声明的变量里面,有位置信息、图片和默认的颜色,这里是淡灰; 初始化函数,就是对上述的变量,进行赋值即可; Follow函数就是阴影界面本身绝对坐标和旋转跟随移动后续会跟随裁切的mask组件同步位置信息 ResetShadowData函数就是重置锚点坐标和旋转

!Pasted image 20240328154647.png

这是拖曳翻页的逻辑类其中包含开始拖曳翻页、翻页中、结束拖曳翻页三个Action委托的赋值

!Pasted image 20240328155555.png

这是页面的基类声明的Func委托事件是用来根据索引获得书籍页面图片 还有其余几个变量页面图片、唯一id标识、配套对应阴影、位置信息 Init初始化函数对各个组件进行初始化赋值即可

!Pasted image 20240328155315.png

几个函数分别是从图片容器通过id拿到当前图片信息 设置显隐,设置父类物体;

!Pasted image 20240328155508.png

这是场景书籍,最外层,挂载的,统一管理逻辑类

!Pasted image 20240328155859.png

声明的各个变量

!Pasted image 20240328155933.png

以左边书籍页面当前id作为基准弄一个获取器

!Pasted image 20240328160053.png

InitComponent函数初始化各个组件是通过Find名字的形式找到对应的节点然后添加对应的组件

!Pasted image 20240328160316.png

剩余的汇总组件初始化逻辑还有调用各个组件的Init初始化

!Pasted image 20240328160355.png

几个函数分别是获取Mask裁切组件、世界坐标转局部坐标、局部坐标转世界坐标

!Pasted image 20240328160532.png

!Pasted image 20240328160605.png

!Pasted image 20240328160631.png

!Pasted image 20240328160652.png

更新ID的逻辑就是以左边页面的唯一ID作为基准加上特定索引获取左页_leftPage、正在翻的左页_leftSideOfPage、正在翻的右页_rightSideOfPage、右页_rightPage

!Pasted image 20240328160956.png

移动结束后调用的函数是AniEnd是用来判断是否为翻页到左边当前左页id递增2 JudgeCornerIsLeft是检测是否为左边的角落通过跟书籍数据模型的BottomCenter字段的x坐标比较即可 GetClickPos是获取到目前点击的位置如果正在拖曳就获取鼠标的mousePosition调用上述函数世界坐标转成局部坐标 否则直接调用数据模型的ClickPoint字段即可

!Pasted image 20240328161528.png

因为GetClickPos唯一的调用位置就是对ClickPoint进行赋值

!Pasted image 20240328161904.png

计算底部中心的坐标,通过数据模型的页面宽度,配合三角函数计算即可

!Pasted image 20240328161947.png

计算上部中心的坐标也是同理调用的是数据模型的对角线PageDiagonal字段计算即可

!Pasted image 20240328162029.png

计算拖曳中的页面角落Corner的拖曳位置极限就调用了上述的俩函数因为不能无限拖曳页面本体需要底部和顶部的Limit限制逻辑

!Pasted image 20240328173416.png

配合页面底部中心点坐标的x还有书籍角落坐标的x计算得到偏移数值会用于计算裁切mask页面的偏转角度

!Pasted image 20240328164701.png

也就是这个通过LimitOffsetX和反三角函数Mathf.Atan计算得到偏移角度参考Unity——Mathf.Atan和Atan2的异同Mathf.Rad2Deg

!Pasted image 20240328164919.png

!Pasted image 20240328165101.png

回到UIBook管理类ResetState函数体会调用更新左页id还有页面的显隐都隐藏起来即可 PageAni协程使用书籍数据的ClickPoint翻页位置字段配合WaitUntil函数用在翻页结束之后的通过传参得到书页最终的目标位置target实现结束时候的动画效果

!Pasted image 20240328165308.png