CN109002241A - 视图错层显示方法、电子设备及存储介质 - Google Patents

Abstract

本发明公开了一种视图错层显示方法、电子设备及存储介质，其中，视图错层显示方法包括：接收被触发的针对视图的移动事件；根据移动事件，确定移动距离因数；根据移动距离因数，计算各个视图层待显示的图片元素的显示位置信息；响应于移动事件，根据各个视图层待显示的图片元素的显示位置信息，分别在各个视图层绘制相应的图片元素。根据本发明提供的技术方案，不仅方便地实现了视图的错层显示，极大地丰富了视图移动效果，有助于吸引用户注意力，有效地提升了内容推广的效果，而且还有效地减少了视图对外部环境的依赖，缩短了视图处理耗时，提高了视图处理效率。

Description

视图错层显示方法、电子设备及存储介质

技术领域

本发明涉及视图处理技术领域，具体涉及一种视图错层显示方法、电子设备及存储介质。

背景技术

电子书具有携带方便、获取方便等优势，越来越多的用户喜欢阅读电子书。用户大多是利用安装在终端设备中的电子书客户端进行电子书下载和阅读。为了便于用户了解电子书客户端中的电子书、阅读活动或会员充值活动等内容，一般会在首页或某些主页面的上方等位置设置推广位，通过该推广位向用户循环展示用于推广各种内容或活动的视图，希望用户能够优先看到上述内容。

现有技术中，用于在推广位展示的视图通常有多个。用户可通过滑动操作将展示的当前视图切换为下一个视图。如果用户没有手势操作，推广位会采取轮播的方式切换展示视图。然而现有技术中推广位展示的视图都是一张张静态图片，在进行切换时，在视觉效果上仅是简单地将一张图片切换为另一张图片，视图的展示效果单一，内容推广的效果较差。另外，现有技术中一般是利用视图控件ViewPager来实现多个视图的切换，而对视图的创建以及尺寸测量等依赖于许多外部环境，需要耗费较长时间，因此还存在着视图处理耗时较长、处理效率较低的问题。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的视图错层显示方法、电子设备及存储介质。

根据本发明的一个方面，提供了一种视图错层显示方法，视图包含分别在多个视图层显示的图片元素，该方法包括：

接收被触发的针对视图的移动事件；

根据移动事件，确定移动距离因数；

根据移动距离因数，计算各个视图层待显示的图片元素的显示位置信息；

响应于移动事件，根据各个视图层待显示的图片元素的显示位置信息，分别在各个视图层绘制相应的图片元素。

根据本发明的另一方面，提供了一种电子设备，包括：处理器、存储器、通信接口和通信总线，处理器、存储器和通信接口通过通信总线完成相互间的通信；

存储器用于存放至少一可执行指令，可执行指令使处理器执行以下操作：

接收被触发的针对视图的移动事件；视图包含分别在多个视图层显示的图片元素；

根据移动事件，确定移动距离因数；

根据移动距离因数，计算各个视图层待显示的图片元素的显示位置信息；

响应于移动事件，根据各个视图层待显示的图片元素的显示位置信息，分别在各个视图层绘制相应的图片元素。

根据本发明的又一方面，提供了一种存储介质，存储介质中存储有至少一可执行指令，可执行指令使处理器执行以下操作：

接收被触发的针对视图的移动事件；视图包含分别在多个视图层显示的图片元素；

根据移动事件，确定移动距离因数；

根据移动距离因数，计算各个视图层待显示的图片元素的显示位置信息；

响应于移动事件，根据各个视图层待显示的图片元素的显示位置信息，分别在各个视图层绘制相应的图片元素。

根据本发明提供的技术方案，将视图的图片元素分别在多个视图层中进行显示，并且能够根据针对视图的移动事件的移动距离因数，计算各个视图层待显示的图片元素的显示位置信息，并根据显示位置信息分别在各个视图层绘制相应的图片元素，从而不仅方便地实现了视图的错层显示，极大地丰富了视图移动效果，有助于吸引用户注意力，有效地提升了内容推广的效果，而且还有效地减少了视图对外部环境的依赖，缩短了视图处理耗时，提高了视图处理效率。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了根据本发明实施例一的一种视图错层显示方法的流程示意图；

图2a示出了根据本发明实施例二的一种视图错层显示方法的流程示意图；

图2b示出了视图1在电子书客户端中的初始显示示意图；

图2c示出了视图1在电子书客户端中的一个错层显示示意图；

图3示出了根据本发明实施例三的一种视图错层显示方法的流程示意图；

图4示出了根据本发明实施例五的一种电子设备的结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

实施例一

图1示出了根据本发明实施例一的一种视图错层显示方法的流程示意图，如图1所示，该方法包括如下步骤：

步骤S101，接收被触发的针对视图的移动事件。

