CN115167729A - 界面展示方法、装置及电子设备 - Google Patents

Abstract

本申请实施例公开了界面展示方法、装置及电子设备，所述方法包括：接收展示目标界面的请求；获取所述目标界面的界面数据；根据所述界面数据对所述目标界面进行展示，所述目标界面中包括背景图像动画，所述背景图像动画中包括按照预置的方式进行运动的氛围元素，其中，在所述氛围元素运动过程中，根据所述目标界面中的目标前景界面元素的位置信息，提供所述氛围元素与所述目标前景界面元素进行交互的动画效果。通过本申请实施例，能够使得氛围元素更加真实、细腻，提升氛围的烘托效果。

Description

界面展示方法、装置及电子设备

技术领域

本申请涉及界面展示技术领域，特别是涉及界面展示方法、装置及电子设备。

背景技术

页面背景对于烘托氛围等方面发挥着重要作用。在进行页面背景设计时，传统的方案是，采用渐变、图案、图片、纯色或纹理等方式来进行平铺或重复以填充页面。为了进一步提升页面背景在吸引用户注意等方面的作用，现有技术中还可以采用动态图像作为页面背景，包括动图等氛围元素。但是，无论是以静态图像还是以动态图像作为氛围元素，由于都需要以背景的形式存在，会受到前景中界面元素的遮挡等影响，因此，可能会存在不够生动等问题，以至于具体的氛围元素在烘托氛围方面的效果上会受到影响。

发明内容

本申请提供了界面展示方法、装置及电子设备，能够使得氛围元素更加真实、细腻，提升氛围的烘托效果。

本申请提供了如下方案：

一种界面展示方法，包括：

接收展示目标界面的请求；

获取所述目标界面的界面数据；

根据所述界面数据对所述目标界面进行展示，所述目标界面中包括背景图像动画，所述背景图像动画中包括按照预置的方式进行运动的氛围元素，其中，在所述氛围元素运动过程中，根据所述目标界面中的目标前景界面元素的位置信息，提供所述氛围元素与所述目标前景界面元素进行交互的动画效果。

一种界面展示装置，包括：

请求接收单元，用于接收展示目标界面的请求；

界面数据获取单元，用于获取所述目标界面的界面数据；

展示单元，用于根据所述界面数据对所述目标界面进行展示，所述目标界面中包括背景图像动画，所述背景图像动画中包括按照预置的方式进行运动的氛围元素，其中，在所述氛围元素运动过程中，根据所述目标界面中的目标前景界面元素的位置信息，提供所述氛围元素与所述目标前景界面元素进行交互的动画效果。

一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现前述任一项所述的方法的步骤。

一种电子设备，包括：

一个或多个处理器；以及

与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时，执行前述任一项所述的方法的步骤。

根据本申请提供的具体实施例，本申请公开了以下技术效果：

通过本申请实施例，在展示目标界面时，可以在目标界面中提供背景图像动画，其中，背景图像动画中可以包括按照预置的方式进行运动的氛围元素，并且，在所述氛围元素运动过程中，可以根据所述目标界面中的目标前景界面元素的位置信息，提供所述氛围元素与所述目标前景界面元素进行交互的动画效果。这样，由于背景图像中的氛围元素能够与目标前景界面元素进行交互，因此，前景界面元素的存在，反而能够起到帮助氛围元素更好地烘托氛围的作用，使得氛围元素看上去更加真实和细腻，用户体验也更加生动。

当然，实施本申请的任一产品并不一定需要同时达到以上所述的所有优点。

附图说明

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

图1是本申请实施例提供的系统架构的示意图；

图2是本申请实施例提供的方法的流程图；

图3是本申请实施例提供的氛围元素设计模板的示意图；

图4是本申请实施例提供的界面展示结果的示意图；

图5是本申请实施例提供的装置的示意图；

图6是本申请实施例提供的电子设备的示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员所获得的所有其他实施例，都属于本申请保护的范围。

首先需要说明的是，本申请发明人在实现本申请的过程中发现，对于一些应用程序(App)而言，用户的使用频率可能并不是很高，但是，每次使用时的目的通常是比较明确的。例如，某App主要针对用户的旅游、出行等场景提供相应的服务，包括机票、火车票、酒店等的预定，相关旅游产品的购买等等。由于在人们的日常生活中，旅行、出行等行为属于比较低频的行为，大部分用户主要是将这种App作为预订工具。同时，旅行等又具有极强的体验属性，因此，可以在用户每次打开App时，将应景的旅行画面以更生动的形式呈现在用户眼前，以此唤起用户对旅行的期待，同时可以提升对App的记忆与好感。

