CN112748843B - 页面切换方法、装置、计算机设备和存储介质 - Google Patents

Abstract

一种页面切换方法、装置、计算机设备和存储介质，方法包括：在当前界面接收页面切换指令；当前界面通过可滚动容器初始化为滚动区域；滚动区域包括一个可见区域和至少一个不可见区域，可见区域对应当前显示的第一页面，不可见区域对应待显示的第二页面；第一页面与第二页面相邻；根据页面切换指令调用对应的预设动画组件，使可滚动容器的当前位置从第一页面的对应位置变换至目标第二页面的对应位置；目标第二页面为页面切换指令对应的第二页面；将可滚动容器的当前位置重置为初始位置；读取当前界面显示的第二页面的相邻页面进行渲染。上述方法无需初始化所有页面，无论页面数量多少，均可实现较少的内存占用和开销。

Description

页面切换方法、装置、计算机设备和存储介质

技术领域

本申请涉及计算机技术领域，特别是涉及一种页面切换方法、装置、计算机设备和存储介质。

背景技术

Unreal Engine(简称UE)，中文名称虚幻引擎，广泛用于游戏设计、装修设计、虚拟现实等领域。

相关技术中，在虚幻引擎中进行页面切换，通常对所有用户交互的节点(即页面)进行初始化，然后通过对每一个用户交互节点设计两套切换的动画效果，在切换时通过调用对应动画效果的动画组件来实现页面的切换。然而随着待切换的页面的增加，需初始化的用户交互节点也增加，意味着更多的内存占用和开销。

发明内容

基于此，有必要针对上述技术问题，提供一种能够降低内存占用和开销的页面切换方法、装置、计算机设备和存储介质。

一种页面切换方法，所述方法包括：

在当前界面接收页面切换指令；所述当前界面通过可滚动容器初始化为滚动区域；所述滚动区域包括一个可见区域和至少一个不可见区域，所述可见区域对应当前显示的第一页面，所述不可见区域对应待显示的第二页面；所述第一页面与所述第二页面相邻；

根据所述页面切换指令调用对应的预设动画组件，使所述可滚动容器的当前位置从所述第一页面的对应位置变换至目标第二页面的对应位置；所述目标第二页面为所述页面切换指令对应的第二页面；

将所述可滚动容器的初始位置重置为所述当前位置；

读取当前界面显示的所述第二页面的相邻页面进行渲染。

一种页面切换装置，所述装置包括：

指令接收模块，用于在当前界面接收页面切换指令；所述当前界面通过可滚动容器初始化为滚动区域；所述滚动区域包括一个可见区域和至少一个不可见区域，所述可见区域对应当前显示的第一页面，所述不可见区域对应待显示的第二页面；所述第一页面与所述第二页面相邻；

动画组件调用模块，用于根据所述页面切换指令调用对应的预设动画组件，使所述可滚动容器的当前位置从所述第一页面的对应位置变换至目标第二页面的对应位置；所述目标第二页面为所述页面切换指令对应的第二页面；

重置模块，用于将所述可滚动容器的初始位置重置为所述当前位置；

渲染模块，用于读取当前界面显示的所述第二页面的相邻页面进行渲染。

一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

在当前界面接收页面切换指令；所述当前界面通过可滚动容器初始化为滚动区域；所述滚动区域包括一个可见区域和至少一个不可见区域，所述可见区域对应当前显示的第一页面，所述不可见区域对应待显示的第二页面；所述第一页面与所述第二页面相邻；

根据所述页面切换指令调用对应的预设动画组件，使所述可滚动容器的当前位置从所述第一页面的对应位置变换至目标第二页面的对应位置；所述目标第二页面为所述页面切换指令对应的第二页面；

将所述可滚动容器的初始位置重置为所述当前位置；

读取当前界面显示的所述第二页面的相邻页面进行渲染。

一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：

在当前界面接收页面切换指令；所述当前界面通过可滚动容器初始化为滚动区域；所述滚动区域包括一个可见区域和至少一个不可见区域，所述可见区域对应当前显示的第一页面，所述不可见区域对应待显示的第二页面；所述第一页面与所述第二页面相邻；

根据所述页面切换指令调用对应的预设动画组件，使所述可滚动容器的当前位置从所述第一页面的对应位置变换至目标第二页面的对应位置；所述目标第二页面为所述页面切换指令对应的第二页面；

将所述可滚动容器的初始位置重置为所述当前位置；

读取当前界面显示的所述第二页面的相邻页面进行渲染。