其中，电子书客户端安装在终端设备中，终端设备可为手机、PAD、电子书阅读器等设备。用户可利用电子书客户端进行电子书下载和电子书阅读等操作。为了便于用户了解电子书客户端中的电子书、阅读活动或会员充值活动等内容，在电子书客户端的主页面的上方、中间等位置循环展示推广视图(banner视图)，在本发明中，banner视图包含分别在多个视图层显示的图片元素。视图能够通过用户滑动手势或轮播来进行移动。在步骤S101中，接收被触发的针对视图的移动事件。

具体地，视图可包含图片背景元素、图片主体场景元素和图片文本元素等图片元素，多个图片元素分别显示在多个视图层中。本领域技术人员可根据实际需要对多个视图层的数量、多个图片元素的具体内容和初始显示位置信息进行设置，此处不做限定。根据本发明提供的技术方案，能够方便地完成对各个视图层的设置，有效地减少了视图对外部环境的依赖，缩短了视图处理耗时。

步骤S102，根据移动事件，确定移动距离因数。

在接收到移动事件之后，可根据移动事件对应的移动位置等信息，确定移动距离因数。其中，移动距离因数是用于反映移动事件对应的移动距离的信息，具体地，可根据移动事件对应的实时的移动距离来确定移动距离因数。

步骤S103，根据移动距离因数，计算各个视图层待显示的图片元素的显示位置信息。

具体地，可根据移动距离因数以及各个视图层对应的移动算法等，对各个视图层待显示的图片元素的显示位置信息进行计算。本领域技术人员可根据实际需要对各个视图层对应的移动算法进行设置，此处不做限定。

步骤S104，响应于移动事件，根据各个视图层待显示的图片元素的显示位置信息，分别在各个视图层绘制相应的图片元素。

在计算得到各个视图层待显示的图片元素的显示位置信息之后，响应于移动事件，根据各个视图层待显示的图片元素的显示位置信息，分别在各个视图层中对相应的图片元素进行绘制。各个视图层待显示的图片元素的显示位置信息是根据移动事件的移动距离因数分别计算得到的，使得在各个视图层绘制相应的图片元素后，多个图片元素能够具有不同的移动效果，从而获得视图错层显示效果，有助于吸引用户注意力。

利用本实施例提供的视图错层显示方法，将视图的图片元素分别在多个视图层中进行显示，并且能够根据针对视图的移动事件的移动距离因数，计算各个视图层待显示的图片元素的显示位置信息，并根据显示位置信息分别在各个视图层绘制相应的图片元素，从而不仅方便地实现了视图的错层显示，极大地丰富了视图移动效果，有助于吸引用户注意力，有效地提升了内容推广的效果，而且还有效地减少了视图对外部环境的依赖，缩短了视图处理耗时，提高了视图处理效率。

实施例二

图2a示出了根据本发明实施例二的一种视图错层显示方法的流程示意图，如图2a所示，该方法包括如下步骤：

步骤S201，接收用户滑动手势所触发的针对视图的移动事件；或者，接收轮播定时到达所触发的针对视图的移动事件。

在电子书客户端中一般设置有精选、出版、会员、漫画、女生以及男生等多个分类页面，以便用户根据自身喜好选择分类页面进行查看。在各个分类页面的上方等位置循环展示多个视图，用于展示该分类中希望用户能够优先看到的内容。在本实施例中，利用视图控件ViewPager来管理多个视图，每个视图可包含分别在第一视图层显示的图片背景元素、在第二视图层显示的图片主体场景元素和/或在第三视图层显示的图片文本元素。图片主体场景元素为视图中重要的图片元素，图片主体场景元素的显示高度可大于图片背景元素的显示高度，以突显图片主体场景元素，获得较好的立体显示效果，从而实现突出展示视图的重点内容的目的。本领域技术人员可根据实际需要对视图所包含的图片元素、图片元素的具体内容以及初始显示位置信息进行设置，此处不做限定。

例如，在电子书客户端的精选分类页面中的上方位置循环展示多个视图，其中一个视图为视图1，视图1用于展示电子书《悟空传》的推广内容。对于视图1，视图1包含分别在第一视图层显示的图片背景元素10、在第二视图层显示的图片主体场景元素20和在第三视图层显示的图片文本元素30，视图1在电子书客户端中的初始显示示意图如图2b所示。其中，图片背景元素10为白色背景图片，图片主体场景元素20为悟空卡通人物形象图片，图片文本元素30为文本“《悟空传》与命运的抗争”，为了突显图片主体场景元素20，图片主体场景元素20的显示高度可大于图片背景元素10的显示高度，例如，悟空卡通人物形象图片中的头部超出白色背景图片。

多张视图能够通过用户滑动手势或轮播来进行移动。具体地，当用户想要移动视图时，可在终端设备的触摸显示屏上针对视图向左或向右滑动手势，那么在步骤S201中电子书客户端接收用户滑动手势所触发的针对视图的移动事件；或者，当轮播定时到达时，触发针对视图的移动事件，那么在步骤S201中电子书客户端接收轮播定时到达所触发的针对视图的移动事件。本领域技术人员可根据实际需要设置轮播定时，此时不做限定。例如，轮播定时可为3s。

步骤S202，根据移动事件对应的起始移动位置和当前移动位置，确定移动距离因数。

