CN118142156A - 页面交互的显示控制方法、装置和电子设备 - Google Patents

Abstract

本发明提供了一种页面交互的显示控制方法、装置和电子设备；其中，该方法包括：响应于指定页面的显示触发事件，获取指定页面的控件交互层和背景层；其中，控件交互层用于：提供至少一个交互控件；背景层用于显示预设背景内容；在图形用户界面中显示控件交互层和背景层；其中，控件交互层显示在背景层之上；从控件交互层中确定被选中的目标交互控件，获取目标交互控件对应的第一显示控制信息；第一显示控制信息用于：控制显示目标交互控件对应的第一光影效果；第一光影效果与目标交互控件的显示格式相匹配；基于第一显示控制信息生成第一光影效果，将第一光影效果显示在背景内容之上。该方式提高了交互反馈信息的丰富程度，提高了用户的交互体验。

Description

页面交互的显示控制方法、装置和电子设备

技术领域

本发明涉及系统界面技术领域，尤其是涉及一种页面交互的显示控制方法、装置和电子设备。

背景技术

在游戏系统或者其他交互系统中，常需要设置以交互控件为主的交互界面。在交互界面中，除交互控件以外，通常还显示有界面背景、界面主要角色等元素。用户在交互界面点击某一交互控件，该交互控件显示为被选中状态，进而触发相应的功能。这种人机交互方式中，用户执行交互操作后，提供给用户的反馈信息较为单一，用户交互体验较差。

发明内容

有鉴于此，本发明的目的在于提供一种页面交互的显示控制方法、装置和电子设备，以在界面上显示交互控件对应的光影效果，使得界面中针对用户的交互操作提供光影变化反馈，提高交互反馈信息的丰富程度，提高用户的交互体验。

第一方面，本发明实施例提供了一种页面交互的显示控制方法，通过终端设备提供一图形用户界面，该方法包括：响应于指定页面的显示触发事件，获取指定页面的控件交互层和背景层；其中，控件交互层用于：提供至少一个交互控件；背景层用于显示预设背景内容；在图形用户界面中显示控件交互层和背景层；其中，控件交互层显示在背景层之上；从控件交互层中确定被选中的目标交互控件，获取目标交互控件对应的第一显示控制信息；第一显示控制信息用于：控制显示目标交互控件对应的第一光影效果；第一光影效果与目标交互控件的显示格式相匹配；基于第一显示控制信息生成第一光影效果，将第一光影效果显示在背景内容之上。

第二方面，本发明实施例提供了一种页面交互的显示控制装置，通过终端设备提供一图形用户界面，装置包括：第一获取模块，用于响应于指定页面的显示触发事件，获取指定页面的控件交互层和背景层；其中，控件交互层用于：提供至少一个交互控件；背景层用于显示预设背景内容；第一显示模块，用于在图形用户界面中显示控件交互层和背景层；其中，控件交互层显示在背景层之上；第二获取模块，用于从控件交互层中确定被选中的目标交互控件，获取目标交互控件对应的第一显示控制信息；第一显示控制信息用于：控制显示目标交互控件对应的第一光影效果；第二显示模块，用于基于第一显示控制信息生成第一光影效果，将第一光影效果显示在背景内容之上。

本发明实施例带来了以下有益效果：

上述页面交互的显示控制方法、装置和电子设备，响应于指定页面的显示触发事件，获取指定页面的控件交互层和背景层；其中，控件交互层用于：提供至少一个交互控件；背景层用于显示预设背景内容；在图形用户界面中显示控件交互层和背景层；其中，控件交互层显示在背景层之上；从控件交互层中确定被选中的目标交互控件，获取目标交互控件对应的第一显示控制信息；第一显示控制信息用于：控制显示目标交互控件对应的第一光影效果；第一光影效果与目标交互控件的显示格式相匹配；基于第一显示控制信息生成第一光影效果，将第一光影效果显示在背景内容之上。该方式中，用户通过交互控件执行交互操作时，界面上显示交互控件对应的光影效果，使得界面中针对用户的交互操作提供光影变化反馈，提高了交互反馈信息的丰富程度，提高了用户的交互体验。

本发明的其他特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种页面交互的显示控制方法的流程图；

图2为本发明实施例提供的第一种没有添加第一光影效果的界面效果图；

图3为本发明实施例提供的第一种添加第一光影效果的界面效果图；

图4为本发明实施例提供的第二种没有添加第一光影效果的界面效果图；

图5为本发明实施例提供的第二种添加第一光影效果的界面效果图；

图6为本发明实施例提供的一种添加第二光影效果的界面效果图；

图7为本发明实施例提供的一种指定页面中多个显示层的分布示意图；

图8为本发明实施例提供的一种页面交互的显示控制装置的结构示意图；

图9为本发明实施例提供的一种电子设备的示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合附图对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

相关技术中的人机交互方式中，用户执行交互操作后，提供给用户的反馈信息较为单一，用户交互体验较差。基于此，本发明实施例提供的一种页面交互的显示控制方法、装置和电子设备，该技术可以应用于游戏系统或者其他交互系统中，例如，通过虚拟控件实现人机交互的系统界面。

在本公开其中一种实施例中的页面交互的显示控制方法可以运行于本地终端设备或者是服务器。当页面交互的显示控制方法运行于服务器时，该方法则可以基于云交互系统来实现与执行，其中，云交互系统包括服务器和客户端设备。

在一可选的实施方式中，云交互系统下可以运行各种云应用，例如：云游戏。以云游戏为例，云游戏是指以云计算为基础的游戏方式。在云游戏的运行模式下，游戏程序的运行主体和游戏画面呈现主体是分离的，页面交互的显示控制方法的储存与运行是在云游戏服务器上完成的，客户端设备的作用用于数据的接收、发送以及游戏画面的呈现，举例而言，客户端设备可以是靠近用户侧的具有数据传输功能的显示设备，如，移动终端、电视机、计算机、掌上电脑等；但是进行信息处理的为云端的云游戏服务器。在进行游戏时，玩家操作客户端设备向云游戏服务器发送操作指令，云游戏服务器根据操作指令运行游戏，将游戏画面等数据进行编码压缩，通过网络返回客户端设备，最后，通过客户端设备进行解码并输出游戏画面。

在一可选的实施方式中，以游戏为例，本地终端设备存储有游戏程序并用于呈现游戏画面。本地终端设备用于通过图形用户界面与玩家进行交互，即，常规的通过电子设备下载安装游戏程序并运行。该本地终端设备将图形用户界面提供给玩家的方式可以包括多种，例如，可以渲染显示在终端的显示屏上，或者，通过全息投影提供给玩家。举例而言，本地终端设备可以包括显示屏和处理器，该显示屏用于呈现图形用户界面，该图形用户界面包括游戏画面，该处理器用于运行该游戏、生成图形用户界面以及控制图形用户界面在显示屏上的显示。

在一种可能的实施方式中，本发明实施例提供了一种页面交互的显示控制方法，通过终端设备提供一图形用户界面，其中，该终端设备可以是前述提到的本地终端设备，也可以是前述提到的云交互系统中的客户端设备。