上述页面切换方法、装置、计算机设备和存储介质，当前界面通过可滚动区域初始化为滚动区域，滚动区域包括一个可见区域和至少一个不可见区域，而可见区域与当前显示的第一界面，不可见区域则对应待显示的第二界面；在当前界面接收到页面切换指令时，根据该指令调用对应的预设动画组件，使可滚动容器的当前位置从第一页面对应的位置切换到第二页面对应的位置，从而在当前显示的页面从第一页面切换至第二页面；然后将可滚动容器的当前位置重置回初始位置，并读取当前所显示的第二页面的相邻页面重新渲染，后续在第二页面的基础上可以再进行页面切换。上述方法利用可滚动容器实现动态的渲染方式，仅需初始化较少数量的页面，在切换时通过调用动画组件来切换可滚动容器的当前位置，实现页面的切换，并且本次页面切换完成之后，再将可滚动容器的当前位置进行重置和重新渲染，即可实现在相邻页面之间的切换；由于无需初始化所有页面，无论页面数量多少，均可实现较少的内存占用和开销。

附图说明

图1为一个实施例中页面切换方法的流程示意图；

图2为一个实施例中当前界面的示意图；

图3(1)所示为一个具体实施例中向左切换过程示意图；

图3(2)所示为一个具体实施例中可滚动容器的当前位置从第一页面对应位置切换至第二页面(2)对应位置的示意图；

图4为一个具体实施例中将可滚动容器的当前位置重置为第二页面对应的位置的示意图；

图5(1)为另一个实施例中当前界面的示意图；

图5(2)为一个实施例中初始化隐藏区域之后的界面示意图；

图5(3)为一个实施例中交换可见区域和隐藏区域的显隐状态之后的界面示意图；

图5(4)为一个实施例中重置可滚动容器的初始位置之后的界面示意图；

图5(5)为一个实施例中再次交换可见区域和隐藏区域的显隐状态之后的界面示意图；

图6为另一个实施例中页面切换方法的流程示意图；

图7为一个具体实施例中，在UE4引擎的蓝图中图表功能自定义事件调度器的界面示意图；

图8(1)为一个具体实施例中触摸起始事件的节点示意图；

图8(2)为一个具体实施例中触摸移动事件的节点示意图；

图8(3)为一个具体实施例中触摸结束事件的节点示意图；

图9为一个实施例中页面切换装置的结构框图；

图10为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

在一个实施例中，如图1所示，提供了一种页面切换方法，本实施例以该方法应用于终端进行举例说明，可以理解的是，该方法也可以应用于服务器，还可以应用于包括终端和服务器的系统，并通过终端和服务器的交互实现。本实施例中，该方法包括步骤S110至步骤S140。

步骤S110，在当前界面接收页面切换指令。

其中，当前界面通过可滚动容器初始化为滚动区域；滚动区域包括一个可见区域和至少一个不可见区域，可见区域对应当前显示的第一页面，不可见区域对应待显示的第二页面；第一页面与第二页面相邻。

当前界面是指用户终端当前时刻对应的界面，在本实施例中，当前界面包括可见区域和不可见区域，可见区域对应用户终端的屏幕当前显示的页面，而不可见区域则对应当前显示的页面相邻的待显示的页面。在本实施例中，将本次页面切换中，当前显示的页面记为第一页面，待显示的页面记为第二页面。如图2所示，屏幕区域内的可见区域为第一页面，不可见区域为第二页面，仅屏幕区域内的额可见区域，即第一页面展示在页面中；可滚动容器包括第一页面和第二页面。进一步地，在一个实施例中，第二页面包括第一页面的左右两个相邻页面。在另一个实施例中，第二页面包括第一页面的左右两个相邻页面(水平方向)，以及第一页面的上下两个相邻页面(竖直方向)。需要说明的是，第一页面和第二页面中的“第一”和“第二”仅为了页面的区分，并不代表任何含义。

在图2所示的示例中，是以可滚动容器的滚动方向为在屏幕的水平方向进行左右滚动来切换页面为例的；在另一个实施例中，可滚动容器也可以初始化为在屏幕的竖直方向进行上下滚动来切换页面；在其它实施例中，可滚动容器还可以初始化为在屏幕的其它方向上进行滚动。

在一个实施例中，可滚动容器为ScrollBox，可用于显示可滚动视图区域，属性包括scrollX(允许横向滚动)和scrollY(允许纵向滚动)。

界面切换指令是用户发起的，用于请求切换当前页面的指令。在一个实施例中，界面切换指令的触发为用户在可触摸屏幕中进行滑动发起；在本实施例中，可通过监测与触摸关联的事件来判断是否接收到界面切换指令。在另一个实施例中，界面切换指令的触发为用户通过鼠标等控制零件控制鼠标光标滑动发起；在本实施例中，可通过监测是否检测到与鼠标点击关联的事件来判断是否接收到界面切换指令。在另一个实施例中，界面切换指令的触发还可以是用户通过点击界面上的界面切换控件来实现的；在本实施例中，若基于界面切换控件接收到界面切换指令，则进入后续步骤。在另一个实施例中，界面切换指令还可以是接收用户通过遥控装置发送的；在本实施例中，若接收到遥控装置的接麦呢切换指令，则进入后续步骤。在其它实施例中，界面切换指令的触发也可以是通过其它方式实现。