具体地，获取移动事件对应的起始移动位置和当前移动位置，根据所获取的起始移动位置和当前移动位置，计算移动事件对应的移动距离因数。例如，可根据起始移动位置和当前移动位置之间的像素点的数量来确定移动距离因数，也可根据起始移动位置和当前移动位置之间的移动距离与终端设备的触摸显示屏宽度的占比来确定移动距离因数。本领域技术人员可根据实际需要来确定移动距离因数，此处不做限定。

步骤S203，从视图层配置信息中获取各个视图层对应的移动算法。

其中，视图层配置信息中记录有各个视图层对应的图片元素的具体内容、图片元素的初始显示位置信息、视图层对应的移动算法等信息，那么可从视图层配置信息中获取各个视图层对应的移动算法，以便根据各个视图层对应的移动算法来计算各个视图层待显示的图片元素的显示位置信息。

在本实施例中，至少一个视图层对应的移动算法中的移动偏移参数与其它任一视图层对应的移动算法中的移动偏移参数不同，从而使得在多个视图层显示的图片元素能够具有不同的移动效果，获得视图错层显示效果，有助于吸引用户注意力。其中，各个视图层对应的移动算法中的移动偏移参数可以为固定的数值，也可以为随着时间发生变化的数值，本领域技术人员可根据实际需要对移动偏移参数进行设置，此处不做限定。

可选地，各个视图层对应的移动算法中的移动偏移参数可根据各个视图层的优先级进行设置，使得在优先级较高的视图层中所显示的图片元素能够较长时间的留在用户的视野中，吸引用户更多的注意力。

步骤S204，根据移动距离因数和各个视图层对应的移动算法中的移动偏移参数，计算各个视图层待显示的图片元素的显示位置信息。

具体地，可根据移动距离因数和各个视图层对应的移动算法中的移动偏移参数，计算各个视图层待显示的图片元素沿着移动事件对应的移动方向的移动距离，然后根据各个视图层待显示的图片元素的移动距离和图片元素的初始显示位置信息，确定各个视图层待显示的图片元素的显示位置信息。

在一个具体应用中，可将移动距离因数分别与各个视图层对应的移动算法中的移动偏移参数进行相乘运算，计算得到各个视图层待显示的图片元素沿着移动事件对应的移动方向的移动距离。假设移动距离因数为100个像素点，针对某一时间，第一视图层对应的移动算法中的移动偏移参数为0.5，第二视图层对应的移动算法中的移动偏移参数为0.2，第三视图层对应的移动算法中的移动偏移参数为0.4，那么在将移动距离因数分别与各个视图层对应的移动算法中的移动偏移参数进行相乘运算后得到，第一视图层待显示的图片背景元素沿着移动事件对应的移动方向的移动距离为50个像素点，第二视图层待显示的图片主体场景元素沿着移动事件对应的移动方向的移动距离为20个像素点，第三视图层待显示的图片文本元素沿着移动事件对应的移动方向的移动距离为40个像素点。

步骤S205，响应于移动事件，根据各个视图层待显示的图片元素的显示位置信息，分别在各个视图层绘制相应的图片元素。

在计算得到各个视图层待显示的图片元素的显示位置信息之后，响应于移动事件，根据各个视图层待显示的图片元素的显示位置信息，分别在各个视图层绘制相应的图片元素，具体地，分别在各个视图层中显示位置信息对应的显示区域内绘制相应的图片元素。假设，移动事件对应的移动方向为向右，那么绘制后的视图1的错层显示示意图可如图2c所示。

在本实施例中，通过视图层配置信息方便地完成了对各个视图层的设置，根据各个视图层对应的移动算法，就能够实现视图的移动与错层显示效果，有效地减少了视图对外部环境的依赖，缩短了视图处理耗时，提高了视图处理效率。

另外，由于各个视图层对应的移动算法中的移动偏移参数不同，那么很有可能会存在各个视图层的图片元素的显示区域重叠的情况，那么可在任意两个视图层的图片元素的显示区域存在重叠时，将优先级高的视图层的图片元素绘制在优先级低的视图层的图片元素的上面，从而优先将优先级高的视图层的图片元素显示给用户。

步骤S206，在指定两个视图层的图片元素之间的相对显示位置符合预设位置条件时，绘制预设动态效果。

为了进一步丰富视图显示效果，可根据指定两个视图层待显示的图片元素的显示位置信息，计算指定两个视图层的图片元素之间的相对显示位置，然后在指定两个视图层的图片元素之间的相对显示位置符合预设位置条件时，绘制预设动态效果。本领域技术人员可根据实际需要对预设位置条件和预设动态效果进行设置，此处不做限定。例如，预设动态效果可为撒花、烟花绽放等效果。

例如，预设位置条件为大于10个像素点且小于20个像素点，对于视图1，指定两个视图层为第二视图层和第三视图层，根据第二视图层待显示的图片主体场景元素20的显示位置信息和第三视图层待显示的图片文本元素30的显示位置信息，计算图片主体场景元素20和图片文本元素30之间的相对显示位置，在该对显示位置大于10个像素点且小于20个像素点时，在悟空卡通人物形象图片的头部的预设位置处绘制紧箍咒图片。