为了达到上述目的，本申请实施例提供了新的界面背景展示方案。在该方案中，可以在App首页等界面中选定一目标区域，例如，可以是用于对一些常用的操作选项或者控件等进行展示的顶部区域等，然后，可以在该目标区域内提供动画背景图像。也即，该区域内的背景图像可以是动画，这种动画背景中可以包括一些按照一定方式运动的氛围元素，例如，可以是“雪花”、“雨滴”，等等。并且，在本申请实施例中，在这种氛围元素运动的过程中，还可以与前景中具体的界面元素进行交互，例如，可以提供氛围元素到达界面元素的边界位置时，在该边界位置处进行反馈的动画效果。具体如，背景中的“雪花”元素向下飘落的过程中，如果到达某个界面元素的某条边界所在的位置处，则可以在该边界位置处提供“雪花堆积”在具体界面元素上的效果；或者，背景中的“雨滴”元素在向下飘落的过程中，如果到达某个界面元素的某条边界所在的位置处，则可以在该边界位置处提供“雨滴飞溅”的效果，等等。这样，通过背景中的氛围元素与前景中的具体界面元素能实现真实的交互效果，因此，氛围的表达会更加真实和细腻，用户的体感更生动。

具体实现时，为了达到上述目的可以有多种实现方式。例如，可以预先设计多个氛围元素，并将其运动方式写在界面代码中，另外还可以在界面代码中定义具体氛围元素运动过程中与前景中的界面元素之间的互动方式，由客户端通过执行对应界面代码的方式来展示出具体的互动效果。但是，这种方式下，一方面实现起来可能会比较复杂，增加客户端的处理负荷，对具体终端设备的性能等要求可能也会比较高。另一方面，在不同的时间、季节、节假日等可能需要对具体背景图像动画中的氛围元素及其运动方式、交互效果等进行修改，此时，如果将氛围元素的运动方式、交互方式写在界面代码中，则意味着需要对界面代码进行频繁的修改，该过程的实现成本会比较高。再者，每个氛围元素分别进行运动方式以及互动方式的设计，也可能使得动画背景图像的整体性被破坏，从整体上烘托某种具体氛围的作用可能会被削弱。

因此，本申请实施例还提供了一种优选的实施方式，在该方式下，可以直接在背景图像动画中对各种氛围元素的运动方式、交互方式等进行设计。也即，具体生成的动画中，已经包含了具体的“雪花”、“雨滴”等氛围元素，并且已经能够在运动到该动画图像的某条边界(例如，下边界)的位置处时，体现出“堆积”、“飞溅”等动画效果。之后，通过将该动画配置到目标界面中的指定位置，即可实现具体的氛围元素与目标界面中前景界面元素进行交互的效果。其中，这里的指定位置就可以是根据具体需要交互的前景界面元素在所述目标界面中的位置进行确定的。例如，假设以某个前景界面元素所在资源位的某条边界(例如，上边界)作为交互位置，则可以将背景图像动画展示在该前景界面元素所在资源位上边界的上方，使得背景图像动画的下边界，与该前景界面元素所在资源位上边界重合。这样，具体动画中氛围元素与动画图像下边界的互动，会表现为该氛围元素与前景界面元素所在资源位上边界的互动。通过这种方式，只需要在界面代码中设定背景图像动画与前景界面元素之间的相对位置关系，然后客户端按照该相对位置关系，对背景图像动画以及其他的界面元素进行展示即可，而不必在展示过程中，分别对各个氛围元素的运动位置等进行判断。

另外，具体背景图像动画还可以是可配置的，例如，在不同的时间、不同的季节、不同的节假日等，可以利用不同的背景图像动画来烘托出不同的氛围。因此，可以仅在界面代码中指定背景图像动画与目标前景界面元素所在资源位之间的相对位置关系信息，而不需要指定具体是哪个背景图像动画。具体的背景图像动画可以通过另外的配置文件进行指定，也即，客户端可以从界面代码中获取到上述相对位置信息，从配置文件中确定出具体展示哪个背景图像动画，然后按照具体的相对位置信息，对确定出的背景图像动画进行展示即可。