步骤S120，根据页面切换指令调用对应的预设动画组件，使可滚动容器的当前位置从第一页面的对应位置变换至目标第二页面的对应位置；目标第二页面为页面切换指令对应的第二页面。

动画组件用于控制动画的播放。在一个具体实施例中，动画组件为animation，可以以动画方式驱动所在节点和子节点上的节点和组件属性，包括用户自定义脚本的属性。在一个实施例中，对于当前界面的可见区域内显示的第一页面，预先制作了在滚动方向上的动画效果，通过预设动画组件实现这一动画效果；因此在接收到页面切换指令时，通过调用预设动画组件展示动画效果。

进一步地，在一个实施例中，在滚动方向上为第一页面制作了两个方向的动画效果，如水平方向上包括向左切换的动画效果和向右切换的动画效果；在本实施例中，在接收到页面切换指令时，首先确定页面切换指令对应的切换方向，然后调用该切换方向对应的动画组件，以实现在界面切换指令对应的切换效果，也就是说将可滚动容器的当前位置从第一页面对应位置切换至目标第二页面对应的位置。可滚动容器的当前位置即屏幕中显示页面对应的位置，如当前显示的为第一页面，则可滚动容器的当前位置与第一页面的位置对应。

在本实施例中，对于用户而言，即是屏幕内显示的内容从第一页面切换至显示第二页面；进一步地，在第二页面包括两个以上的实施例中，屏幕内显示的内容从第一页面切换至界面切换指令对应的第二页面中，即目标第二页面。

以图2所示，假设当前显示的第一页面的前一页面记为第二页面(1)，第一页面的后一页面记为第二页面(2)，当确定界面切换指令对应的切换方向为向左(向第二页面(2))进行切换，调用向左切换对应的动画组件，将可滚动容器的当前位置从第一页面对应位置切换至第二页面(2)对应位置，如图3(1)所示为一个具体实施例中向左切换过程示意图，图3(2)所示为本次切换完成，可滚动容器的当前位置从第一页面对应位置切换至第二页面(2)对应位置的示意图。

步骤S130，将可滚动容器的初始位置重置为当前位置。

可滚动容器在初始位置的基础上进行滚动，以实现页面切换。重置可滚动容器的初始位置，在本实施例中是将可滚动容器的初始位置重置为当前显示的第二页面对应的位置，下一次切换从第二页面对应的位置的基础上进行切换。在一个具体实施例中，如图4所示，将可滚动容器的当前位置重置为第二页面对应的位置的示意图。

步骤S140，读取当前界面显示的第二页面的相邻页面进行渲染。

在可滚动容器的初始位置重置之后，当前初始位置对应的页面为第二页面，因此需要加载第二页面的相邻页面重新进行渲染。如图4所示，加载第二页面(2)的两个相邻页面：第一页面和第三页面进行渲染。其中，加载页面进行渲染可以通过任意一种方式实现。

上述页面切换方法，当前界面通过可滚动区域初始化为滚动区域，滚动区域包括一个可见区域和至少一个不可见区域，而可见区域与当前显示的第一界面，不可见区域则对应待显示的第二界面；在当前界面接收到页面切换指令时，根据该指令调用对应的预设动画组件，使可滚动容器的当前位置从第一页面对应的位置切换到第二页面对应的位置，从而在当前显示的页面从第一页面切换至第二页面；然后将可滚动容器的当前位置重置回初始位置，并读取当前所显示的第二页面的相邻页面重新渲染，后续在第二页面的基础上可以再进行页面切换。上述方法利用可滚动容器实现动态的渲染方式，仅需初始化较少数量的页面，在切换时通过调用动画组件来切换可滚动容器的当前位置，实现页面的切换，并且本次页面切换完成之后，再将可滚动容器的当前位置进行重置和重新渲染，即可实现在相邻页面之间的切换；由于无需初始化所有页面，无论页面数量多少，均可实现较少的内存占用和开销。

在一个实施例中，如图5(1)所示，当前界面还包括与可见区域的位置对应的隐藏区域。

可以理解地，隐藏区域在屏幕内被隐藏，即隐藏区域内的页面内容在界面中不可见；进一步地，在一个实施例中，隐藏区域的位置与可滚动容器中的可见区域的位置相同；可以理解地，即可见区域与隐藏区域对应的位置相同，但在屏幕内仅显示可见区域，隐藏区域对于用户而言不可见。在一个实施例中，可通过为可见区域和隐藏区域设置显隐状态来实现可见区域与隐藏区域位置相同，仅显示可见区域的页面内容；例如将可见区域的位置设置为覆盖在隐藏区域上方，可见区域的显隐状态为显示，隐藏区域的显隐状态为隐藏。在另一个实施例中，隐藏区域也可以设置在其他区域，如设置在当前显示的第一页面对应位置的上方或者下方等等。