利用本实施例提供的视图错层显示方法，能够根据各个视图层对应的移动算法，精准地对各个视图层待显示的图片元素的显示位置信息进行计算，方便地实现了视图的错层显示，极大地丰富了视图移动效果，有助于吸引用户注意力；并且通过视图层配置信息即可方便地完成对各个视图层的设置，有效地减少了视图对外部环境的依赖，缩短了视图处理耗时；另外，在两个图片元素之间的相对显示位置符合预设位置条件时，还能够绘制预设动态效果，进一步丰富了视图显示效果，提升了内容推广的效果。

实施例三

图3示出了根据本发明实施例二的一种视图错层显示方法的流程示意图，如图3所示，该方法包括如下步骤：

步骤S301，接收用户滑动手势所触发的针对视图的移动事件；或者，接收轮播定时到达所触发的针对视图的移动事件。

在电子书客户端中的各个分类页面的上方等位置处循环展示多个推广内容，在本实施例中，直接利用一个视图来实现对多个推广内容的展示。具体地，视图包含多个推广内容对应的图片背景元素、图片主体场景元素和图片文本元素等图片元素，其中，图片背景元素显示在第一视图层中，图片主体场景元素显示在第二视图层中，图片文本元素显示在第三视图层中。图片主体场景元素的显示高度可大于对应的图片背景元素的显示高度，从而获得较好的立体显示效果。

例如，在电子书客户端的精选分类页面中的上方位置处循环展示两个推广内容，分别为推广内容1和推广内容2，其中，推广内容1用于推广电子书《悟空传》，推广内容2用于推广会员充值活动，推广内容1对应的图片元素包括图片背景元素10、图片主体场景元素20和图片文本元素30，推广内容2对应的图片元素包括图片背景元素11、图片主体场景元素21和图片文本元素31，那么视图包含分别在第一视图层显示的图片背景元素10和图片背景元素11、在第二视图层显示的图片主体场景元素20和图片主体场景元素21以及在第三视图层显示的图片文本元素30和图片文本元素31。其中，当展示的当前推广内容为推广内容1时，其在电子书客户端中的初始显示示意图可如图2b所示。

视图能够通过用户滑动手势或轮播来进行移动，将展示的当前推广内容切换为下一个推广内容。具体地，在步骤S301中，接收用户滑动手势所触发的针对视图的移动事件；或者，接收轮播定时到达所触发的针对视图的移动事件。

步骤S302，根据移动事件对应的起始移动位置和当前移动位置，确定移动距离因数。

具体地，可根据移动事件对应的起始移动位置和当前移动位置之间的像素点的数量来确定移动距离因数，也可根据起始移动位置和当前移动位置之间的移动距离与终端设备的触摸显示屏宽度的占比来确定移动距离因数。

步骤S303，判断移动距离因数是否符合预设因数范围；若是，则执行步骤S304；若否，则执行步骤S305。

在本实施例中利用一个视图来实现对多个推广内容的展示，为了避免在触摸显示屏中出现显示不完整的推广内容的情况，例如显示推广内容1的右半部分内容和推广内容2的左半部分内容，本发明还设置了预设因数范围和预设阻尼算法。本领域技术人员可根据实际需要对预设因数范围和预设阻尼算法进行具体设置，此处不做限定。例如，对于分辨率为1280×720的触摸显示屏，可将预设因数范围设置为300～360个像素点。

如果判断得到移动距离因数符合预设因数范围，说明需要利用预设阻尼算法来计算各个视图层待显示的图片元素的显示位置信息，则执行步骤S304；如果判断得到移动距离因数不符合预设因数范围，说明需要利用各个视图层对应的移动算法来计算各个视图层待显示的图片元素的显示位置信息，则执行步骤S305。

步骤S304，根据移动距离因数和预设阻尼算法，计算各个视图层待显示的图片元素的显示位置信息。

在移动距离因数符合预设因数范围的情况下，根据移动距离因数和预设阻尼算法，计算各个视图层待显示的图片元素的显示位置信息。本领域技术人员可根据实际需要对预设阻尼算法进行设置，此处不做限定。

步骤S305，从视图层配置信息中获取各个视图层对应的移动算法。

视图层配置信息中记录有各个视图层对应的图片元素的具体内容、图片元素的初始显示位置信息、视图层对应的移动算法等信息。在移动距离因数不符合预设因数范围的情况下，从视图层配置信息中获取各个视图层对应的移动算法。

其中，至少一个视图层对应的移动算法中的移动偏移参数与其它任一视图层对应的移动算法中的移动偏移参数不同，使得在多个视图层显示的图片元素能够具有不同的移动效果，从而实现视图的错层显示。可选地，各个视图层对应的移动算法中的移动偏移参数可根据各个视图层的优先级进行设置，使得在优先级较高的视图层中所显示的图片元素能够较长时间的留在用户的视野中。