从系统架构角度而言，参见图1，针对前述直接在背景图像动画中进行氛围元素的运动方式、交互方式的设计的情况下，首先可以根据目标界面中前景界面元素的情况，确定出适合于氛围元素互动的目标前景界面元素，然后，可以根据该界面元素在目标界面中的位置信息，提供具体的设计模板。在该设计模板中可以指定所需背景图像动画的尺寸以及与目标前景界面元素之间的相对位置等信息。之后，动画设计师可以通过具体的动画制作工具，按照对应的尺寸，进行背景图像动画的设计，在设计的过程中，对氛围元素的运动方式、交互效果等进行设计。完成设计之后，可以导出为具体的动画文件，保存到数据库中。之后，可以通过界面配置系统，将导出的动画文件的链接地址配置到具体的目标界面中。在配置时，还可以对具体动画的展示时效、条件等进行配置。另一方面，还可以由代码工程师在界面代码中，设定背景图像动画与目标前景界面元素之间的相对位置关系。这样，在客户端具体对目标界面进行展示时，就可以从服务端或者本地缓存中获取到具体的界面数据，其中包括前述界面代码，从中获知前述相对位置信息，另外可以从配置信息中获取到具体的背景图像动画的链接地址等信息，进而可以从数据库对背景图像动画进行加载，并按照前述相对位置信息进行展示即可。

下面对本申请实施例提供的具体实现方案进行详细介绍。

首先，本申请实施例从前述图1所示的客户端的角度，提供了一种界面展示方法，参见图2，该方法具体可以包括：

S201：接收展示目标界面的请求。

其中，目标界面可以有多种，例如，一种情况下，可以是某App的首页，或者，也可以是具体App中某个功能模块、主题的首页，或者其他具有氛围表达需求的界面。

S202：获取所述目标界面的界面数据。

在接收到具体的展示请求后，可以获取到对应的界面数据。其中，具体可以从服务端获取界面数据，或者，如果该目标界面近期被展示过，则也可以从终端设备本地的缓存中读取具体的界面数据，等等。其中，具体的界面数据就可以包括界面代码，其中主要可以对各种界面元素的排版方式等进行定义，在本申请实施例中，具体就可以包括背景图像动画在界面中的位置等信息，该位置可以根据具体需要与之交互的目标前景界面元素的位置而进行指定，例如，某前景界面元素上边界的上方，等等。另外，具体的界面数据还可以包括界面配置信息，例如，关于本申请实施例中的背景图像动画，可能会随着时间、季节等的不同而发生变化，为了避免在发生这种变化时，对界面代码进行修改，可以通过单独的配置中心的方式，对具体使用的动画的链接地址等进行配置。这样，在界面代码中不需要指定具体是哪个动画，而是通过参数的方式进行表达即可。例如，在界面代码中通过“X”来代表背景图像动画，并在代码中指定“X”相对于某个前景界面元素的位置，然后在配置文件中指定“X＝*****”，其中“*****”可以代表具体背景图像动画的链接地址。

S203：根据所述界面数据对所述目标界面进行展示，所述目标界面中包括背景图像动画，所述背景图像动画中包括按照预置的方式进行运动的氛围元素，其中，在所述氛围元素运动过程中，根据所述目标界面中的目标前景界面元素所在资源位的位置信息，提供所述氛围元素与所述资源位进行交互的动画效果。

在获取到具体的界面数据之后，可以根据界面数据对目标界面进行展示，例如，具体可以是对某App的首页等。在展示该目标界面时，就可以预先配置好的背景图像动画进行展示，其中，这种背景图像动画中可以包括按照预置的方式进行运动的氛围元素，其中，在所述氛围元素运动过程中，根据所述目标界面中的目标前景界面元素所在资源位的位置信息，提供所述氛围元素与所述资源位进行交互的动画效果。例如，一种具体的实现方式下，可以提供所述氛围元素运动到所述资源位的第一目标边界时，与所述第一目标边界进行碰撞后做出反馈的动画效果。

具体的，前述背景图像动画可以是预先进行制作的，并按照目标前景界面元素的位置，配置到目标界面中。如前文所述，为了达到上述目的，可以根据具体需要参与交互的目标前景界面元素在目标界面中的位置，确定出背景图像动画的尺寸以及位置等信息，并生成设计模板，这样，可以按照该交互模板来进行背景图像动画的设计，以及界面代码的编辑。

