Unity2D——滑动翻页效果
最近因为做毕设的原因,需要使用到相关的内容,也在网上找了相关的很多资料,根据自己在哔哩哔哩看到的一个教程,总结了以下一种方法,不需要使用到代码就可以轻松的实现滑动翻页效果。
这里参考的教程是
遮罩
滚动列表
从上面给出的两个超链接不难看出,要做到滑动翻页,我们需要用到的两个组件就是遮罩、滚动条
上面给出的两个视频做出来的效果是垂直翻页的效果
下面我给出来的教程做出了点修改,是水平翻页的效果
-
首先新建一个2D的项目
-
新建一个Canvas,在它的下面再新建一个Game Object,并重命名为LayOutGroup,并新建几个Image(可以通过crtl+d来实现复制)
-
给LayOutGroup添加Content Size Fitter,如下图中的设置
-
再添加Horizontal Layout Group,据图如下,取消Child Force Expad中的Width勾选
-
接着选中所有的图片添加LayOut Element组件
-
接着在Canvas下创建一个Create Empty,并改名为MaskedGroup,我们把这个的大小改为200×200,作为遮罩使用,并且给其添加Rect Mask 2D组件
-
接着把LayOutGroup拖进MaskedGroup下面
-
其实这个时候就已经可以看出来,有部分的图片已经被遮住了,我们拖动LayOutGroup就可以看出来初步的效果已经实现了。我们可以根据自身的需要来修改MaskedGroup的长宽,来实现你想要出现的区域范围。
-
这里因为要做出来翻页的效果,就被我更改了一下大小的设置
-
完成了上面的步骤以后会发现,在运行的时候我们并不能拖动它,所以下面我们要来添加一个滚动条实现运行时的拖动
-
在Canvas下创建一个Create Empty,并改名为ScrollGroup,再把MaskedGroup拖拽进ScrollGroup下面,再ScrollGroup里添加Scroll Rect组件,完成下面的一些修改就可以啦
-
这个时候运行程序就会发现,已经可以拖动图片进行翻页设置了,当然其中的一些灵敏度参数,弹性设置也可以自己修改
-
给出的教程里有添加滚动条显示进度,因为本人的设计并没有这方面的需要就没有添加,有需要的可以参考给出的教程。