步骤S306，根据移动距离因数和各个视图层对应的移动算法中的移动偏移参数，计算各个视图层待显示的图片元素的显示位置信息。

在步骤S306中，可根据移动距离因数和各个视图层对应的移动算法中的移动偏移参数，计算各个视图层待显示的图片元素沿着移动事件对应的移动方向的移动距离，然后根据各个视图层待显示的图片元素的移动距离和图片元素的初始显示位置信息，确定各个视图层待显示的图片元素的显示位置信息。

步骤S307，响应于移动事件，根据各个视图层待显示的图片元素的显示位置信息，分别在各个视图层绘制相应的图片元素。

在本实施例中，无需利用视图控件ViewPager，直接利用一个视图即可实现对多个推广内容的展示，并且通过视图层配置信息能够方便地完成对各个视图层的设置，根据预设阻尼算法和各个视图层对应的移动算法，就能够实现视图的移动与错层显示效果，进一步减少了视图对外部环境的依赖，缩短了视图处理耗时，提高了视图处理效率。

其中，由于各个视图层对应的移动算法中的移动偏移参数不同，那么很有可能会存在各个视图层的图片元素的显示区域重叠的情况，那么可在任意两个视图层的图片元素的显示区域存在重叠时，将优先级高的视图层的图片元素绘制在优先级低的视图层的图片元素的上面，从而优先将优先级高的视图层的图片元素显示给用户。

步骤S308，在指定两个视图层的图片元素之间的相对显示位置符合预设位置条件时，绘制预设动态效果。

具体地，可根据指定两个视图层待显示的图片元素的显示位置信息，计算指定两个视图层的图片元素之间的相对显示位置，然后在指定两个视图层的图片元素之间的相对显示位置符合预设位置条件时，绘制预设动态效果。例如，预设动态效果可为撒花、烟花绽放等效果。

利用本实施例提供的视图错层显示方法，能够根据预设阻尼算法和各个视图层对应的移动算法，精准地对各个视图层待显示的图片元素的显示位置信息进行计算，方便地实现了视图的错层显示，极大地丰富了视图移动效果，有助于吸引用户注意力；并且无需利用视图控件ViewPager，直接利用一个视图即可实现对多个推广内容的展示，通过视图层配置信息即可方便地完成对各个视图层的设置，进一步减少了视图对外部环境的依赖，缩短了视图处理耗时；另外，在两个图片元素之间的相对显示位置符合预设位置条件时，还能够绘制预设动态效果，进一步丰富了视图显示效果，提升了内容推广的效果。

实施例四

本发明实施例四提供了一种非易失性存储介质，存储介质存储有至少一可执行指令，该可执行指令可执行上述任意方法实施例中的视图错层显示方法。

可执行指令具体可以用于使得处理器执行以下操作：接收被触发的针对视图的移动事件；视图包含分别在多个视图层显示的图片元素；根据移动事件，确定移动距离因数；根据移动距离因数，计算各个视图层待显示的图片元素的显示位置信息；响应于移动事件，根据各个视图层待显示的图片元素的显示位置信息，分别在各个视图层绘制相应的图片元素。

在一种可选的实施方式中，可执行指令进一步使处理器执行以下操作：接收用户滑动手势所触发的针对视图的移动事件；或者，接收轮播定时到达所触发的针对视图的移动事件。

在一种可选的实施方式中，可执行指令进一步使处理器执行以下操作：根据移动事件对应的起始移动位置和当前移动位置，确定移动距离因数。

在一种可选的实施方式中，可执行指令进一步使处理器执行以下操作：从视图层配置信息中获取各个视图层对应的移动算法；根据移动距离因数和各个视图层对应的移动算法中的移动偏移参数，计算各个视图层待显示的图片元素的显示位置信息。

在一种可选的实施方式中，可执行指令进一步使处理器执行以下操作：判断移动距离因数是否符合预设因数范围；若是，则根据移动距离因数和预设阻尼算法，计算各个视图层待显示的图片元素的显示位置信息；若否，则从视图层配置信息中获取各个视图层对应的移动算法，并根据移动距离因数和各个视图层对应的移动算法中的移动偏移参数，计算各个视图层待显示的图片元素的显示位置信息。

在一种可选的实施方式中，可执行指令进一步使处理器执行以下操作：在任意两个视图层的图片元素的显示位置存在重叠时，将优先级高的视图层的图片元素绘制在优先级低的视图层的图片元素的上面。

在一种可选的实施方式中，可执行指令进一步使处理器执行以下操作：在指定两个视图层的图片元素之间的相对显示区域符合预设位置条件时，绘制预设动态效果。

在一种可选的实施方式中，视图包含分别在第一视图层显示的图片背景元素、在第二视图层显示的图片主体场景元素和/或在第三视图层显示的图片文本元素。

在一种可选的实施方式中，图片主体场景元素的显示高度大于图片背景元素的显示高度。

实施例五

图4示出了根据本发明实施例五的一种电子设备的结构示意图，本发明具体实施例并不对电子设备的具体实现做限定。

如图4所示，该电子设备可以包括：处理器(processor)402、通信接口(Communications Interface)404、存储器(memory)406、以及通信总线408。