其中，与氛围相关的背景元素可以仅在目标界面中的某个区域范围内进行展示，例如，一种方式下，如图3所示，具体的氛围相关的背景元素可以在31所示的区域内进行展示。31所示的区域具体可以是目标界面的顶部区域，并且，该区域内通常用于展示一些常用的操作选项或者控件、功能选项等，这些选项或者控件的功能通常是比较固定的，用户对于该区域内各选项或控件具有比较明确的心智。例如，在图3所示的界面中，31所示的区域内，具体的选项或者控件可以包括搜索框，“酒店”、“机票”等常驻功能模块的入口选项，等等。这样，即使在该区域内增加一些与氛围元素，并且与具体的选项、控件等前景界面元素进行交互，也不容易受到这些氛围元素的干扰。

在确定出前述区域范围之后，可以在该区域范围内确定出用于与氛围元素交互的目标前景界面元素。例如，在图3所示的目标界面中，可以将31所示区域范围内32所示的前景界面元素作为用于与氛围元素交互的前景界面元素。其中，该32所示的界面元素具体可以是一个面板类的元素，在该面板上展示出常驻的“酒店”、“机票”、“火车票”等主要功能模块的入口选项。由于该面板类界面元素的尺寸通常比较大，因此，更适合与氛围元素进行交互，并提供对应的交互效果。当然，在具体实现时，还可以将前述搜索框，或者具体功能模块的入口选项作为目标前景界面元素用于与氛围元素进行交互，等等。

在确定出上述目标前景界面元素之后，可以根据该目标前景界面元素所在的位置，设定背景图像动画的展示位置以及尺寸等信息，以便在代码编辑工具中对背景图像动画的位置进行设定，并按照对应的尺寸，在动画制作工具中进行背景图像动画的制作。

这里需要说明的是，在具体实现时，由于背景图像动画的加载及展示等可能需要一定的时间，因此，为了避免在加载过程中具体区域内的背景变成空白，除了设计背景图像动画，还可以设计静态背景图像，具体可以是一张图片。可以将静态背景图像配置在背景图像动画的下层，这样，在具体展示出背景图像动画之前，可以将这种静态背景图像进行展示，在背景图像动画加载完成后，可以将其展示在静态背景图像的上层，等等。

另外，关于静态背景图像，同样可以起到烘托氛围的作用，例如，在具体设计时，可以首先按照具体氛围的需求，设计静态背景图像，然后再从静态背景图像中拆分出多个图像元素，为这些图像元素设计出动画效果。例如，静态背景图像中有一棵树，树上有一些花朵，在设计背景图像动画时，可以拆分出多条树枝、花瓣等图像元素，然后为这些图像元素设计动画效果，包括树枝摆动，花瓣飘落等。这样，在从背景图像动画覆盖到静态背景图像的上层进行展示时，也会过渡更自然，避免出现跳跃感。另外，具体的背景图像动画的尺寸可以比较小，通过与更大尺寸的静态背景图像相配合，组成完整的氛围元素。

也就是说，具体的氛围元素有较大尺寸的静态背景图像以及较小尺寸的背景图像动画组成。例如，如图3(B)所示，其示出了静态背景图像相对于目标界面的尺寸，背景图像动画的高度可以小于该静态背景图像的高度，并且可以叠加在静态背景图像的上层进行展示。另外，在具体对静态背景图像进行设计时，还可以将静态背景图像分为上下两部分分别进行设计。例如，可以以搜索框的下边界所在的位置为分界线，将静态背景图像分为上下两部分，如图3(C)、(D)所示，分别对应了上下两部分相对于目标界面的尺寸信息。另外图3(E)示出了背景图像动画的尺寸。按照这种尺寸信息分别设计出静态背景图像的上下部分，以及背景图像动画之后，可以配置到具体的目标界面中，并将图3(B)所示的尺寸、位置、上下层关系信息写在界面代码中。例如，具体的位置可以为：静态背景图像的上部分从搜索框下边界开始向上展示，静态背景图像的下部分从搜索框下边界开始向下展示，背景图像动画从图3(A)中32所示的面板的上边界开始向上展示，并叠加在静态背景图像的上层，等等。

