Unity实现滑动更换界面效果

在做2048这个游戏时，因为菜单页面还能查看游戏规则，而这些规则又不在同一个页上，所以需要滑动页面实现页面切换，但是仅仅使用unity提供的组件做出的效果仅有一个切换的意思，交互感很差，所以在组件的基础上又写了一个控制页面切换的类。而界面切换就是实现一个滚动的视图。

在unity编辑器中实现滚动视图的基本操作：需要用scroll rect组件

首先可以看看官方用户手册中关于scroll rect组件的讲解，说的很明白。最精辟的描述就是用于使子 recttransform 滚动的组件。

滚动视图中的重要元素包括视口、滚动内容以及可选的一个或两个滚动条。

scrollview是滚动视图，viewport是视口，content是滚动内容的集合（在其他地方可能就是一张大图），这些都是panel。viewport会显示content的一部分内容。

注意scrollview、viewport的大小都是和画布一样的，而content大小应该是其下所有内容大小的和，如下图。
下面是content中对应的内容。看到图也应该知道实现滑动更换界面功能的原理了，正是把该显示的放在视口下。

scroll rect组件的配置：

为scrollview添加scroll rect组件，并把viewport拖给scroll rect组件的viewport属性，再把content拖给scroll rect组件的content属性，滚动条看需要加吧，我加了一个水平滚动条，滚动条并不用加以过多的控制，unity已经把滚动条和scroll rect的组合使用做的很好了。其他属性的配置在官方手册中讲的很清楚。

有一个节省content性能的组件——mask：

因为我们只能看到视口下的内容，由于content可能有很多界面组成，所以我们可以采取遮罩的方式来不渲染我们看不到的东西，也就是只渲染视口，来提高效率，unity给我们提供了这样一个组件帮助我们实现这个功能：

这个组件当然要给到视口上，可以看到除了一开始在视口上的菜单界面，其余规则界面都没有渲染。

这个组件在全屏的切换时确实只能节省性能，但是在某一部分实现滑动更换界面时却可以遮住content中不应该显示的部分，很方便，也很必要。

到此，unity中可以帮我们的最大限度就到这了，现在运行会发现确实可以移动，但是到达边界是会出现瑕疵、卡动，并且滑到一半不滑了也不会自动弹回，所以我们仍需要自己编写脚本给与更好的控制。

用代码控制灵敏度、弹回速度。。。：

需要了解的：

当然少不了用到scroll rect组件对应的api：scrollrect，此外，因为要自己写代码控制滑动界面，必须要用到event事件的实现接口，这里我用的是拖拽类的ibegindraghandler, ienddraghandler。

基本的原理：

就是记录每一次开始拖拽到结束拖拽的距离，求出现在的位置，和每个界面的位置比较，显示最近的界面即可。虽然这看起来很简单，但是将交互的效果提升了1000000000000000000000000个档次。
值得注意的是，尽管在代码中注释了很多次，但是还是提一下，就是在scrollrect中有horizontalnormalizedposition属性，用来记录水平滚动位置，以 0 到 1 之间的值表示，0 表示位于左侧。所以我们在记录每个界面的位置时，应当记录每个界面的临界比例，且在0-1之间，比如一共有四页，那么第一页和第二页之间的临界应在0.333333.

代码实现：

代码中用到的api均可在scrollrect找到，不难理解。并且基本所有地方都加了注释。

一开始还在自己用移动函数和setactive去控制界面的切换，但把自己搞蒙了，搜了半天才知道还有这么好用的组件，搞了两个小时终于搞明白了，多看手册积累经验很重要！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。