其中：

处理器402、通信接口404、以及存储器406通过通信总线408完成相互间的通信。

通信接口404，用于与其它设备比如客户端或其它服务器等的网元通信。

处理器402，用于执行程序410，具体可以执行上述视图错层显示方法实施例中的相关步骤。

具体地，程序410可以包括程序代码，该程序代码包括计算机操作指令。

处理器402可能是中央处理器CPU，或者是特定集成电路ASIC(ApplicationSpecific Integrated Circuit)，或者是被配置成实施本发明实施例的一个或多个集成电路。电子设备包括的一个或多个处理器，可以是同一类型的处理器，如一个或多个CPU；也可以是不同类型的处理器，如一个或多个CPU以及一个或多个ASIC。

存储器406，用于存放程序410。存储器406可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。

程序410具体可以用于使得处理器402执行以下操作：接收被触发的针对视图的移动事件；视图包含分别在多个视图层显示的图片元素；根据移动事件，确定移动距离因数；根据移动距离因数，计算各个视图层待显示的图片元素的显示位置信息；响应于移动事件，根据各个视图层待显示的图片元素的显示位置信息，分别在各个视图层绘制相应的图片元素。

在一种可选的实施方式中，程序410进一步使得处理器402执行以下操作：接收用户滑动手势所触发的针对视图的移动事件；或者，接收轮播定时到达所触发的针对视图的移动事件。

在一种可选的实施方式中，程序410进一步使得处理器402执行以下操作：根据移动事件对应的起始移动位置和当前移动位置，确定移动距离因数。

在一种可选的实施方式中，程序410进一步使得处理器402执行以下操作：从视图层配置信息中获取各个视图层对应的移动算法；根据移动距离因数和各个视图层对应的移动算法中的移动偏移参数，计算各个视图层待显示的图片元素的显示位置信息。

在一种可选的实施方式中，程序410进一步使得处理器402执行以下操作：判断移动距离因数是否符合预设因数范围；若是，则根据移动距离因数和预设阻尼算法，计算各个视图层待显示的图片元素的显示位置信息；若否，则从视图层配置信息中获取各个视图层对应的移动算法，并根据移动距离因数和各个视图层对应的移动算法中的移动偏移参数，计算各个视图层待显示的图片元素的显示位置信息。

在一种可选的实施方式中，程序410进一步使得处理器402执行以下操作：在任意两个视图层的图片元素的显示区域存在重叠时，将优先级高的视图层的图片元素绘制在优先级低的视图层的图片元素的上面。

在一种可选的实施方式中，程序410进一步使得处理器402执行以下操作：在指定两个视图层的图片元素之间的相对显示位置符合预设位置条件时，绘制预设动态效果。

在一种可选的实施方式中，视图包含分别在第一视图层显示的图片背景元素、在第二视图层显示的图片主体场景元素和/或在第三视图层显示的图片文本元素。

在一种可选的实施方式中，图片主体场景元素的显示高度大于图片背景元素的显示高度。

程序410中各步骤的具体实现可以参见上述视图错层显示实施例中的相应步骤对应的描述，在此不赘述。所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的设备的具体工作过程，可以参考前述方法实施例中的对应过程描述，在此不再赘述。

通过本实施例提供的方案，能够根据针对视图的移动事件的移动距离因数，计算各个视图层待显示的图片元素的显示位置信息，并根据显示位置信息分别在各个视图层绘制相应的图片元素，从而不仅方便地实现了视图的错层显示，极大地丰富了视图移动效果，有助于吸引用户注意力，有效地提升了内容推广的效果，而且还有效地减少了视图对外部环境的依赖，缩短了视图处理耗时，提高视图处理效率。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

本发明公开了：A1.一种视图错层显示方法，所述视图包含分别在多个视图层显示的图片元素，所述方法包括：

接收被触发的针对所述视图的移动事件；

根据所述移动事件，确定移动距离因数；

根据所述移动距离因数，计算各个视图层待显示的图片元素的显示位置信息；

响应于所述移动事件，根据各个视图层待显示的图片元素的显示位置信息，分别在各个视图层绘制相应的图片元素。

A2.根据A1所述的方法，所述接收被触发的针对所述视图的移动事件进一步包括：

接收用户滑动手势所触发的针对所述视图的移动事件；或者，接收轮播定时到达所触发的针对所述视图的移动事件。

A3.根据A1或A2所述的方法，所述根据所述移动事件，确定移动距离因数进一步包括：

根据所述移动事件对应的起始移动位置和当前移动位置，确定移动距离因数。

A4.根据A1-A3任一项所述的方法，所述根据所述移动距离因数，计算各个视图层待显示的图片元素的显示位置信息进一步包括：

从视图层配置信息中获取各个视图层对应的移动算法；

根据所述移动距离因数和各个视图层对应的移动算法中的移动偏移参数，计算各个视图层待显示的图片元素的显示位置信息。

A5.根据A1-A3任一项所述的方法，所述根据所述移动距离因数，计算各个视图层待显示的图片元素的显示位置信息进一步包括：