在本实施例中，如图6所示，在根据页面切换指令调用对应的预设动画组件，使可滚动容器的当前位置从第一页面的对应位置变换至目标第二页面的对应位置之后，在读取当前界面显示的第二页面的相邻页面进行渲染之前，还包括步骤S610和步骤S620。其中：

步骤S610，将隐藏区域初始化为当前界面显示的第二页面。

在一个实施例中，隐藏区域初始为第二页面，即是将第二页面的内容在隐藏区域显示，但由于隐藏区域的显隐状态仍为隐藏，因此在用户的角度而言，隐藏区域的第二页面内容不可见。如图5(2)所示，可知，当前可见区域和隐藏区域中的页面均为第二页面(2)。

步骤S620，交换当前界面的可见区域与隐藏区域的显隐状态。

显隐状态表示区域中的页面内容在屏幕中是否可见，显隐状态为显示表示用户在屏幕中可以看见，显隐状态为隐藏则用户在屏幕内不可看见该区域。可以理解地，在本实施例中，可见区域的显隐状态为显示，隐藏区域的显隐状态为隐藏(即不显示)；交换可见区域和隐藏区域的显隐状态，即将可见区域的显隐状态调整为隐藏，将隐藏区域的显隐状态调整为显示。在一个实施例中，步骤S610和步骤S620可以在步骤S130之前，也可以在步骤S130之后进行。

在一个实施例中，将交换显隐状态之后的原隐藏区域记为临时可见区域，将交换显隐状态之后的原可见区域记为临时隐藏区域。在一个具体实施例中，以图5(2)所示的示例，交换当前界面的可见区域和隐藏区域的显隐状态，得到如图5(3)所示的示意图。可以理解地，本实施例中步骤S610和步骤S620在步骤S130之前进行。进一步地，在本实施例中，执行步骤S130，重置可滚动容器的初始位置之后，得到如图5(4)所示的界面示意图。

需要说明的是，在一个实施例中，交换可见区域和隐藏区域的显隐状态，也即是交换滚动区域与隐藏区域的显隐状态。

进一步地，在一个实施例中，请继续参照图6，在读取当前界面显示的第二页面的相邻页面进行渲染之后，还包括步骤S630：再次交换当前界面的可见区域与隐藏区域的显隐状态。如图5(5)所示为再次交换可见区域和隐藏区域的显隐状态之后的界面示意图。

由上述步骤S610和S620可知，在本实施例中，当前界面显示的第二页面为原隐藏区域(临时可见区域)，而滚动区域的原可见区域的第二页面的显隐状态为隐藏状态；此时对于滚动区域内的可见区域和不可见区域加载第二页面的相邻页面进行渲染，并在渲染结束之后再次交换当前可见区域和隐藏区域的显隐状态，即再次将滚动区域中的部分区域(第二页面对应显示区域)交换至可见区域。如此，滚动区域内的页面内容进行重新加载和渲染，并进行切换时，处于不可见或者隐藏状态，可以避免由动态渲染切换时带来的屏幕闪烁问题，对于用户而言，可实现顺畅的页面切换。

在一个实施例中，根据页面切换指令调用对应的预设动画组件，包括：根据页面切换指令确定对应的切换方向；调用切换方向对应的预设动画组件。

在一个实施例中，以界面切换指令是用户通过在可触摸的屏幕上进行滑动来实现为例，在本实施例中，通过在当前界面监测触摸关联的事件来判断是否接收到页面切换指令。在一个实施例中，在当前界面监测到与页面切换关联的预设事件发生时，判定在当前界面接收到页面切换指令。

在一个实施例中，与页面切换关联的预设事件包括：触摸起始事件、触摸移动事件和触摸结束事件。

触摸起始事件(touchstart)：手指触摸到一个DOM(Document Object Model，文档对象模型)元素时触发。触摸移动事件(touchmove)：手指在一个DOM元素上滑动时触发。触摸结束事件(touchend)：手指从一个DOM元素上移开时触发。在一个实施例中，在当前界面依次监测到触摸起始事件、触摸移动事件和触摸结束事件时，判定接收到界面切换指令。

进一步地，在监测到触摸开始事件、触摸移动事件或者触摸结束事件时，还可获取该事件对应的触摸的对象的位置，根据触摸开始事件对应的对象位置和触摸结束事件对应的对象位置可以确定界面切换指令对应的切换方向。