如图1所示，该页面交互的显示控制方法，通过终端设备提供一图形用户界面，该图形用户界面可以由当前运行的交互系统提供，图形用户界面用于显示该交互系统内的各个页面；该交互系统可以为游戏系统，也可以为通信、购物等系统；该方法包括如下步骤：

步骤S102，响应于指定页面的显示触发事件，获取指定页面的控件交互层和背景层；其中，该控件交互层用于：提供至少一个交互控件；背景层用于显示预设背景内容；

可以理解的是，指定页面可以为前述交互系统中的页面，如果该指定页面为交互系统的主页面，则指定页面的显示触发事件可以为交互系统的启动事件；另外，该显示触发事件也可以为该指定页面对应的控件触发事件，或者系统状态满足该指定页面预设的触发条件。显示触发事件发生后，需要在图形用户界面中显示指定页面，基于此，需要获取指定页面的相关页面数据。

具体的，本实施例中需要获取指定页面的空间交互层和背景层的相关数据。其中，控件交互层中包括该指定页面预设的至少一个交互控件，该控件交互层提供了每个交互控件的交互触发区域，交互触发区域的区域形状和大小通常与交互控件本身的形状和大小相同；控件交互层还提供了每个交互控件的控件显示格式，包括控件的颜色、图案、亮度等格式信息。

上述背景层中提供了预设背景内容，该背景内容可以为预设的背景颜色，也可以为背景图案等。背景层和控件交互层可以理解为指定页面中的显示图层，不同的显示图层用户显示不同的内容。另外，除了控件交互层和背景层以外，根据指定页面的内容需求，指定页面中还可以包括角色层，该角色层中包括预设的角色形象、例如，人物角色、虚拟角色、游戏角色、动物角色等各类角色形象。通常，角色层显示在背景层之上，角色形象会遮挡部分背景内容。角色层可以显示在交互控件层之下，此时，控件交互层中的部分控件可能会遮挡角色形象；当前，角色层也可以显示在交互控件层之上。

步骤S104，在图形用户界面中显示控件交互层和背景层；其中，该控件交互层显示在背景层之上；

获取到指定页面的控件交互层和背景层之后，就可以在图形用户界面中显示控件交互层和背景层的相关内容。在实际实现时，背景层显示在最低层；控件交互层显示在背景层之上。需要说明的是，控件交互层中，分布有一个或多个交互控件；在交互控件以外的区域，可以以一定的透明度进行显示，当控件交互层显示在背景层之上时，交互控件以外的区域可以显示出背景层中的背景内容。另外，控件交互层中还可以设置一些装饰性的元素，例如，小三角形、小星星，这些元素可以通过图片资源的形式设置在控件交互层；这些装饰性的元素也可以按照预设的路径和速度在控件交互层中移动，以具有一定的动态效果。

步骤S106，从控件交互层中确定被选中的目标交互控件，获取目标交互控件对应的第一显示控制信息；该第一显示控制信息用于：控制显示目标交互控件对应的第一光影效果；第一光影效果与目标交互控件的显示格式相匹配；

上述指定页面预设设置有默认选中的交互控件，此时，当指定页面刚开始显示时，默认选中的交互控件即上述目标交互控件；该目标交互控件还可以为用户通过触控操作选中的交互控件。随着用户的操作，目标交互控件可以不断变化。

本实施例旨在，跟随被选中的目标交互控件，在页面中显示对应的光影效果。在交互控件层中，每个交互控件可以预先设置第一显示控制信息，当被选中时，该交互控件作为目标交互控件，然后获取该目标交互控件的第一显示控制信息。该第一显示控制信息可以包括：用于控制第一光影效果的显示区域大小、显示区域形状、显示区域位置以及显示亮度等的控制参数。一种方式中，第一显示控制信息可以为目标交互控件的相关控制信息，例如，目标交互控件的显示区域大小、显示区域形状、显示亮度等；通过目标交互控件的相关控制信息，可以直接控制生成第一光影效果；也可以对目标交互控件的控制信息经过一定的算法处理后，得到第一光影效果的显示控制信息。

基于此，第一光影效果与目标交互控件的显示格式相匹配；例如，第一光影效果的形状可以与目标交互控件的形状相同；或者，第一光影效果的亮度与目标交互控件的亮度相匹配；或者，第一光影效果的显示位置与目标交互控件的显示位置相同，或者具有一定的位置偏移关系。

不同的交互控件，其对应的第一显示控制信息通常不同，例如，可能形状、大小、亮度等全部或部分信息不同。当用户点击不同的目标交互控件时，根据不同的第一显示控制信息，显示的第一光影效果也不同。因此，在用户点击控件的过程中，页面上会变换多种光影效果，且这些光影效果与用户点击的控件相呼应。

步骤S108，基于第一显示控制信息生成第一光影效果，将第一光影效果显示在背景内容之上。

通过第一显示控制信息生成并显示第一光影效果时，可以在指定页面中设置一个显示层，例如，光影层；然后在该显示层上显示第一光影效果；该显示层可以设置在背景层之上，从而控制第一光影效果显示在背景内容之上；该显示层可以设置在前述控件交互层之上或之下，从而控制第一光影效果显示在交互控件的上层或下层。

上述页面交互的显示控制方法，响应于指定页面的显示触发事件，获取指定页面的控件交互层和背景层；其中，控件交互层用于：提供至少一个交互控件；背景层用于显示预设背景内容；在图形用户界面中显示控件交互层和背景层；其中，控件交互层显示在背景层之上；从控件交互层中确定被选中的目标交互控件，获取目标交互控件对应的第一显示控制信息；第一显示控制信息用于：控制显示目标交互控件对应的第一光影效果；第一光影效果与目标交互控件的显示格式相匹配；基于第一显示控制信息生成第一光影效果，将第一光影效果显示在背景内容之上。该方式中，用户通过交互控件执行交互操作时，界面上显示交互控件对应的光影效果，使得界面中针对用户的交互操作提供光影变化反馈，提高了交互反馈信息的丰富程度，提高了用户的交互体验。

在确定目标交互控件时，一种方式中，获取指定页面的默认选中控件，将默认选中控件确定为目标交互控件；如果指定页面预设有默认选中控件，则指定页面被触发显示时，一开始会将默认选中控件作为目标交互控件，在显示指定页面的同时，会显示选中状态下的目标交互控件。如果指定页面没有预设默认选中控件，则在显示指定页面的初期，指定页面上没有被选中的目标交互控件，指定页面中的交互控件会以未被选中的状态显示。

另一种方式中，响应作用于指定页面的控件选择操作，确定控件选择操作的操作位置，将操作位置所属的控件区域对应的交互控件，确定为目标交互控件。控件选择操作可以为点击操作、双击操作、长按操作、按下后滑动操作等。控件选择操作会产生操作位置，即用户执行控件选择操作时手指触点位置；操作位置位于哪个控件的控件区域，该控件即目标交互控件。显示指定页面后，用户可以点击多个目标交互控件，即目标交互控件会随着操作位置的变化而变化。

