特效和UI之间,也可以通过layer层级控制,前后遮罩效果; 有两个Canvas画布,第一个的layer是0;

第二个的是10

这个是包含Particle System 粒子系统的,特效预制体,展开Renderer渲染器,设置layer是5,介于俩画布之间

运行游戏,可以看到,遮罩也是正常的,根据层级来

特效还可以被Mask遮罩,例如这个Mask包含一个small特效

特效渲染器的masking选项,如果选择了inside,就会在mask内部显示

outside就是反着来了,显示在外部

运行游戏,点击,会出现照片墙的波纹特效

这是最外层,管理照片墙的逻辑类,其中声明的Prefab变量,是用来批量初始化的预制体; 单一照片都会挂载PhotoWallItem这个脚本,这里弄一个队列容器items统一管理; centerIds这个队列容器,是用来存储,点击照片的中心点集合; offset就是照片之间,间距偏移数值; Start初始化函数中,先实例化各个,数据队列容器,还会在当前实体上,新增挂载一个Reenter组件,是用来处理,照片墙整体的初始化移动,相关逻辑; 最后调用的SpawnItems函数,是用来批量创建,各个照片实体的逻辑;

对应挂载在画布Canvas上

单个照片实体,都会挂载的,对应逻辑脚本文件; 有唯一标识ID,中心点布尔判断,设定缩放showScale,是否为左右边界Border的布尔判断,当前照片实体邻居合集,记录的是唯一ID,数据容器NeighborIds; 还会声明FadeEffect特效逻辑类,是用来处理,邻近周边照片墙点的透明化,也是用了Dotween插件的DoFade透明动画插件,后续会解析; CircleXMin和CircleXMax两个字典,都是用来配合照片墙,整体移动的数据容器; Radius是设定的半径,主要用来配合,透明特效的显示范围; TargetPos就是照片实体的,目标位置信息,用于配合移动即可; 声明的FluctuateEffect变量,是用来处理,周边照片点的缩放处理特效,后续会解析;

透明特效,对应逻辑; 也是声明了唯一标识id,半径,对应的,单个照片实体,影响半径radius,获取图片组件,用来设置Image组件的raycastTarget射线检测,是否开启; Func委托,是用来从,总的照片墙队列容器,通过index索引,拿到特定的PhotoWallItem照片实体; 还有画布组CanvasGroup组件等; Init初始化函数,就是对各个声明变量,进行赋值初始化即可;

可以看到,对应的Image子物体,是有包含CanvasGroup组件的

播放透明特效的逻辑,在Play函数中; 一连串布尔判断之后,对包含中心ID centerId的照片实体,通过GetDistance,在影响半径,距离内的实体,通过Dotween动画插件的接口,如果目标阿尔法数值为0,也就是最终要变成透明的话,就取消该实体的点击射线检测raycastTarget,同时CanMove设置为false,不能移动; 反之,就是上述逻辑相反即可;

函数内,透明化处理的核心逻辑,在0.2秒内完成DOFade操作,然后调用协程WaitFade,等待0.15秒后,调用临近照片点的,透明特效播放Play函数逻辑即可

控制缩放特效的相关逻辑,声明的变量,和透明特效的,基本类似,有一个不一样,是_defaultScale,默认缩放参数值; Init中,完成各个变量的初始化赋值即可,其中默认缩放,设置是组件的localScale自身缩放即可;

表现上,缩放特效,是以中心点为中心,向周边所有节点,扩展的,所以是没有,透明特效那种,作用半径范围; 也是Play函数,触发特效的缩放动画播放,在一系列布尔判断处理之后,通过DOScale函数,完成缩放特效,然后调用WaitFade协程,播放桌边的缩放特效即可;