在一个实施例中，根据页面切换指令确定对应的切换方向，包括：在当前界面监测到触摸起始事件时，确定触摸起始事件的第一对象，读取第一对象的位置；在当前界面监测到触摸结束事件时，确定触摸结束事件的第二对象，读取第二对象的位置；根据第一对象的位置和第二对象的位置确定页面切换指令对应的切换方向。

其中，读取第一对象的位置和读取第二对象的位置，包括确定第一对象或者第二对象在当前界面中所在点，读取该点对应的横坐标和纵坐标，即为第一对象或第二对象的位置。

在一个具体实施例中，切换方向包括水平方向的向左切换和向右切换，以及竖直方向的向上切换和向下切换。进一步地，在一个实施例中，根据第一对象的位置和第二对象的位置确定页面切换指令对应的切换方向，包括：根据第一对象与第二对象的横坐标差值，第一对象和第二对象的纵坐标差值，确定页面切换指令对应的切换方向。

在一个具体实施例中，若第一对象与第二对象的横坐标差值大于零，则表示切换方向包括向右切换，若第一对象与第二对象的横坐标差值小于零，则表示切换方向包括向左切换。在另一个具体实施例中，若第一对象与第二对象的纵坐标差值大于零，则表示切换方向包括向下切换，若第一对象与第二对象的纵坐标差值小于，则表示切换方向包括向上切换。进一步地，可以根据可滚动容器的属性确定切换方向是水平方向还是竖直方向，若可滚动容器的属性为允许横向滚动，则仅根据第一对象和第二对象的横坐标确定水平方向上的切换方向若可滚动区域的属性为允许纵向滚动，则仅根据第一对象和第二对象的纵坐标差值确定竖直方向上的切换方向。可以理解地，在其他实施例中，切换方向还可以包括其他方向。

本实施例中，通过监测触摸事件确定界面切换指令对应的切换方向，后续根据切换方向调用动画组件来实现相应的页面切换。

在另一个实施例中，以界面切换指令是用户通过鼠标在屏幕上进行滑动来实现为例，在本实施例中，通过在当前界面监测与鼠标点击关联的事件来判断是否接收到界面切换指令。在一个实施例中，在当前界面中监测到与鼠标点击关联的预设事件发生时，判定在当前界面接收到页面切换指令。进一步地，同样可通过点击开始对应的对象位置和点击结束对应的对象位置，确定切换指令对应的切换方向，在此不再赘述。

在另一个实施例中，以界面切换指令是用户通过点击屏幕中的界面切换控件，或者通过遥控装置发送为例，在本实施例中，在基于界面切换控件接收到界面切换指令，或者接收到遥控装置发送的界面切换指令时，可直接根据该界面切换指令确定对应的切换方向。当用户通过点击界面切换控件或者遥控装置发送界面切换指令时，这一界面切换指令必定携带了切换方向的信息，经过分析界面切换指令即可得到对应的切换方向。

进一步地，在一个实施例中，上述页面切换方法应用于UE(Unreal Engine，虚幻引擎)中，在UE引擎中的蓝图中触摸关联的事件，通过Lua语言(一种轻量脚本语言)与蓝图通信，实现在当前界面监测与触摸关联的事件，并在监测到对应事件时，执行相应步骤。

在一个具体实施例中，上述页面切换方法应用于UE4(虚拟引擎4)中；在当前界面监测与触摸关联的事件之前，还包括：在UE4引擎的蓝图的图表功能中，新建3个事件调度器；在UE4引擎的蓝图的图表功能下，新建3个自定义事件的函数，分别覆盖蓝图的图表功能中对应的3个原始事件。

其中3个事件调度器包括：触摸开始事件调度器(OnTouchStartedDispatcher)、触摸移动事件调度器(OnTouchMovedDispatcher)和触摸结束事件调度器(OnTouchEndedDispatcher)，分别对应3个自定义事件：触摸开始事件、触摸移动事件和触摸结束事件。进一步地，事件调度器接收的参数包括当前触摸的对象位置。如图7所示为一个具体实施例中，在UE4引擎的蓝图中图表功能自定义事件调度器的界面示意图。

在一个具体实施例中，触摸开始事件的逻辑如下：

a.InTouchEvent:输入的触摸事件对象；

b.GetScreenSpacePosition:获取触摸屏幕当前位置；

c.BreakVector2D:将位置拆解为X,Y坐标类型；

d.调用OnTouchStartedDispatcher:调用事件调度器，并传入获取到的X坐标；

e.返回节点:Handled表示蓝图已经处理了该事件。

如图8(1)、8(2)和8(3)，分别为一个具体实施例中自定义的触摸起始事件、触摸移动事件和触摸结束事件的节点示意图。其中的触摸移动事件和触摸结束事件的逻辑与触摸开始事件类似，在此不再赘述。