例如，用户点击控件A后，控件A作为目标交互控件；用户又点击了控件B，此时，目标交互控件切换为控件B，控件A恢复为不被选中的控件；再如，用户点击控件A后，控件A作为目标交互控件；用户又点击了控件B，此时，控件B和控件A同时作为目标交互控件。当用户再次点击控件A时，控件A恢复为不被选中的控件。

下述实施例提供生成第一光影效果的多种实现方式。

一种方式中，第一显示控制信息包括目标交互控件的遮罩信息和位置信息；该遮罩信息指示：目标交互控件的控件区域大小和控件区域形状；该遮罩信息可以为目标交互控件的遮罩贴图；该遮罩贴图中包括特定颜色的显示区域，该显示区域的大小和形状对应目标交互控件的控件区域大小和控件区域形状。或者，遮贴图中的显示区域的形状对应控件区域形状，然后，根据显示区域的原始形状和采样频率，得到控件区域形状。

在本实施例中，上述遮罩信息不仅用于控制绘制目标交互控件，还用于控制生成第一光影效果。具体的，基于遮罩信息确定第一光影效果的效果显示区域；基于位置信息和预设的位置偏移参数，确定第一光影效果的效果显示位置；基于预设的亮度控制参数，在效果显示位置上显示效果显示区域对应的第一光影效果。

需要说明的是，所述第一光影效果的效果显示区域确定了第一光影效果的形状和大小，但并没有确定第一光影效果显示在页面中的哪个位置。而上述效果显示位置确定了第一光影效果在页面中的显示位置。

在实际实现时，可以通过SDF(Signed Distance Field,有向距离场)的方式得到上述效果显示区域。首先，获取目标交互控件的遮罩信息，具体可以为遮罩贴图，该遮罩贴图中包括特定颜色的显示区域，以代表目标交互控件的显示区域，通过边缘检测的方式检测该显示区域的边缘，然后，通过SDF的方式，计算贴图中各个位置距离边缘的最近距离，此时，贴图中的每个位置会对应一个距离值，距离值为正值的位置，位于上述显示区域以外，距离值为负值的位置，位于上述显示区域以内，距离值为零的位置，位于边缘上，得到一个距离场贴图。

一种方式中，从遮罩信息中提取目标交互控件的控件边缘；基于控件边缘生成有向距离场贴图；在有向距离场贴图中，控件边缘所在的位置具有第一数值；控件边缘以外的贴图位置对应的数值，与贴图位置距离控件边缘的最小距离相关；与控件边缘的最小距离相同的贴图位置，具有的数值相同；获取预设的缩放控制参数，基于缩放控制参数确定目标数值；将有向距离场中，目标数值包围的区域确定为效果显示区域；其中，该效果显示区域的区域形状与目标交互控件的控件边缘包围的形状相同；效果显示区域的区域面积，与目标数值相关。

例如，上述数值也可以理解为距离值；即，距离控件边缘的最小距离值；控件边缘所在的位置对应的距离值为零，控件边缘包围的区域之内的位置，对应的距离值为负数，距离控件边缘越远，距离值的绝对值越大；控件边缘包围的区域之外的位置，对应的距离值为正数，距离控件边缘越远，距离值的绝对值越大。因此，通过取不同的距离值的位置，即可得到与目标交互控件的形状相同，但面积不同的区域。

因此，上述缩放控制参数可以存储在前述第一显示控制信息中，如果缩放控制参数指示需要在目标交互控件的控件区域大小的基础上进行放大，则目标数值需要大于第一数值，目标数值越大，放大倍数也就越大；如果缩放控制参数指示需要在目标交互控件的控件区域大小的基础上进行放大，则目标数值需要小于第一数值，目标数值越小，缩小倍数也就越大。

在上述有向距离场中，位于控件边缘包围的区域之内的贴图位置，具有的数值小于第一数值，且距离控件边缘的距离越远，具有的数据越小；位于控件边缘包围的区域之外的贴图位置，具有的数值大于第一数值，且距离控件边缘的距离越远，具有的数据越大。

基于上述，如果缩放控制参数为1，此时，目标数值可以为前述第一数值，该情况下，第一光影效果的效果显示区域与目标交互控件的显示区域的大小相同；如果缩放控制参数为2，此时，目标数值需要大于前述第一数值，从而使第一光影效果的效果显示区域的区域面积为目标交互控件的显示区域的区域面积的2倍。

在实际实现时，如果目标数值大于第一数值，效果显示区域的区域面积大于目标交互控件的控件区域面积；如果目标数值等于第一数值，效果显示区域的区域面积等于目标交互控件的控件区域面积；如果目标数值小于第一数值，效果显示区域的区域面积小于目标交互控件的控件区域面积。通过该方式，可以控制效果显示区域基于目标交互控件的控件区域进行缩放。

另外，还可以通过时间参数调整上述缩放控制参数，使缩放控制参数随时间变化，然后，根据缩放控制参数随时调整目标数值，使得第一光影效果的效果显示区域也随之变化，实现光影效果的动态缩放效果。

在上述有向距离场中，距离值为零的位置组成前述目标交互控件的边缘线条，该边缘线条的形状代表了目标交互控件的形状；距离值为10的位置组成的线条，与目标交互控件的形状相同，但区域面积目标交互控件的区域面积，即距离值为10的线条包围的面积，大于距离值为0的线条包围的区域面积。通过取不同的距离值，即可绘制的得到与目标交互控件形状相同，但区域大小不同的效果显示区域。

作为一个示例，下述算式提供了一种计算三角形的效果显示区域的方式：

k＝sqrt(3.0)；其中，sqrt为平方根计算；

p.x1＝abs(p.x0)-1.0；其中，p.x0代表绘制目标交互控件时使用的遮罩贴图中的x方向坐标；abs代表求绝对值；

p.y1＝p.y0+1.0/k；其中，p.y0代表绘制目标交互控件时使用的遮罩贴图中的y方向坐标；

如果(p.x1+k*p.y1>0.0)，则p＝(p.x1-k*p.y1,-k*p.x1-p.y1)/2.0；

p.x2-＝clamp(p.x1,-2.0,0.0)；其中，clamp函数将p.x2的值限制在-2.0和0.0之间；当p.x1小于-2.0时，p.x2＝-2.0；当p.x1大于-2.0时，p.x2＝0.0；当p.x1在-2.0和0.0之间时，p.x2＝p.x1。

shape0＝-length(p)*sign(p.y2)；其中，length函数用于计算p的长度；sign函数用于获取p.y2的符号；

shape1＝smoothstep(0.04,0.05,shape0)；其中，smoothstep函数用于：当shape0小于0.04，则shape1＝0；当shape0大于0.05，则shape1＝1；当shape0位于0.04和0.05之间，shape1＝3*shape0²-2*shape0³。shape1即最终得到的第一光影效果的效果显示区域。

上述第一显示控制信息中的位置信息，指示了目标交互控件在页面中的显示位置；基于目标交互控件的显示位置，确定第一光影效果的效果显示位置。在实际实现时，第一光影效果和目标交互控件可以重叠显示，此时，上述位置偏移参数为零；当位置偏移参数不为零时，通常第一光影效果和目标交互控件不重叠或部分重叠显示。