判断所述移动距离因数是否符合预设因数范围；

若是，则根据所述移动距离因数和预设阻尼算法，计算各个视图层待显示的图片元素的显示位置信息；

若否，则从视图层配置信息中获取各个视图层对应的移动算法，并根据所述移动距离因数和各个视图层对应的移动算法中的移动偏移参数，计算各个视图层待显示的图片元素的显示位置信息。

A6.根据A1-A5任一项所述的方法，所述响应于所述移动事件，根据各个视图层待显示的图片元素的显示位置信息，分别在各个视图层绘制相应的图片元素进一步包括：

在任意两个视图层的图片元素的显示区域存在重叠时，将优先级高的视图层的图片元素绘制在优先级低的视图层的图片元素的上面。

A7.根据A1-A6任一项所述的方法，在所述响应于所述移动事件，根据各个视图层待显示的图片元素的显示位置信息，分别在各个视图层绘制相应的图片元素之后，所述方法还包括：

在指定两个视图层的图片元素之间的相对显示位置符合预设位置条件时，绘制预设动态效果。

A8.根据A1-A7任一项所述的方法，所述视图包含分别在第一视图层显示的图片背景元素、在第二视图层显示的图片主体场景元素和/或在第三视图层显示的图片文本元素。

A9.根据权利要求A8所述的方法，所述图片主体场景元素的显示高度大于所述图片背景元素的显示高度。

本发明还公开了：B10.一种电子设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；

所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行以下操作：

接收被触发的针对所述视图的移动事件；所述视图包含分别在多个视图层显示的图片元素；

根据所述移动事件，确定移动距离因数；

根据所述移动距离因数，计算各个视图层待显示的图片元素的显示位置信息；

响应于所述移动事件，根据各个视图层待显示的图片元素的显示位置信息，分别在各个视图层绘制相应的图片元素。

B11.根据B10所述的电子设备，所述可执行指令进一步使所述处理器执行以下操作：

接收用户滑动手势所触发的针对所述视图的移动事件；或者，接收轮播定时到达所触发的针对所述视图的移动事件。

B12.根据B10或B11所述的电子设备，所述可执行指令进一步使所述处理器执行以下操作：

根据所述移动事件对应的起始移动位置和当前移动位置，确定移动距离因数。

B13.根据B10-B12任一项所述的电子设备，所述可执行指令进一步使所述处理器执行以下操作：

从视图层配置信息中获取各个视图层对应的移动算法；

根据所述移动距离因数和各个视图层对应的移动算法中的移动偏移参数，计算各个视图层待显示的图片元素的显示位置信息。

B14.根据B10-B12任一项所述的电子设备，所述可执行指令进一步使所述处理器执行以下操作：

判断所述移动距离因数是否符合预设因数范围；

若是，则根据所述移动距离因数和预设阻尼算法，计算各个视图层待显示的图片元素的显示位置信息；

若否，则从视图层配置信息中获取各个视图层对应的移动算法，并根据所述移动距离因数和各个视图层对应的移动算法中的移动偏移参数，计算各个视图层待显示的图片元素的显示位置信息。

B15.根据B10-B14任一项所述的电子设备，所述可执行指令进一步使所述处理器执行以下操作：

在任意两个视图层的图片元素的显示区域存在重叠时，将优先级高的视图层的图片元素绘制在优先级低的视图层的图片元素的上面。

B16.根据B10-B15任一项所述的电子设备，所述可执行指令进一步使所述处理器执行以下操作：

在指定两个视图层的图片元素之间的相对显示位置符合预设位置条件时，绘制预设动态效果。

B17.根据B10-B16任一项所述的电子设备，所述视图包含分别在第一视图层显示的图片背景元素、在第二视图层显示的图片主体场景元素和/或在第三视图层显示的图片文本元素。

B18.根据B17所述的电子设备，所述图片主体场景元素的显示高度大于所述图片背景元素的显示高度。

本发明还公开了：C19.一种存储介质，所述存储介质中存储有至少一可执行指令，所述可执行指令使处理器执行以下操作：

接收被触发的针对所述视图的移动事件；所述视图包含分别在多个视图层显示的图片元素；

根据所述移动事件，确定移动距离因数；

根据所述移动距离因数，计算各个视图层待显示的图片元素的显示位置信息；

响应于所述移动事件，根据各个视图层待显示的图片元素的显示位置信息，分别在各个视图层绘制相应的图片元素。

C20.根据C19所述的存储介质，所述可执行指令进一步使所述处理器执行以下操作：

接收用户滑动手势所触发的针对所述视图的移动事件；或者，接收轮播定时到达所触发的针对所述视图的移动事件。

C21.根据C19或C20所述的存储介质，所述可执行指令进一步使所述处理器执行以下操作：

根据所述移动事件对应的起始移动位置和当前移动位置，确定移动距离因数。

C22.根据C19-C21任一项所述的存储介质，所述可执行指令进一步使所述处理器执行以下操作：

从视图层配置信息中获取各个视图层对应的移动算法；