如前文所述，为了降低客户端的负荷，也为了增强氛围元素在整体上的一致性，可以直接在动画背景图像中，提供所述氛围元素运动到所述动画背景图像的第二目标边界时，与所述第二目标边界进行碰撞后做出反馈的动画效果。具体实现时，为了达到上述目的，可以利用动画制作工具，在包含前景界面元素的空间内设计氛围效果，包括“雪花飘落”等，并在上述空间内设定氛围元素无法通过的区域，例如，前述面板类的界面元素所在的区域等。然后，设计氛围元素与这个区域的交互方式，比如“雪花堆积”，“雨滴飞溅”等。完成氛围元素的运动，以及与前景界面元素反馈的动画制作之后，可以将制作好的动画导出，但是去除其中的前景界面元素(氛围元素像是和空气墙发生交互一样)。另外，该动画的尺寸可以是与前述设计模板中的尺寸对应的。之后，将这份不包含前景界面元素的动画素材配置在目标界面中，通过界面代码中关于位置信息的设定，使得该动画素材在目标界面中的展示位置与目标前景界面元素的位置对齐。

在上述直接在背景图像动画中设计了氛围元素的运动方式以及交互方式的情况下，还可以在界面数据中包括关于所述动画背景图像的展示位置的排版代码信息，所述展示位置信息通过与所述第一目标边界的相对位置关系进行描述，以使得所述第二目标边界与所述第一目标边界重合。也就是说，假设目标前景界面元素是图3(A)中32所示的面板元素，具体交互的位置是该面板元素的上边界，则可以将背景图像动画的展示位置设定为：从该面板元素的上边界开始向上进行展示，也即，使得背景图像动画的下边界与面板元素的上边重合，这样，就会使得最终展示出的界面中，看起来像是具体的氛围元素与面板元素的上边界进行交互一样。在这种情况下，客户端具体在根据所述界面数据对所述目标界面进行展示时，可以根据所述目标前景界面元素的第一目标边界在所述目标界面中的位置信息，以及所述排版代码信息中的所述相对位置信息，对所述动画背景图像进行展示。例如，具体的展示效果可以如图4所示，在其中的背景图像动画中包括“雨滴”、“花瓣”等氛围元素，这种氛围元素在动画中运动的过程中，可以在41所示的位置处，提供氛围元素与下方的面板元素进行交互的动画效果，包括“雨滴飞溅”、“花瓣堆积”等效果，以此使得用户获得关于“雨滴落下”、“花瓣落下”过程更真实的体验。

另外，通过在界面代码中指定具体背景图像动画与目标前景界面元素之间的相对位置关系，还可以实现具体背景图像动画在各种不同机型上展示时的适配，避免产生在不同屏幕尺寸的机型上展示时，背景图像动画与目标前景界面元素无法对齐的问题。

当然，具体实现时，同一目标界面关联的所述动画背景图像可能有多份，分别对应不同的展示条件，所述展示条件与当前所处的季节、月份、时间、节假日和/或用户的个性化信息等相关。此时，可以通过提供配置中心的方式，对具体的动画背景图像以及对应的展示时效等条件信息进行配置。这样，客户端可以从上述配置中心获取具体的配置信息，从中确定出具体需要展示的背景图像动画的链接地址，然后从该链接地址加载背景图像动画，再按照代码中的位置信息，对该背景动画图像进行展示。

需要说明的是，在实际应用中，具体的目标界面可以是普通的2D界面，或者，目标界面还可以是基于3D引擎展示的3D空间界面，此时，所述氛围元素运动过程中，可以根据所述目标区域中的目标前景界面元素在所述3D空间中的目标边界位置，提供在所述目标边界位置处对所述氛围元素的到达进行反馈的动画效果。

总之，通过本申请实施例，在展示目标界面时，可以在目标界面中提供背景图像动画，其中，背景图像动画中可以包括按照预置的方式进行运动的氛围元素，并且，在所述氛围元素运动过程中，可以根据所述目标界面中的目标前景界面元素的位置信息，提供所述氛围元素与所述目标前景界面元素进行交互的动画效果。这样，由于背景图像中的氛围元素能够与目标前景界面元素进行交互，因此，前景界面元素的存在，反而能够起到帮助氛围元素更好地烘托氛围的作用，使得氛围元素看上去更加真实和细腻，用户体验也更加生动。