第一光影效果的效果显示区域和效果显示位置确定后，再通过亮度控制参数控制第一光影效果的亮度，从而得到第一光影效果。这里的亮度控制参数可以包括光影效果的亮度值、透明度等参数；当第一光影效果的效果显示区域具有一定的区域面积时，亮度控制参数还可以控制效果显示秋雨内不同位置的亮度不同或透明度不同，从视觉上看，得到具有一定纹理内容的光影效果。

在计算第一光影效果的效果显示区域和位置时，使用sdf的方式得到，同时在shader中计算第一光影效果的运动路径，把计算放在gpu端进行，减少使用固定的图片资源造成的内存及带宽的消耗，提高了计算效率。

进一步的，上述第一显示控制信息还包括：移动控制信息；移动控制信息用于：指示第一光影效果的移动路径；当基于第一显示控制信息中的位置信息和预设的位置偏移参数确定出第一光影效果的效果显示位置之后，在该效果显示位置显示第一光影效果，为了增加光影效果的动态性，还可以控制光影效果进行移动。具体的，基于移动控制信息和时间参数，控制第一光影效果沿着移动路径进行移动。例如，可以预先设置移动路径的控制函数，将初始位置，即上述效果显示位置，以及时间参数输入至控制函数后，自动输出每个时刻的位置，不同时刻的位置不同，从而实现第一光影效果沿着移动路径进行移动。

作为示例，下面算式提供一种移动路径的控制方式。

r＝0.5；

θ＝theta*PI/180*sin(Gametime)；其中，theta为预设的旋转角度；Gametime为当前时间参数，在游戏系统中，Gametime为可以游戏运行时长；PI为圆周率常数；

x1＝a+r*cosθ；其中，a为预设的圆心横坐标；

y1＝b+r*sinθ；其中，b为预设的圆心纵坐标；

x2＝x0+x1；y2＝y0+y1；其中，(x0，y0)为第一光影效果的当前位置；(x2，y2)为第一光影效果的下一个位置。

下述实施例描述第一光影效果的亮度控制方式。

具体的，从背景层的第一指定位置获取第一亮度参数，从背景层的第二指定位置获取第二亮度参数；其中，第一指定位置的亮度大于第一亮度阈值，第二指定位置的亮度小于第二亮度阈值；第一亮度阈值大于第二亮度阈值；基于预设的混合参数，将第一亮度参数和第二亮度参数进行混合处理，得到亮度控制参数。

在实际实现时，上述第一指定位置可以为背景层的亮部区域中的位置，因而，第一亮度参数对应的亮度较高；上述第二指定位置为背景层的暗部区域中的位置，因而，第二亮度参数对应的亮度较低。上述混合参数可以理解为混合权值，通过混合参数对第一亮度参数和第二亮度参数进行混合后，得到的亮度控制参数通常介于第一亮度参数和第二亮度参数之间。通过调整混合参数，可以调整亮度控制参数的大小，进而调整第一光影效果的亮度。

作为示例，可以通过下述算式得到第一光影效果的亮度：

shapeMaskDarkColor＝shapeColorDark*shape1；其中，shape1代表前述计算得到的第一光影效果的效果显示区域，在这里，shape1具体可以为效果显示区域的遮罩贴图；shapeColorDark为第一亮度参数，具体可以为包含第一亮度参数的亮度贴图，该亮度贴图可以从背景内容的局部区域的亮度参数中获取；通过shape1的遮罩贴图，从shapeColorDark的亮度贴图中采样，可以得到shapeMakDarkColor，该shapeMaskDarkColor的形状与第一光影效果的效果显示区域的形状相同；

shapeMaskLightColor＝shapeColorLight*shape1；其中，shape1代表前述计算得到的第一光影效果的效果显示区域，在这里，shape1具体可以为效果显示区域的遮罩贴图；shapeColorLight为第二亮度参数，具体可以为包含第二亮度参数的亮度贴图，该亮度贴图可以从背景内容的局部区域的亮度参数中获取；通过shape1的遮罩贴图，从shapeColorLight的亮度贴图中采样，可以得到shapeMaskLightColor，该shapeMaskLightColor的形状与第一光影效果的效果显示区域的形状相同；

然后，令UIColor＝

Lerp(shapeMaskDarkColor,shapeMaskLightColor,shapeButton)；

＝shapeMaskDarkColor+(shapeMaskLightColor-shapeMaskDarkColor)*shapeButton

其中，UIColor为前述亮度控制参数；Lerp函数为线性插值函数；shapeMaskDarkColor和shapeMaskLightColor均为第一光影效果的效果显示区域的形状，shapeButton为前述混合参数。

进一步地，通过上述步骤得到亮度控制参数后，还可以使亮度控制参数随时间进行变化，使得第一光影效果的亮度动态变化，具体的，基于时间参数和预设的亮度变化参数，对亮度控制参数进行变化，以控制光影效果的亮度进行变化。其中，亮度变化参数可以用于控制亮度变化的幅度，亮度变化参数越大，光影效果的亮度变化时，明暗幅度也就越大。时间参数可以为当前系统的运行时间；时间参数求余弦后，余弦结果乘以亮度控制参数和亮度变化参数，得到最终的亮度控制参数；由于时间参数的余弦结果周期性变化，因而最终的亮度控制参数也会周期性变化，得到亮度动态变化的光影效果。

在前述实施例中提到，指定页面包括控件交互层和背景层；在本实施例中，指定页面还设置有角色层；角色层用于显示预设角色对象；角色层显示在背景层和控件交互层之间；控制第一光影效果显示在角色层之上。在指定页面中，最上层为控件交互层、中间层为角色层，最下层为背景层；该角色层中可以包括预设角色对象的图像，例如，人物图像、游戏角色图像等。上述第一光影效果显示在角色层之上，如果第一光影效果的显示区域与角色对象的显示区域重叠，第一光影效果显示在角色对象身上，实现光影照射在角色对象身上的视觉效果。在实际实现时，如果指定页面中设置第一光影效果对应的光影层，则该光影层位于角色层之上，该光影层位于控件交互层之上或者控件交互层之下。

作为示例，参见图2和图3的界面效果示意图；其中，图2示出了没有添加第一光影效果的界面；图3示出了添加了第一光影效果的界面；其中，白色箭头指出的高亮区域，即第一光影效果；当目标交互控件被触发后，在角色对象前面显示三角形状的第一光影效果，第一光影效果的形状与目标交互控件的形状相同。

另一个示例中，参见图4和图5的界面效果示意图；在图4中，白色箭头指出的控件被选中后，以普通亮度显示；而在图5中，白色箭头指出的控件被选中后，在该控件的显示区域显示了三角形状的第一光影效果。

为了进一步丰富光影效果，在显示第一光影效果之后，基于第一光影效果，生成第二显示控制信息；其中，该第二显示控制信息用于：控制显示第一光影效果对应的第二光影效果；基于第二显示控制信息生成第二光影效果，将第二光影效果显示在角色层和背景层之间。该第二显示控制信息中可以包括第二光影效果的显示区域的形状和尺寸、还可以包括亮度控制信息；如果第二光影效果与第一光影效果相同，则第二显示控制信息与第一光影效果对应的第一显示控制信息相同。另外，还可以在第一光影效果的基础上，通过调整参数对第一光影效果进行形变、缩放、以及亮度调整，从而使第二光影效果与第一光影效果不同。