进一步地，在一个具体实施例中，通过Lua监听蓝图自定义事件，实现蓝图与Lua的数据通信；相关伪代码如下：

self:AddDelegateEvent(self.widget.OnTouchStartedDispatcher,function(posX)；新增触摸起始事件调度器；

--OnTouchStarted处理

end)

self:AddDelegateEvent(self.widget.OnTouchMovedDispatcher,function(posX)；新增触摸移动事件调度器；

--OnTouchMoved处理

end)

self:AddDelegateEvent(self.widget.OnTouchEndedDispatcher,function(posX)；新增触摸结束事件调度器；

--OnTouchEnded处理

end)

上述实施例中，在UE4引擎中通过重写蓝图的OntouchStarted、OnTouchMoved、OnTouchEnded 3个函数，捕获手指在3个事件中的横坐标位置posX，然后将触摸对象的横坐标传入对应的自定义事件，现蓝图与Lua的数据交互，Lua语言相对简单，开发难度低。

本申请还提供一种应用场景，该应用场景应用上述的页面切换方法。具体地，该页面切换方法在该应用场景的应用在UE4引擎，且应用于在具备触摸屏幕的终端中，步骤如下：

预先在UE4引擎编辑器的蓝图的图表功能中自定义触摸起始事件、触摸移动事件和触摸结束事件，三个自定义事件的逻辑参照图8(1)、8(2)和8(3)所示；预先在UE4引擎编辑器的蓝图的图表功能中自定义触摸起始事件调度器、触摸移动事件调度器和触摸结束事件调度器，该三个自定义事件调度器分别接收触摸起始事件、触摸移动事件和触摸结束事件中触摸对象的横坐标位置posX，实现Lua语言与UE4引擎的蓝图之间的通信。

通过可滚动容器scrollbox将当前界面初始化为滚动区域和隐藏区域，其中，滚动区域包括可见区域和不可见区域，可见区域在屏幕内可见，不可见区域在屏幕内不可见。进一步地，可见区域中包含的页面数据即为当前显示的页面，而不可见区域中包含的页面数据为与当前显示的页面相邻的页面数据。在本实施例中，以不可见区域包括两个，可滚动区域的属性为允许横向滚动为例，假设当前可见区域内显示的页面为第一页为例，两个不可见区域分别对应第一页的上一页(最后一页)，和第一页的下一页(第二页)。而隐藏区域的位置与滚动区域中可见区域的位置对应。针对滚动区域预先通过动画组件制作了两套动画效果，包括向左切换的动画效果和向右切换的动画效果；其中，向左切换的动画效果对应的操作为将可滚动容器的当前位置移动至右方页面对应位置，使当前界面显示的页面从当前页面切换至显示右方页面，如从显示第一页切换至显示第二页。

在当前界面监测是否发生触摸起始事件、触摸移动事件和触摸结束事件；若依次监测到触摸起始事件、触摸移动事件和触摸结束事件，判定接收到界面切换指令。通过根据触摸起始事件和触摸结束事件中触摸对象的位置确定界面切换指令的切换方向。

1、滑动开始流程

若确定界面切换指令对应的切换方向为向左切换(由第一页切换到第二页)，Lua调用向左切换的动画组件Animation，将可滚动容器的当前位置从第一页对应位置切换至第二页对应位置，同时将隐藏区域初始化为第二页。

2、滑动结束流程

滑动效果结束时，滚动区域中的可见区域中对应显示的是第二页的内容；此时，将滚动区域中的可见区域与隐藏区域的显隐状态进行交换，即将隐藏区域转换为临时可见区域，将可见区域转换为临时隐藏区域。

3、重置滑动位置

将滚动区域的初始位置重置为当前可见区域对应的位置，即第二页对应位置，重新渲染滚动区域内的每个节点为下一页的内容；重新渲染之后，滚动区域内的三个页面从左至右分别为第一页、第二页和第三页。

4、滑动完成

再次将隐藏区域和滚动区域内的可见区域交换显隐状态，即将上述临时隐藏区域转换为可见区域，将上述临时可见区域转换为隐藏区域。至此本次向左切换流程全部结束。后续在第二页的基础上进行滑动切换时，重复上述流程即可。

上述实施例中的页面切换方法，通用性高，可以扩展到适用于几乎所有滑动切换的场景；由于仅需制作两个动画效果，内存消耗低，只需初始化固定数量用户交互节点(UI节点)，并使用更简单的Lua语言进行界面动态渲染，在数据较多的情况下,制作成本明显降低,同时极大的节省了内存占用以及渲染开销，解决了目前基于UE4引擎开发的游戏最大痛点之一：内存占用；而且，利用隐藏区域显示页面内容，在动态渲染的过程中避免动态渲染带来的屏幕闪烁，使滑动进行页面切换时，滑动效果平滑顺畅，用户体验好。