需要说明的是，本申请实施例中可能会涉及到对用户数据的使用，在实际应用中，可以在符合所在国的适用法律法规要求的情况下(例如，用户明确同意，对用户切实通知，等)，在适用法律法规允许的范围内在本文描述的方案中使用用户特定的个人数据。

与前述方法实施例相对应，本申请实施例还提供了一种界面展示装置，参见图5，该装置可以包括：

请求接收单元501，用于接收展示目标界面的请求；

界面数据获取单元502，用于获取所述目标界面的界面数据；

展示单元503，用于根据所述界面数据对所述目标界面进行展示，所述目标界面中包括背景图像动画，所述背景图像动画中包括按照预置的方式进行运动的氛围元素，其中，在所述氛围元素运动过程中，根据所述目标界面中的目标前景界面元素的位置信息，提供所述氛围元素与所述目标前景界面元素进行交互的动画效果。

具体的，所述展示单元具体可以用于：

提供所述氛围元素运动到所述目标前景界面元素的第一目标边界时，与所述第一目标边界进行碰撞后做出反馈的动画效果。

具体实现时，可以在所述动画背景图像中，提供所述氛围元素运动到所述动画背景图像的第二目标边界时，与所述第二目标边界进行碰撞后做出反馈的动画效果；

此时，所述界面数据中包括关于所述动画背景图像的展示位置的排版代码信息，所述展示位置信息通过与所述第一目标边界的相对位置关系进行描述，以使得所述第二目标边界与所述第一目标边界重合；

所述展示单元具体可以用于：

根据所述目标前景界面元素的第一目标边界在所述目标界面中的位置信息，以及所述排版代码信息中的所述相对位置信息，对所述动画背景图像进行展示。

另外，所述目标界面关联的界面数据还可以包括界面配置信息，所述界面配置信息中包括多份所述动画背景图像的链接地址，以及分别对应不同的展示条件，所述展示条件与当前所处的季节、月份、时间、节假日和/或用户的个性化信息相关；

此时，所述展示单元具体可以用于：

从所述配置信息中获得符合展示条件的动画背景图像的链接地址；通过所述链接地址进行动画背景图像的加载以及展示。

其中，所述目标前景界面元素包括：位于所述目标界面中顶部区域，功能相对固定的前景界面元素。

另外，所述动画背景图像的下层还可以关联有静态背景图像；

此时，所述展示单元具体可以用于：

在所述目标区域中渲染展示出所述背景图像动画之前，对所述静态背景图像进行展示。

其中，所述背景图像动画可以是对所述静态背景图像中包括的图像元素进行拆分，并对拆分出的图像元素进行动画设计后，生成所述氛围元素。

其中，所述目标界面包括基于3D引擎展示的3D空间界面，所述氛围元素运动过程中，根据所述目标区域中的目标前景界面元素在所述3D空间中的目标边界位置，提供在所述目标边界位置处对所述氛围元素的到达进行反馈的动画效果。

另外，本申请实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现前述方法实施例中任一项所述的方法的步骤。

以及一种电子设备，包括：

一个或多个处理器；以及

与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时，执行前述方法实施例中任一项所述的方法的步骤。

其中，图6示例性的展示出了电子设备的架构，例如，设备600可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理，飞行器等。

参照图6，设备600可以包括以下一个或多个组件：处理组件602，存储器604，电源组件606，多媒体组件608，音频组件610，输入/输出(I/O)的接口612，传感器组件614，以及通信组件616。

处理组件602通常控制设备600的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理元件602可以包括一个或多个处理器620来执行指令，以完成本公开技术方案提供的方法的全部或部分步骤。此外，处理组件602可以包括一个或多个模块，便于处理组件602和其他组件之间的交互。例如，处理部件602可以包括多媒体模块，以方便多媒体组件608和处理组件602之间的交互。

存储器604被配置为存储各种类型的数据以支持在设备600的操作。这些数据的示例包括用于在设备600上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器604可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件606为设备600的各种组件提供电力。电源组件606可以包括电源管理系统，一个或多个电源，及其他与为设备600生成、管理和分配电力相关联的组件。

多媒体组件608包括在设备600和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件608包括一个前置摄像头和/或后置摄像头。当设备600处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件610被配置为输出和/或输入音频信号。例如，音频组件610包括一个麦克风(MIC)，当设备600处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器604或经由通信组件616发送。在一些实施例中，音频组件610还包括一个扬声器，用于输出音频信号。