根据所述移动距离因数和各个视图层对应的移动算法中的移动偏移参数，计算各个视图层待显示的图片元素的显示位置信息。

C23.根据C19-C21任一项所述的存储介质，所述可执行指令进一步使所述处理器执行以下操作：

判断所述移动距离因数是否符合预设因数范围；

若是，则根据所述移动距离因数和预设阻尼算法，计算各个视图层待显示的图片元素的显示位置信息；

若否，则从视图层配置信息中获取各个视图层对应的移动算法，并根据所述移动距离因数和各个视图层对应的移动算法中的移动偏移参数，计算各个视图层待显示的图片元素的显示位置信息。

C24.根据C19-C23任一项所述的存储介质，所述可执行指令进一步使所述处理器执行以下操作：

在任意两个视图层的图片元素的显示区域存在重叠时，将优先级高的视图层的图片元素绘制在优先级低的视图层的图片元素的上面。

C25.根据C19-C24任一项所述的存储介质，所述可执行指令进一步使所述处理器执行以下操作：

在指定两个视图层的图片元素之间的相对显示位置符合预设位置条件时，绘制预设动态效果。

C26.根据C19-C25任一项所述的存储介质，所述视图包含分别在第一视图层显示的图片背景元素、在第二视图层显示的图片主体场景元素和/或在第三视图层显示的图片文本元素。

C27.根据C26所述的存储介质，所述图片主体场景元素的显示高度大于所述图片背景元素的显示高度。

Claims (10)

1.一种视图错层显示方法，所述视图包含分别在多个视图层显示的图片元素，所述方法包括：

接收被触发的针对所述视图的移动事件；

根据所述移动事件，确定移动距离因数；

根据所述移动距离因数，计算各个视图层待显示的图片元素的显示位置信息；

响应于所述移动事件，根据各个视图层待显示的图片元素的显示位置信息，分别在各个视图层绘制相应的图片元素。

2.根据权利要求1所述的方法，所述接收被触发的针对所述视图的移动事件进一步包括：

接收用户滑动手势所触发的针对所述视图的移动事件；或者，接收轮播定时到达所触发的针对所述视图的移动事件。

3.根据权利要求1或2所述的方法，所述根据所述移动事件，确定移动距离因数进一步包括：

根据所述移动事件对应的起始移动位置和当前移动位置，确定移动距离因数。

4.根据权利要求1-3任一项所述的方法，所述根据所述移动距离因数，计算各个视图层待显示的图片元素的显示位置信息进一步包括：

从视图层配置信息中获取各个视图层对应的移动算法；

根据所述移动距离因数和各个视图层对应的移动算法中的移动偏移参数，计算各个视图层待显示的图片元素的显示位置信息。

5.根据权利要求1-3任一项所述的方法，所述根据所述移动距离因数，计算各个视图层待显示的图片元素的显示位置信息进一步包括：

判断所述移动距离因数是否符合预设因数范围；

若是，则根据所述移动距离因数和预设阻尼算法，计算各个视图层待显示的图片元素的显示位置信息；

若否，则从视图层配置信息中获取各个视图层对应的移动算法，并根据所述移动距离因数和各个视图层对应的移动算法中的移动偏移参数，计算各个视图层待显示的图片元素的显示位置信息。

6.根据权利要求1-5任一项所述的方法，所述响应于所述移动事件，根据各个视图层待显示的图片元素的显示位置信息，分别在各个视图层绘制相应的图片元素进一步包括：

在任意两个视图层的图片元素的显示区域存在重叠时，将优先级高的视图层的图片元素绘制在优先级低的视图层的图片元素的上面。

7.根据权利要求1-6任一项所述的方法，在所述响应于所述移动事件，根据各个视图层待显示的图片元素的显示位置信息，分别在各个视图层绘制相应的图片元素之后，所述方法还包括：

在指定两个视图层的图片元素之间的相对显示位置符合预设位置条件时，绘制预设动态效果。

8.根据权利要求1-7任一项所述的方法，所述视图包含分别在第一视图层显示的图片背景元素、在第二视图层显示的图片主体场景元素和/或在第三视图层显示的图片文本元素。

9.一种电子设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；

所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行以下操作：

接收被触发的针对所述视图的移动事件；所述视图包含分别在多个视图层显示的图片元素；

根据所述移动事件，确定移动距离因数；

根据所述移动距离因数，计算各个视图层待显示的图片元素的显示位置信息；

响应于所述移动事件，根据各个视图层待显示的图片元素的显示位置信息，分别在各个视图层绘制相应的图片元素。

10.一种存储介质，所述存储介质中存储有至少一可执行指令，所述可执行指令使处理器执行以下操作：

接收被触发的针对所述视图的移动事件；所述视图包含分别在多个视图层显示的图片元素；

根据所述移动事件，确定移动距离因数；

根据所述移动距离因数，计算各个视图层待显示的图片元素的显示位置信息；

响应于所述移动事件，根据各个视图层待显示的图片元素的显示位置信息，分别在各个视图层绘制相应的图片元素。