本申请还提供一种应用场景，该应用场景中将上述的页面切换方法应用于电脑等终端中通过鼠标点击移动实现页面切换；在其他实施例中，上述页面切换还包括用户通过其他方式发起页面切换指令的应用场景中。

应该理解的是，虽然上述流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，上述流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

在一个实施例中，如图9所示，提供了一种页面切换装置，该装置可以采用软件模块或硬件模块，或者是二者的结合成为计算机设备的一部分，该装置具体包括：指令接收模块910、动画组件调用模块920、重置模块930和渲染模块940，其中：

指令接收模块910，用于在当前界面接收页面切换指令；当前界面通过可滚动容器初始化为滚动区域；滚动区域包括一个可见区域和至少一个不可见区域，可见区域对应当前显示的第一页面，不可见区域对应待显示的第二页面；第一页面与第二页面相邻；

动画组件调用模块920，用于根据页面切换指令调用对应的预设动画组件，使可滚动容器的当前位置从第一页面的对应位置变换至目标第二页面的对应位置；目标第二页面为页面切换指令对应的第二页面；

重置模块930，用于将可滚动容器的初始位置重置为当前位置；

渲染模块940，用于读取当前界面显示的第二页面的相邻页面进行渲染。

上述页面切换装置，当前界面通过可滚动区域初始化为滚动区域，滚动区域包括一个可见区域和至少一个不可见区域，而可见区域与当前显示的第一界面，不可见区域则对应待显示的第二界面；在当前界面接收到页面切换指令时，根据该指令调用对应的预设动画组件，使可滚动容器的当前位置从第一页面对应的位置切换到第二页面对应的位置，从而在当前显示的页面从第一页面切换至第二页面；然后将可滚动容器的当前位置重置回初始位置，并读取当前所显示的第二页面的相邻页面重新渲染，后续在第二页面的基础上可以再进行页面切换。上述装置利用可滚动容器实现动态的渲染方式，仅需初始化较少数量的页面，在切换时通过调用动画组件来切换可滚动容器的当前位置，实现页面的切换，并且本次页面切换完成之后，再将可滚动容器的当前位置进行重置和重新渲染，即可实现在相邻页面之间的切换；由于无需初始化所有页面，无论页面数量多少，均可实现较少的内存占用和开销。

在一个实施例中，当前界面还包括与可见区域的位置对应的隐藏区域；上述装置还包括：隐藏区域初始化模块，用于将隐藏区域初始化为当前界面显示的第二页面；显隐状态交换模块，用于交换当前界面的可见区域与隐藏区域的显隐状态。

进一步地，上述装置的显隐状态交换模块还用于：再次交换当前界面的可见区域与隐藏区域的显隐状态。

在一个实施例中，上述装置的动画组件调用模块920包括：切换方向确定单元，用于根据页面切换指令确定对应的切换方向；动画组件调用模块920具体用于调用切换方向对应的预设动画组件。

在一个实施例中，上述装置的指令接收模块910在当前界面监测到与页面切换关联的预设事件发生时，判定在当前界面接收到页面切换指令。

在一个实施例中，与页面切换关联的预设事件包括：触摸起始事件、触摸移动事件和触摸结束事件。

在一个实施例中，上述装置的切换方向确定单元包括：触摸起始位置读取子单元，用于在当前界面监测到触摸起始事件时，确定触摸起始事件的第一对象，读取第一对象的位置；触摸结束位置读取子单元，用于在当前界面监测到触摸结束事件时，确定触摸结束事件的第二对象，读取第二对象的位置；上述切换方向确定单元还用于根据第一对象的位置和第二对象的位置确定页面切换指令对应的切换方向。

关于页面切换装置的具体限定可以参见上文中对于页面切换方法的限定，在此不再赘述。上述页面切换装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图10所示。该计算机设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、运营商网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种页面切换方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图10中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，还提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各方法实施例中的步骤。

在一个实施例中，提供了一种计算机可读存储介质，存储有计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。

在一个实施例中，提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述各方法实施例中的步骤。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory，ROM)、磁带、软盘、闪存或光存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic Random Access Memory，DRAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (14)

1.一种页面切换方法，其特征在于，所述方法包括：

在当前界面接收页面切换指令；所述当前界面通过可滚动容器初始化为滚动区域；所述滚动区域包括一个可见区域和至少一个不可见区域，所述可见区域对应当前显示的第一页面，所述不可见区域对应待显示的第二页面；所述第一页面与所述第二页面相邻，所述当前界面还包括与所述可见区域的位置对应的隐藏区域；