I/O接口612为处理组件602和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件614包括一个或多个传感器，用于为设备600提供各个方面的状态评估。例如，传感器组件614可以检测到设备600的打开/关闭状态，组件的相对定位，例如所述组件为设备600的显示器和小键盘，传感器组件614还可以检测设备600或设备600一个组件的位置改变，用户与设备600接触的存在或不存在，设备600方位或加速/减速和设备600的温度变化。传感器组件614可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件614还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件614还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件616被配置为便于设备600和其他设备之间有线或无线方式的通信。设备600可以接入基于通信标准的无线网络，如WiFi，或2G、3G、4G/LTE、5G等移动通信网络。在一个示例性实施例中，通信部件616经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信部件616还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，设备600可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器604，上述指令可由设备600的处理器620执行以完成本公开技术方案提供的方法。例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统或系统实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的系统及系统实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

以上对本申请所提供的界面展示方法、装置及电子设备，进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本申请的限制。

Claims (11)

1.一种界面展示方法，其特征在于，包括：

接收展示目标界面的请求；

获取所述目标界面的界面数据；

根据所述界面数据对所述目标界面进行展示，所述目标界面中包括背景图像动画，所述背景图像动画中包括按照预置的方式进行运动的氛围元素，其中，在所述氛围元素运动过程中，根据所述目标界面中的目标前景界面元素的位置信息，提供所述氛围元素与所述目标前景界面元素进行交互的动画效果。

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

所述提供所述氛围元素与所述目标前景界面元素进行交互的动画效果，包括：

提供所述氛围元素运动到所述目标前景界面元素的第一目标边界时，与所述第一目标边界进行碰撞后做出反馈的动画效果。

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

在所述动画背景图像中，提供所述氛围元素运动到所述动画背景图像的第二目标边界时，与所述第二目标边界进行碰撞后做出反馈的动画效果；

所述界面数据中包括关于所述动画背景图像的展示位置的排版代码信息，所述展示位置信息通过与所述第一目标边界的相对位置关系进行描述，以使得所述第二目标边界与所述第一目标边界重合；

所述根据所述界面数据对所述目标界面进行展示，包括：

根据所述目标前景界面元素的第一目标边界在所述目标界面中的位置信息，以及所述排版代码信息中的所述相对位置信息，对所述动画背景图像进行展示。

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

所述目标界面关联的界面数据包括界面配置信息，所述界面配置信息中包括多份所述动画背景图像的链接地址，以及分别对应不同的展示条件，所述展示条件与当前所处的季节、月份、时间、节假日和/或用户的个性化信息相关；

所述根据所述界面数据对所述目标界面进行展示，包括：

从所述配置信息中获得符合展示条件的动画背景图像的链接地址；

通过所述链接地址进行动画背景图像的加载以及展示。

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

所述目标前景界面元素包括：位于所述目标界面中顶部区域，功能相对固定的前景界面元素。

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

所述动画背景图像的下层还关联有静态背景图像；

所述根据所述界面数据对所述目标界面进行展示，包括：

在所述目标区域中渲染展示出所述背景图像动画之前，对所述静态背景图像进行展示。

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

所述背景图像动画是对所述静态背景图像中包括的图像元素进行拆分，并对拆分出的图像元素进行动画设计后，生成所述氛围元素。

8.根据权利要求1至7任一项所述的方法，其特征在于，

所述目标界面包括基于3D引擎展示的3D空间界面，所述氛围元素运动过程中，根据所述目标区域中的目标前景界面元素在所述3D空间中的目标边界位置，提供在所述目标边界位置处对所述氛围元素的到达进行反馈的动画效果。

9.一种界面展示装置，其特征在于，包括：

请求接收单元，用于接收展示目标界面的请求；

界面数据获取单元，用于获取所述目标界面的界面数据；

展示单元，用于根据所述界面数据对所述目标界面进行展示，所述目标界面中包括背景图像动画，所述背景图像动画中包括按照预置的方式进行运动的氛围元素，其中，在所述氛围元素运动过程中，根据所述目标界面中的目标前景界面元素的位置信息，提供所述氛围元素与所述目标前景界面元素进行交互的动画效果。

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

11.一种电子设备，其特征在于，包括：

一个或多个处理器；以及

与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时，执行权利要求1至8任一项所述的方法的步骤。

Images