Unity利用UGUI 无代码实现卷轴拉开效果（配合Dotween动画）

先看效果视频 从左侧 中间 右侧打开

中心打开.mp4

从左侧打开.mp4

右侧打开.mp4

 

 

下面再来说实现方法：

 

1.首先需要将UI切成3部分，分为（1）左边的卷轴 （2）中间部分 （3）右边的卷轴，将这三部分调整好尺寸后放到一个父物体里。同时要按照顺序摆放

 

2.给父物体Panel设置Horizontal LayoutGroup组件（Unity自带组件）

设置如下参数

 

3.重点部分：

中间部分设置Image和Mask组件 属性如图，并在中间部分下放置一个显示中间图片的Image，下面显示了中间部分的组件设置图片

 

4.如何调整中间展开 还是一侧展开？

答案就是设置Panel的HorizontalLayoutGroup的ChildAlignment属性

MiddleLeft为左侧展开

middleCenter为中间展开

middleRigth为右侧展开

 

5.使用dotween实现控制动画

在使用中，只需要设置中间部分（举例中名为InformationCavans的物体）Rect的width值即可