另外，第二光影效果可以与第一光影效果关联显示，例如，当第一光影效果发生位移时，第二光影效果也发生位移，但二者的移动路径可以相同也可以不同；再如，当第一光影效果发生缩放时，第二光影效果也发生缩放，但二者的缩放程度可以相同也可以不同。

需要说明的是，前述第一光影效果显示在角色层之上，而这里的第二光影效果显示在角色层和背景层之间，当第二光影效果的显示区域与角色对象重合时，角色对象遮挡第二光影效果，实现第二光影效果显示在角色对象身后的视觉效果。通过该方式，部分光影效果可以显示在角色对象之前，另一部分光影效果显示在角色对象之后，可以实现具有空间感的界面光影显示效果。

一种具体的实现方式中，基于第一光影效果生成第二显示控制信息时，基于第一光影效果的区域形状以及预设的形状映射关系，生成第二光影效果的区域形状；该形状映射关系具体可以为形状映射函数，第一光影效果的区域形状输入至形状映射函数后，输出第二光影效果的区域形状；形状映射关系可以控制输入的第一光影效果的区域形状进行形变、缩放等，从而得到第二光影效果的区域形状。

基于第一光影效果的显示位置以及预设的位置映射关系，生成第二光影效果的显示位置；该位置映射关系可以为位置偏移参数，通过该位置偏移参数，对第一光影效果的显示位置进行偏移，得到第二光影效果的显示位置；该位置映射关系具体可以为X轴方向的偏移坐标和Y轴方向的偏移坐标。

基于第一光影效果的亮度控制参数以及预设的亮度映射关系，生成第二光影效果的亮度控制参数；该亮度映射关系可以为亮度缩放参数，将第一光影效果的亮度控制参数乘以该亮度映射关系，即可得到第二光影效果的亮度控制参数；另一种方式中，第一光影效果的亮度控制参数中可能包含第一光影效果的显示区域中各个位置的亮度参数，前述亮度映射关系可以将第一光影效果中位置A的亮度参数，映射至第二光影效果中位置B的亮度参数，亮度映射关系使得亮度分布发生变化。将第二光影效果的上述区域形状、上述显示位置和上述亮度控制参数，确定为第二显示控制信息。基于该第二显示控制信息，即可显示第二光影效果。

如图6中，白色箭头示出了第二光影效果；该第二光影效果与角色对象前面的第一光影效果的形状相同，但亮度较低，同时，第二光影效果还具有镂空效果；具体可以对第一光影效果的局部位置的亮度进行映射，而对镂空位置的亮度不进行映射，使得镂空位置亮度较低，得到具有镂空效果的第二光影效果。另外，界面中还显示了比较小的三角形，这些三角形可以预先设置在控件交互层上，通过图片资源实现。

其他实现方式中，在从控件交互层中确定被选中的目标交互控件之前，基于默认的光影效果参数，在背景层之上显示控件交互层中指定控件的默认光影效果；其中，该默认光影效果与第一光影效果不同。该默认光影效果可以理解为，在没有选中目标交互控件的情况下，指定控件的光影效果；该指定控件可以为控件交互层中的全部控件，也可以为部分控件。通常，为了突出控件被选中和不被选中时光影效果的区域，默认光影效果的光影区域面积可以设置为小于第一光影效果的光影区域面积，或者，默认光影效果的光影亮度可以设置为小于第一光影效果的光影亮度。

为了便于理解本实施例，图7示出了一种光影效果的具体实现方式。该指定页面中共包括五个显示层，从上到下依次为控件交互层、空间光影层(前)、角色层、空间光影层(后)和背景层；其中，空间光影层(前)用于显示前述第一光影效果，空间光影层(后)用于显示前述第二光影效果。

另外，在界面中还可以显示横向放射状的光影效果，且可以周期性的动态变化显示。

在上述示例中，三角形的第一光影效果投影在角色形象身上，同时，在角色形象身后显示关联的第二光影效果，光影效果在角色形状的身前身后相互连续、贯穿，强化出整个前中后层级的空间感，并且光影效果会通过时间延时做光影强弱、位移动画，可以增强不稳定性和隐匿感。

对应于上述方法实施例，参见图8所示的一种页面交互的显示控制装置的结构示意图，通过终端设备提供一图形用户界面，该装置包括：

第一获取模块80，用于响应于指定页面的显示触发事件，获取指定页面的控件交互层和背景层；其中，控件交互层用于：提供至少一个交互控件；背景层用于显示预设背景内容；

第一显示模块82，用于在图形用户界面中显示控件交互层和背景层；其中，控件交互层显示在背景层之上；

第二获取模块84，用于从控件交互层中确定被选中的目标交互控件，获取目标交互控件对应的第一显示控制信息；第一显示控制信息用于：控制显示目标交互控件对应的第一光影效果；

第二显示模块86，用于基于第一显示控制信息生成第一光影效果，将第一光影效果显示在背景内容之上。

上述页面交互的显示控制装置，响应于指定页面的显示触发事件，获取指定页面的控件交互层和背景层；其中，控件交互层用于：提供至少一个交互控件；背景层用于显示预设背景内容；在图形用户界面中显示控件交互层和背景层；其中，控件交互层显示在背景层之上；从控件交互层中确定被选中的目标交互控件，获取目标交互控件对应的第一显示控制信息；第一显示控制信息用于：控制显示目标交互控件对应的第一光影效果；第一光影效果与目标交互控件的显示格式相匹配；基于第一显示控制信息生成第一光影效果，将第一光影效果显示在背景内容之上。该方式中，用户通过交互控件执行交互操作时，界面上显示交互控件对应的光影效果，使得界面中针对用户的交互操作提供光影变化反馈，提高了交互反馈信息的丰富程度，提高了用户的交互体验。

上述第二获取模块，还用于：获取指定页面的默认选中控件，将默认选中控件确定为目标交互控件；或者，响应作用于指定页面的控件选择操作，确定控件选择操作的操作位置，将操作位置所属的控件区域对应的交互控件，确定为目标交互控件。

上述第一显示控制信息包括目标交互控件的遮罩信息和位置信息；遮罩信息指示：目标交互控件的控件区域大小和控件区域形状；上述第二显示模块，还用于：基于遮罩信息确定第一光影效果的效果显示区域；基于位置信息和预设的位置偏移参数，确定第一光影效果的效果显示位置；基于预设的亮度控制参数，在效果显示位置上显示效果显示区域对应的第一光影效果。

上述第二显示模块，还用于：从遮罩信息中提取目标交互控件的控件边缘；基于控件边缘生成有向距离场贴图；在有向距离场贴图中，控件边缘所在的位置具有第一数值；控件边缘以外的贴图位置对应的数值，与贴图位置距离控件边缘的最小距离相关；与控件边缘的最小距离相同的贴图位置，具有的数值相同；获取预设的缩放控制参数，基于缩放控制参数确定目标数值；将有向距离场中，目标数值包围的区域确定为效果显示区域；其中，效果显示区域的区域形状与目标交互控件的控件边缘包围的形状相关；效果显示区域的区域面积，与目标数值相关。