根据所述页面切换指令调用对应的预设动画组件，使所述可滚动容器的当前位置从所述第一页面的对应位置变换至目标第二页面的对应位置；所述目标第二页面为所述页面切换指令对应的第二页面；

将所述可滚动容器的初始位置重置为所述当前位置；

读取当前界面显示的所述第二页面的相邻页面进行渲染；

再次交换当前界面的所述可见区域与所述隐藏区域的显隐状态；

在根据所述页面切换指令调用对应的预设动画组件，使所述可滚动容器的当前位置从所述第一页面的对应位置变换至目标第二页面的对应位置之后，在读取当前界面显示的所述第二页面的相邻页面进行渲染之前，还包括：

将所述隐藏区域初始化为所述当前界面显示的第二页面；

交换当前界面的所述可见区域与所述隐藏区域的显隐状态。

2.根据权利要求1所述的页面切换方法，其特征在于，所述根据所述页面切换指令调用对应的预设动画组件，包括：

根据所述页面切换指令确定对应的切换方向；

调用所述切换方向对应的预设动画组件。

3.根据权利要求1所述的页面切换方法，其特征在于，在当前界面监测到与页面切换关联的预设事件发生时，判定在当前界面接收到页面切换指令。

4.根据权利要求3所述的页面切换方法，其特征在于，所述与页面切换关联的预设事件包括：触摸起始事件、触摸移动事件和触摸结束事件。

5.根据权利要求4所述的页面切换方法，其特征在于，根据所述页面切换指令确定对应的切换方向，包括：

在所述当前界面监测到所述触摸起始事件时，确定所述触摸起始事件的第一对象，读取所述第一对象的位置；

在所述当前界面监测到所述触摸结束事件时，确定所述触摸结束事件的第二对象，读取所述第二对象的位置；

根据所述第一对象的位置和第二对象的位置确定所述页面切换指令对应的切换方向。

6.根据权利要求5所述的页面切换方法，其特征在于，所述根据第一对象的位置和第二对象的位置确定页面切换指令对应的切换方向，包括：根据第一对象与第二对象的横坐标差值，第一对象和第二对象的纵坐标差值，确定页面切换指令对应的切换方向。

7.一种页面切换装置，其特征在于，所述装置包括：

指令接收模块，用于在当前界面接收页面切换指令；所述当前界面通过可滚动容器初始化为滚动区域；所述滚动区域包括一个可见区域和至少一个不可见区域，所述可见区域对应当前显示的第一页面，所述不可见区域对应待显示的第二页面；所述第一页面与所述第二页面相邻，所述当前界面还包括与所述可见区域的位置对应的隐藏区域；

动画组件调用模块，用于根据所述页面切换指令调用对应的预设动画组件，使所述可滚动容器的当前位置从所述第一页面的对应位置变换至目标第二页面的对应位置；所述目标第二页面为所述页面切换指令对应的第二页面；

重置模块，用于将所述可滚动容器的初始位置重置为所述当前位置；

隐藏区域初始化模块，用于将隐藏区域初始化为当前界面显示的第二页面；显隐状态交换模块，用于交换当前界面的可见区域与隐藏区域的显隐状态；

渲染模块，用于读取当前界面显示的所述第二页面的相邻页面进行渲染；

所述显隐状态交换模块还用于再次交换当前界面的可见区域与隐藏区域的显隐状态。

8.根据权利要求7所述的页面切换装置，其特征在于，动画组件调用模块包括：切换方向确定单元，用于根据页面切换指令确定对应的切换方向；动画组件调用模块具体用于调用切换方向对应的预设动画组件。

9.根据权利要求7所述的页面切换装置，其特征在于，指令接收模块在当前界面监测到与页面切换关联的预设事件发生时，判定在当前界面接收到页面切换指令。

10.根据权利要求9所述的页面切换装置，其特征在于，所述与页面切换关联的预设事件包括：触摸起始事件、触摸移动事件和触摸结束事件。

11.根据权利要求10所述的页面切换装置，其特征在于，动画组件调用模块包括切换方向确定单元，切换方向确定单元包括触摸起始位置读取子单元，用于在当前界面监测到触摸起始事件时，确定触摸起始事件的第一对象，读取第一对象的位置；触摸结束位置读取子单元，用于在当前界面监测到触摸结束事件时，确定触摸结束事件的第二对象，读取第二对象的位置；上述切换方向确定单元还用于根据第一对象的位置和第二对象的位置确定页面切换指令对应的切换方向。

12.根据权利要求11所述的页面切换装置，其特征在于，触摸起始位置读取子单元，用于根据第一对象与第二对象的横坐标差值，第一对象和第二对象的纵坐标差值，确定页面切换指令对应的切换方向。

13.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至6中任一项所述的方法的步骤。

14.一种计算机可读存储介质，存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至6中任一项所述的方法的步骤。

Images