上述位于控件边缘包围的区域之内的贴图位置，具有的数值小于第一数值，且距离控件边缘的最小距离越远，具有的数据越小；位于控件边缘包围的区域之外的贴图位置，具有的数值大于第一数值，且距离控件边缘的最小距离越远，具有的数据越大。

上述如果目标数值大于第一数值，效果显示区域的区域面积大于目标交互控件的控件区域面积；如果目标数值等于第一数值，效果显示区域的区域面积等于目标交互控件的控件区域面积；如果目标数值小于第一数值，效果显示区域的区域面积小于目标交互控件的控件区域面积。

上述第一显示控制信息还包括：移动控制信息；移动控制信息用于：指示第一光影效果的移动路径；上述装置还包括移动控制模块，用于：基于移动控制信息和时间参数，控制第一光影效果沿着移动路径进行移动。

上述装置还包括亮度控制模块，用于：从背景层的第一指定位置获取第一亮度参数，从背景层的第二指定位置获取第二亮度参数；其中，第一指定位置的亮度大于第一亮度阈值，第二指定位置的亮度小于第二亮度阈值；第一亮度阈值大于第二亮度阈值；基于预设的混合参数，将第一亮度参数和第二亮度参数进行混合处理，得到亮度控制参数。

上述装置还包括亮度变化模块，用于：基于时间参数和预设的亮度变化参数，对亮度控制参数进行变化，以控制第一光影效果的亮度进行变化。

上述指定页面还设置有角色层；角色层用于显示预设角色对象；角色层显示在背景层和控件交互层之间；上述装置还包括角色层显示模块，用于：控制第一光影效果显示在角色层之上。

上述装置还包括效果显示模块，用于：基于第一光影效果，生成第二显示控制信息；其中，第二显示控制信息用于：控制显示第一光影效果对应的第二光影效果；基于第二显示控制信息生成第二光影效果，将第二光影效果显示在角色层和背景层之间。

上述效果显示模块，还用于：基于第一光影效果的区域形状以及预设的形状映射关系，生成第二光影效果的区域形状；基于第一光影效果的显示位置以及预设的位置映射关系，生成第二光影效果的显示位置；基于第一光影效果的亮度控制参数以及预设的亮度映射关系，生成第二光影效果的亮度控制参数；将第二光影效果的区域形状、显示位置和亮度控制参数，确定为第二显示控制信息。

上述装置还包括默认效果显示模块，用于：基于默认的光影效果参数，在背景层之上显示控件交互层中指定控件的默认光影效果；其中，默认光影效果与第一光影效果不同。

本实施例还提供一种电子设备，包括处理器和存储器，存储器存储有能够被处理器执行的机器可执行指令，处理器执行机器可执行指令以实现上述页面交互的显示控制方法。该电子设备可以是服务器，也可以是终端设备。

参见图9所示，该电子设备包括处理器100和存储器101，该存储器101存储有能够被处理器100执行的机器可执行指令，该处理器100执行机器可执行指令以实现上述页面交互的显示控制方法。

进一步地，图9所示的电子设备还包括总线102和通信接口103，处理器100、通信接口103和存储器101通过总线102连接。

其中，存储器101可能包含高速随机存取存储器(RAM，Random Access Memory)，也可能还包括非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器。通过至少一个通信接口103(可以是有线或者无线)实现该系统网元与至少一个其他网元之间的通信连接，可以使用互联网，广域网，本地网，城域网等。总线102可以是ISA总线、PCI总线或EISA总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图9中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。

处理器100可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器100中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器100可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(DigitalSignal Processor，简称DSP)、专用集成电路(Application Specific IntegratedCircuit，简称ASIC)、现场可编程门阵列(Field-Programmable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本发明实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器101，处理器100读取存储器101中的信息，结合其硬件完成前述实施例的方法的步骤。

上述电子设备中的处理器，通过执行机器可执行指令，可以实现上述页面交互的显示控制方法中的下述操作：

通过终端设备提供一图形用户界面，响应于指定页面的显示触发事件，获取指定页面的控件交互层和背景层；其中，控件交互层用于：提供至少一个交互控件；背景层用于显示预设背景内容；在图形用户界面中显示控件交互层和背景层；其中，控件交互层显示在背景层之上；从控件交互层中确定被选中的目标交互控件，获取目标交互控件对应的第一显示控制信息；第一显示控制信息用于：控制显示目标交互控件对应的第一光影效果；第一光影效果与目标交互控件的显示格式相匹配；基于第一显示控制信息生成第一光影效果，将第一光影效果显示在背景内容之上。

获取指定页面的默认选中控件，将默认选中控件确定为目标交互控件；或者，响应作用于指定页面的控件选择操作，确定控件选择操作的操作位置，将操作位置所属的控件区域对应的交互控件，确定为目标交互控件。

第一显示控制信息包括目标交互控件的遮罩信息和位置信息；遮罩信息指示：目标交互控件的控件区域大小和控件区域形状；基于遮罩信息确定第一光影效果的效果显示区域；基于位置信息和预设的位置偏移参数，确定第一光影效果的效果显示位置；基于预设的亮度控制参数，在效果显示位置上显示效果显示区域对应的第一光影效果。

从遮罩信息中提取目标交互控件的控件边缘；基于控件边缘生成有向距离场贴图；在有向距离场贴图中，控件边缘所在的位置具有第一数值；控件边缘以外的贴图位置对应的数值，与贴图位置距离控件边缘的最小距离相关；与控件边缘的最小距离相同的贴图位置，具有的数值相同；获取预设的缩放控制参数，基于缩放控制参数确定目标数值；将有向距离场中，目标数值包围的区域确定为效果显示区域；其中，效果显示区域的区域形状与目标交互控件的控件边缘包围的形状相关；效果显示区域的区域面积，与目标数值相关。

位于控件边缘包围的区域之内的贴图位置，具有的数值小于第一数值，且距离控件边缘的最小距离越远，具有的数据越小；位于控件边缘包围的区域之外的贴图位置，具有的数值大于第一数值，且距离控件边缘的最小距离越远，具有的数据越大。

如果目标数值大于第一数值，效果显示区域的区域面积大于目标交互控件的控件区域面积；如果目标数值等于第一数值，效果显示区域的区域面积等于目标交互控件的控件区域面积；如果目标数值小于第一数值，效果显示区域的区域面积小于目标交互控件的控件区域面积。

第一显示控制信息还包括：移动控制信息；移动控制信息用于：指示第一光影效果的移动路径；基于移动控制信息和时间参数，控制第一光影效果沿着移动路径进行移动。

从背景层的第一指定位置获取第一亮度参数，从背景层的第二指定位置获取第二亮度参数；其中，第一指定位置的亮度大于第一亮度阈值，第二指定位置的亮度小于第二亮度阈值；第一亮度阈值大于第二亮度阈值；基于预设的混合参数，将第一亮度参数和第二亮度参数进行混合处理，得到亮度控制参数。

基于时间参数和预设的亮度变化参数，对亮度控制参数进行变化，以控制第一光影效果的亮度进行变化。

指定页面还设置有角色层；角色层用于显示预设角色对象；角色层显示在背景层和控件交互层之间；控制第一光影效果显示在角色层之上。

基于第一光影效果，生成第二显示控制信息；其中，第二显示控制信息用于：控制显示第一光影效果对应的第二光影效果；基于第二显示控制信息生成第二光影效果，将第二光影效果显示在角色层和背景层之间。

基于第一光影效果的区域形状以及预设的形状映射关系，生成第二光影效果的区域形状；基于第一光影效果的显示位置以及预设的位置映射关系，生成第二光影效果的显示位置；基于第一光影效果的亮度控制参数以及预设的亮度映射关系，生成第二光影效果的亮度控制参数；将第二光影效果的区域形状、显示位置和亮度控制参数，确定为第二显示控制信息。

基于默认的光影效果参数，在背景层之上显示控件交互层中指定控件的默认光影效果；其中，默认光影效果与第一光影效果不同。

上述方式中，用户通过交互控件执行交互操作时，界面上显示交互控件对应的光影效果，使得界面中针对用户的交互操作提供光影变化反馈，提高了交互反馈信息的丰富程度，提高了用户的交互体验。

本实施例还提供一种机器可读存储介质，机器可读存储介质存储有机器可执行指令，机器可执行指令在被处理器调用和执行时，机器可执行指令促使处理器实现上述页面交互的显示控制方法。

上述机器可读存储介质存储中的机器可执行指令，通过执行该机器可执行指令，可以实现上述页面交互的显示控制方法中的下述操作：

通过终端设备提供一图形用户界面，响应于指定页面的显示触发事件，获取指定页面的控件交互层和背景层；其中，控件交互层用于：提供至少一个交互控件；背景层用于显示预设背景内容；在图形用户界面中显示控件交互层和背景层；其中，控件交互层显示在背景层之上；从控件交互层中确定被选中的目标交互控件，获取目标交互控件对应的第一显示控制信息；第一显示控制信息用于：控制显示目标交互控件对应的第一光影效果；第一光影效果与目标交互控件的显示格式相匹配；基于第一显示控制信息生成第一光影效果，将第一光影效果显示在背景内容之上。

获取指定页面的默认选中控件，将默认选中控件确定为目标交互控件；或者，响应作用于指定页面的控件选择操作，确定控件选择操作的操作位置，将操作位置所属的控件区域对应的交互控件，确定为目标交互控件。

第一显示控制信息包括目标交互控件的遮罩信息和位置信息；遮罩信息指示：目标交互控件的控件区域大小和控件区域形状；基于遮罩信息确定第一光影效果的效果显示区域；基于位置信息和预设的位置偏移参数，确定第一光影效果的效果显示位置；基于预设的亮度控制参数，在效果显示位置上显示效果显示区域对应的第一光影效果。

从遮罩信息中提取目标交互控件的控件边缘；基于控件边缘生成有向距离场贴图；在有向距离场贴图中，控件边缘所在的位置具有第一数值；控件边缘以外的贴图位置对应的数值，与贴图位置距离控件边缘的最小距离相关；与控件边缘的最小距离相同的贴图位置，具有的数值相同；获取预设的缩放控制参数，基于缩放控制参数确定目标数值；将有向距离场中，目标数值包围的区域确定为效果显示区域；其中，效果显示区域的区域形状与目标交互控件的控件边缘包围的形状相关；效果显示区域的区域面积，与目标数值相关。

位于控件边缘包围的区域之内的贴图位置，具有的数值小于第一数值，且距离控件边缘的最小距离越远，具有的数据越小；位于控件边缘包围的区域之外的贴图位置，具有的数值大于第一数值，且距离控件边缘的最小距离越远，具有的数据越大。

如果目标数值大于第一数值，效果显示区域的区域面积大于目标交互控件的控件区域面积；如果目标数值等于第一数值，效果显示区域的区域面积等于目标交互控件的控件区域面积；如果目标数值小于第一数值，效果显示区域的区域面积小于目标交互控件的控件区域面积。

第一显示控制信息还包括：移动控制信息；移动控制信息用于：指示第一光影效果的移动路径；基于移动控制信息和时间参数，控制第一光影效果沿着移动路径进行移动。

从背景层的第一指定位置获取第一亮度参数，从背景层的第二指定位置获取第二亮度参数；其中，第一指定位置的亮度大于第一亮度阈值，第二指定位置的亮度小于第二亮度阈值；第一亮度阈值大于第二亮度阈值；基于预设的混合参数，将第一亮度参数和第二亮度参数进行混合处理，得到亮度控制参数。

基于时间参数和预设的亮度变化参数，对亮度控制参数进行变化，以控制第一光影效果的亮度进行变化。

指定页面还设置有角色层；角色层用于显示预设角色对象；角色层显示在背景层和控件交互层之间；控制第一光影效果显示在角色层之上。

基于第一光影效果，生成第二显示控制信息；其中，第二显示控制信息用于：控制显示第一光影效果对应的第二光影效果；基于第二显示控制信息生成第二光影效果，将第二光影效果显示在角色层和背景层之间。

基于第一光影效果的区域形状以及预设的形状映射关系，生成第二光影效果的区域形状；基于第一光影效果的显示位置以及预设的位置映射关系，生成第二光影效果的显示位置；基于第一光影效果的亮度控制参数以及预设的亮度映射关系，生成第二光影效果的亮度控制参数；将第二光影效果的区域形状、显示位置和亮度控制参数，确定为第二显示控制信息。

基于默认的光影效果参数，在背景层之上显示控件交互层中指定控件的默认光影效果；其中，默认光影效果与第一光影效果不同。

上述方式中，用户通过交互控件执行交互操作时，界面上显示交互控件对应的光影效果，使得界面中针对用户的交互操作提供光影变化反馈，提高了交互反馈信息的丰富程度，提高了用户的交互体验。

本发明实施例所提供的页面交互的显示控制方法、装置和电子设备的计算机程序产品，包括存储了程序代码的计算机可读存储介质，所述程序代码包括的指令可用于执行前面方法实施例中所述的方法，具体实现可参见方法实施例，在此不再赘述。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

另外，在本发明实施例的描述中，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

在本发明的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

最后应说明的是：以上实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。

Claims (16)

1.一种页面交互的显示控制方法，其特征在于，通过终端设备提供一图形用户界面，所述方法包括：

响应于指定页面的显示触发事件，获取所述指定页面的控件交互层和背景层；其中，所述控件交互层用于：提供至少一个交互控件；所述背景层用于显示预设背景内容；

在所述图形用户界面中显示所述控件交互层和所述背景层；其中，所述控件交互层显示在所述背景层之上；

从所述控件交互层中确定被选中的目标交互控件，获取所述目标交互控件对应的第一显示控制信息；所述第一显示控制信息用于：控制显示所述目标交互控件对应的第一光影效果；所述第一光影效果与所述目标交互控件的显示格式相匹配；

基于所述第一显示控制信息生成第一光影效果，将所述第一光影效果显示在所述背景内容之上。

2.根据权利要求1所述的方法，其特征在于，从所述控件交互层中确定被选中的目标交互控件的步骤，包括：

获取所述指定页面的默认选中控件，将所述默认选中控件确定为目标交互控件；

或者，响应作用于所述指定页面的控件选择操作，确定所述控件选择操作的操作位置，将所述操作位置所属的控件区域对应的交互控件，确定为目标交互控件。

3.根据权利要求1所述的方法，其特征在于，所述第一显示控制信息包括所述目标交互控件的遮罩信息和位置信息；所述遮罩信息指示：所述目标交互控件的控件区域大小和控件区域形状；

所述基于所述第一显示控制信息生成第一光影效果的步骤，包括：

基于所述遮罩信息确定所述第一光影效果的效果显示区域；

基于所述位置信息和预设的位置偏移参数，确定所述第一光影效果的效果显示位置；

基于预设的亮度控制参数，在所述效果显示位置上显示所述效果显示区域对应的第一光影效果。

4.根据权利要求3所述的方法，其特征在于，基于所述遮罩信息确定所述第一光影效果的效果显示区域的步骤，包括：

从所述遮罩信息中提取所述目标交互控件的控件边缘；

基于所述控件边缘生成有向距离场贴图；在所述有向距离场贴图中，所述控件边缘所在的位置具有第一数值；所述控件边缘以外的贴图位置对应的数值，与所述贴图位置距离所述控件边缘的最小距离相关；与所述控件边缘的最小距离相同的贴图位置，具有的数值相同；

获取预设的缩放控制参数，基于所述缩放控制参数确定目标数值；

将所述有向距离场中，所述目标数值包围的区域确定为效果显示区域；其中，所述效果显示区域的区域形状与所述目标交互控件的控件边缘包围的形状相关；所述效果显示区域的区域面积，与所述目标数值相关。

5.根据权利要求4所述的方法，其特征在于，

位于所述控件边缘包围的区域之内的贴图位置，具有的数值小于所述第一数值，且距离所述控件边缘的最小距离越远，具有的数据越小；位于所述控件边缘包围的区域之外的贴图位置，具有的数值大于所述第一数值，且距离所述控件边缘的最小距离越远，具有的数据越大。

6.根据权利要求4所述的方法，其特征在于，

如果所述目标数值大于所述第一数值，所述效果显示区域的区域面积大于所述目标交互控件的控件区域面积；

如果所述目标数值等于所述第一数值，所述效果显示区域的区域面积等于所述目标交互控件的控件区域面积；

如果所述目标数值小于所述第一数值，所述效果显示区域的区域面积小于所述目标交互控件的控件区域面积。

7.根据权利要求3所述的方法，其特征在于，所述第一显示控制信息还包括：移动控制信息；所述移动控制信息用于：指示所述第一光影效果的移动路径；所述基于预设的亮度控制参数，在所述效果显示位置上显示所述效果显示区域对应的第一光影效果的步骤之后，所述方法还包括：

基于所述移动控制信息和时间参数，控制所述第一光影效果沿着所述移动路径进行移动。

8.根据权利要求3所述的方法，其特征在于，基于预设的亮度控制参数，在所述效果显示位置上显示所述效果显示区域对应的第一光影效果的步骤之前，所述方法还包括：

从所述背景层的第一指定位置获取第一亮度参数，从所述背景层的第二指定位置获取第二亮度参数；其中，所述第一指定位置的亮度大于第一亮度阈值，所述第二指定位置的亮度小于第二亮度阈值；所述第一亮度阈值大于所述第二亮度阈值；

基于预设的混合参数，将所述第一亮度参数和所述第二亮度参数进行混合处理，得到亮度控制参数。

9.根据权利要求8所述的方法，其特征在于，基于预设的混合参数，将所述第一亮度参数和所述第二亮度参数进行混合处理，得到亮度控制参数的步骤之后，所述方法还包括：

基于时间参数和预设的亮度变化参数，对所述亮度控制参数进行变化，以控制所述第一光影效果的亮度进行变化。

10.根据权利要求1所述的方法，其特征在于，所述指定页面还设置有角色层；所述角色层用于显示预设角色对象；所述角色层显示在所述背景层和所述控件交互层之间；

所述基于所述第一显示控制信息生成第一光影效果的步骤之后，所述方法还包括：控制所述第一光影效果显示在所述角色层之上。

11.根据权利要求10所述的方法，其特征在于，控制所述第一光影效果显示在所述角色层之上的步骤之后，所述方法还包括：

基于所述第一光影效果，生成第二显示控制信息；其中，所述第二显示控制信息用于：控制显示所述第一光影效果对应的第二光影效果；

基于所述第二显示控制信息生成所述第二光影效果，将所述第二光影效果显示在所述角色层和所述背景层之间。

12.根据权利要求11所述的方法，其特征在于，基于所述第一光影效果，生成第二显示控制信息的步骤，包括：

基于所述第一光影效果的区域形状以及预设的形状映射关系，生成所述第二光影效果的区域形状；

基于所述第一光影效果的显示位置以及预设的位置映射关系，生成所述第二光影效果的显示位置；

基于所述第一光影效果的亮度控制参数以及预设的亮度映射关系，生成所述第二光影效果的亮度控制参数；

将所述第二光影效果的区域形状、显示位置和亮度控制参数，确定为第二显示控制信息。

13.根据权利要求1所述的方法，其特征在于，从所述控件交互层中确定被选中的目标交互控件的步骤之前，所述方法还包括：

基于默认的光影效果参数，在所述背景层之上显示所述控件交互层中指定控件的默认光影效果；其中，所述默认光影效果与所述第一光影效果不同。

14.一种页面交互的显示控制装置，其特征在于，通过终端设备提供一图形用户界面，所述装置包括：

第一获取模块，用于响应于指定页面的显示触发事件，获取所述指定页面的控件交互层和背景层；其中，所述控件交互层用于：提供至少一个交互控件；所述背景层用于显示预设背景内容；

第一显示模块，用于在所述图形用户界面中显示所述控件交互层和所述背景层；其中，所述控件交互层显示在所述背景层之上；

第二获取模块，用于从所述控件交互层中确定被选中的目标交互控件，获取所述目标交互控件对应的第一显示控制信息；所述第一显示控制信息用于：控制显示所述目标交互控件对应的第一光影效果；

第二显示模块，用于基于所述第一显示控制信息生成第一光影效果，将所述第一光影效果显示在所述背景内容之上。

15.一种电子设备，其特征在于，包括处理器和存储器，所述存储器存储有能够被所述处理器执行的机器可执行指令，所述处理器执行所述机器可执行指令以实现权利要求1-13任一项所述的页面交互的显示控制方法。

16.一种机器可读存储介质，其特征在于，所述机器可读存储介质存储有机器可执行指令，所述机器可执行指令在被处理器调用和执行时，所述机器可执行指令促使所述处理器实现权利要求1-13任一项所述的页面交互的显示控制方法。