WO2023087990A1 - 一种图像展示方法、装置、计算机设备及存储介质 - Google Patents

Abstract

一种图像展示方法、装置、计算机设备及存储介质，其中，该方法包括：获取多个多媒体内容对应的预览信息；其中，所述预览信息包括多个叠加展示的图像（101）；在目标页面显示多个内容卡片，其中，所述内容卡片上展示有所述预览信息（102）；响应于针对所述目标页面的触发操作，基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息（103）；控制所述内容卡片按照所述触发操作进行移动的同时，在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动（104）。

Description

一种图像展示方法、装置、计算机设备及存储介质

相关申请交叉引用

本公开要求于2021年11月19日提交的、申请号为202111409329.X、名称为“一种图像展示方法、装置、计算机设备及存储介质”的中国专利申请的优先权，其全部内容通过引用并入本文。

技术领域

本公开涉及计算机技术领域，具体而言，涉及一种图像展示方法、装置、计算机设备、存储介质、计算机程序产品及程序。

背景技术

目前，随着互联网产品的不断发展，越来越多人开始使用互联网产品，例如使用手机应用程序(application，APP)或者个人计算机(Personal Computer，PC)网页来浏览相关的信息。

在向用户展示搜索结果或者推荐信息时，通常会以图片、文字、视频的形式展示搜索结果或者推荐信息的预览信息，然而这种展示形式较为普遍，因此如何丰富内容的展示形式成为亟待解决的问题。

发明内容

本公开实施例至少提供一种图像展示方法、装置、计算机设备、存储介质、计算机程序产品及程序。

第一方面，本公开实施例提供了一种图像展示方法，包括：

获取多个多媒体内容对应的预览信息；其中，所述预览信息包括多个叠加展示的图像；

在目标页面显示多个内容卡片，其中，所述内容卡片上展示有所述预览信息；

响应于针对所述目标页面的触发操作，基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息；

控制所述内容卡片按照所述触发操作进行移动的同时，在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动。

一种可能的实施方式中，所述预览信息包括背景图像以及至少一个前景图像；其中，所述至少一个前景图像叠加在所述背景图像之上，所述至少一个前景图像按照预设层级顺序叠加。

一种可能的实施方式中，所述基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息，包括：

确定所述触发操作对应的第一移动距离；

针对所述预览信息中的各图像，基于所述各图像分别对应的移动距离计算方法和所述第一移动距离，确定所述各图像分别对应的第二移动距离。

一种可能的实施方式中，所述基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息，包括：

基于所述触发操作的触发方向，确定所述各图像分别对应的移动方向；

所述在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动，包括：

确定所述触发操作对应的移动时间；

基于所述各图像各自对应的移动距离和所述移动时间，确定各图像对应的移动速度；

在各所述内容卡片中控制各图像同时按照各自对应的移动速度和所述移动方向移动对应的移动距离。

一种可能的实施方式中，所述基于所述触发操作的触发方向，确定所述各图像分别对应的移动方向，包括：

确定所述各图像分别对应的属性信息；

基于所述触发操作的触发方向和所述各图像分别对应的属性信息，确定所述各图像分别对应的移动方向。

一种可能的实施方式中，所述多个内容卡片包括多个目标内容卡片，所述多个目标内容卡片分别对应的多媒体内容具有关联关系，所述多个目标内容卡片在所述目标页面的位置相邻；

所述多个目标内容卡片中包含相同的目标前景图像；

所述多个目标内容卡片展示的预览信息中的目标前景图像为所述目标前景图像的不同区域的区域图像；相邻两个目标内容卡片上展示的区域图像在所述目标前景图像中相邻。

一种可能的实施方式中，所述基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息，包括：

针对所述目标内容卡片上的任一目标内容卡片，基于该目标内容卡片对应的目标前景图像的区域信息和所述触发操作，确定该目标内容卡片对应的前景移动信息，以及基于所述移动操作，确定该目标内容卡片的背景图像对应的背景移动信息；

其中，相邻两个目标内容卡片的前景移动信息相同。

一种可能的实施方式中，在任一内容卡片展示的所述预览信息中包括动态图像的情况下，所述方法还包括：

在该内容卡片移动至屏幕界面的目标位置区域时，播放所述动态图像。

第二方面，本公开实施例还提供一种图像展示装置，包括：

获取模块，用于获取多个多媒体内容对应的预览信息；其中，所述预览信息包括多个叠加展示的图像；

显示模块，用于在目标页面显示多个内容卡片，其中，所述内容卡片上展示有所述预览信息；

响应模块，用于响应于针对所述目标页面的触发操作，基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息；

控制模块，用于控制所述内容卡片按照所述触发操作进行移动的同时，在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动。

一种可能的实施方式中，所述预览信息包括背景图像以及至少一个前景图像；其中，所述至少一个前景图像叠加在所述背景图像之上，所述至少一个前景图像按照预设层级顺序叠加。

一种可能的实施方式中，所述响应模块，在基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息时，用于：

确定所述触发操作对应的第一移动距离；

针对所述预览信息中的各图像，基于所述各图像分别对应的移动距离计算方法和所述第一移动距离，确定所述各图像分别对应的第二移动距离。

一种可能的实施方式中，所述响应模块，在基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息时，用于：

基于所述触发操作的触发方向，确定所述各图像分别对应的移动方向；

所述控制模块，在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动时，用于：

确定所述触发操作对应的移动时间；

基于所述各图像各自对应的移动距离和所述移动时间，确定各图像对应的移动速度；

在各所述内容卡片中控制各图像同时按照各自对应的移动速度和所述移动方向移动对应的移动距离。

一种可能的实施方式中，所述响应模块，在基于所述触发操作的触发方向，确定所述各图像分别对应的移动方向时，用于：

确定所述各图像分别对应的属性信息；

基于所述触发操作的触发方向和所述各图像分别对应的属性信息，确定所述各图像分别对应的移动方向。

一种可能的实施方式中，所述多个内容卡片包括多个目标内容卡片，所述多个目标内容卡片分别对应的多媒体内容具有关联关系，所述多个目标内容卡片在所述目标页面的位置相邻；

所述多个目标内容卡片中包含相同的目标前景图像；

所述多个目标内容卡片展示的预览信息中的目标前景图像为所述目标前景图像的不同区域的区域图像；相邻两个目标内容卡片上展示的区域图像在所述目标前景图像中相邻。

一种可能的实施方式中，所述响应模块，在基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息时，用于：

针对所述目标内容卡片上的任一目标内容卡片，基于该目标内容卡片对应的目标前景图像的区域信息和所述触发操作，确定该目标内容卡片对应的前景移动信息，以及基于所述移动操作，确定该目标内容卡片的背景图像对应的背景移动信息；

其中，相邻两个目标内容卡片的前景移动信息相同。

一种可能的实施方式中，所述控制模块，在任一内容卡片展示的所述预览信息中包括动态图像的情况下，还用于：

在该内容卡片移动至屏幕界面的目标位置区域时，播放所述动态图像。

第三方面，本公开实施例还提供一种计算机设备，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当计算机设备运行时，所述处理器与所述 存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。

第四方面，本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。

第五方面，本公开实施例还提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器运行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。

第六方面，本公开实施例还提供一种计算机程序，该计算机程序被处理器运行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。

本公开提供的一种图像展示方法、装置、计算机设备及存储介质，首先获取多个多媒体内容对应的预览信息，并在目标页面显示多个内容卡片，其中，所述内容卡片上展示有所述预览信息；然后，响应于针对所述目标页面的触发操作，并基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息，在控制所述内容卡片按照所述触发操作进行移动的同时，在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动。采用这种方法可以使预览信息随着用户的触发操作变换展示效果，通过静态的图像展示动态的效果，增加了用户阅读预览信息的趣味性。

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

附图说明

为了更清楚地说明本公开实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，此处的附图被并入说明书中并构成本说明书中的一部分，这些附图示出了符合本公开的实施例，并与说明书一起用于说明本公开的技术方案。应当理解，以下附图仅示出了本公开的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本公开实施例所提供的一种图像展示方法的流程图；

图2示出了本公开实施例所提供的一种多个前景图像展示效果的示意图；

图3示出了本公开实施例所提供的一种内容卡片展示的图像的示意图；

图4示出了本公开实施例所提供的一种内容卡片以及各图像移动的示意图；

图5a示出了本公开实施例所提供的一种目标前景图像的区域划分的示意图；

图5b示出了本公开实施例所提供的一种目标内容卡片展示区域图像的示意图；

图6示出了本公开实施例所提供的一种图像展示装置的架构示意图；

图7示出了本公开实施例所提供的一种计算机设备的结构示意图。

具体实施方式

为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本公 开实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围，而是仅仅表示本公开的选定实施例。基于本公开的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。

目前，随着互联网产品的不断发展，越来越多人开始使用互联网产品，例如使用手机应用程序(application，APP)或者个人计算机(Personal Computer，PC)网页来浏览相关的信息。

在向用户展示搜索结果或者推荐信息时，通常会以图片、文字、视频的形式展示搜索结果或者推荐信息的预览信息，然而这种展示形式较为普遍，因此如何丰富内容的展示形式成为亟待解决的问题。

基于上述研究，本公开提供了一种图像展示方法、装置、计算机设备及存储介质，首先获取多个多媒体内容对应的预览信息，并在目标页面显示多个内容卡片，其中，所述内容卡片上展示有所述预览信息；然后，响应于针对所述目标页面的触发操作，并基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息，在控制所述内容卡片按照所述触发操作进行移动的同时，在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动。采用这种方法可以使预览信息随着用户的触发操作变换展示效果，通过静态的图像展示动态的效果，增加了用户阅读预览信息的趣味性。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

本文中术语“和/或”，仅仅是描述一种关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中术语“至少一种”表示多种中的任意一种或多种中的至少两种的任意组合，例如，包括A、B、C中的至少一种，可以表示包括从A、B和C构成的集合中选择的任意一个或多个元素。

为便于对本实施例进行理解，首先对本公开实施例所公开的一种图像展示方法进行详细介绍，本公开实施例所提供的图像展示方法的执行主体一般为终端设备，终端设备可以为智能手机、平板电脑、个人计算机等。

参见图1所示，为本公开实施例提供的图像展示方法的流程图，所述方法包括步骤101～步骤104，其中：

步骤101、获取多个多媒体内容对应的预览信息；其中，所述预览信息包括多个叠加展示的图像；

步骤102、在目标页面显示多个内容卡片，其中，所述内容卡片上展示有所述预览信息；

步骤103、响应于针对所述目标页面的触发操作，基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息；

步骤104、控制所述内容卡片按照所述触发操作进行移动的同时，在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动。

以下是针对上述步骤的详细说明：

针对步骤101、

一种可能的场景中，所述多媒体内容可以为推荐内容，例如可以是feed流场景中的推荐内容；或者，在另外一种可能的场景中，所述多媒体内容可以为搜索结果，在用户发起搜索请求之后，通过用户端展示与所述搜索请求对应的多个多媒体内容对应的预览信息。

所述多媒体内容的类型可以包括图片、文本、视频、音频，所述多媒体内容的预览信息可以与多媒体内容的类型相同，示例性的可以为图像、文本、动态图像、音频等。示例性的，如果所述多媒体内容为推荐的多个漫画，所述预览信息可以是所述多个漫画的封面。

在一种可能的实施方式中，所述预览信息包括背景图像以及至少一个前景图像；其中，所述至少一个前景图像叠加在所述背景图像之上，所述至少一个前景图像按照预设层级顺序叠加。

其中，所述前景图像可以包括实体图像，如包含人物、动物、花草、昆虫等的图像，或者所述前景图像可以为场景图像，如山川、河流等，或者是如艺术图像、纯色图像等其他内容的图像，所述背景图像也可以包括所述场景图像、所述实体图像、所述其他内容的图像，这里，所述前景图像与所述背景图像在图像内容上并无区分。

具体的，所述背景图像为所述预览信息中位于最底层的图像；如果所述预览信息中包含多个前景图像，所述多个前景图像可以分别位于不同的预设层级。示例性的，如图2所示，所述预览信息中包含三个前景图像，所述三个前景图像由低预设层级到高预设层级的顺序分别位于第一层级、第二层级、第三层级；所述多个前景图像中，还可以有部分前景图像位于相同的预设层级，示例性的，所述预览信息中包含五个前景图像，所述五个前景图像由低预设层级到高预设层级的顺序分别位于第一层级、第二层级、第二层级、第三层级、第四层级。

这里，位于相同预设层级的所述前景图像之间不能重叠，针对每两个位于不同预设层级的前景图像之间的重叠区域，只展示位于高预设层级的重叠区域的前景图像。

对多个前景图像进行分层，可以更好地体现多个前景图像之间的前后关系，从而提升了展示的预览信息的空间感。

针对步骤102、

其中，所述目标页面可以用于展示多个内容卡片；所述内容卡片的形状可以为任意形状，如多边形、圆形、不规则图形等，所述多个内容卡片之间可以采取多种展示形式，如分开展示、交叉展示、平面展示、立体展示等；所述预览信息可以展示在对应的所述内容卡片包含的区域范围内，所述预览信息中的多个图像可以完整的展示在所述内容卡片内，也可以如图3所示，只展示位于所述内容卡片包含的区域范围内的部分的图像。

这里，需要说明的是，一般所述预览信息中的背景图像的尺寸大于所述内容卡片的尺寸，前景图像的尺寸小于所述内容卡片的尺寸。

针对步骤103、

其中，所述触发操作可以包括向各个方向的滑动操作或者所述触发操作可以是语音操作、手势操作等。示例性的，所述语音操作可以是指示包含方向词的声音信息，如“向上”、“向下滑”、“下一条”，所述语音操作还可以是包含任一展示的预览信息对应的多媒体内容的标题的声音信息(如该标题位于目标页面底部，则所述语音操作用于指示所述目标页面上移)。所述手势操作可以是预先设定好的手势，例如向上挥手可以指示页面上移，向下挥手可以指示页面下移等。

所述移动信息例如可以包括移动方向和/或移动距离。同一预览信息中的不同图像对应的移动信息可能不同。

在一种可能的实施方式中，在基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息时，可以先确定所述触发操作对应的第一移动距离；然后针对所述预览信息中的各图像，基于所述各图像分别对应的移动距离计算方法和所述第一移动距离，确定所述各图像分别对应的第二移动距离。

具体的，在确定所述第一移动距离时，如果所述触发操作为针对任一方向的滑动操作，则所述第一移动距离可以是所述滑动操作的滑动距离，或者所述第一移动距离可以是基于所述滑动距离计算出的距离；如果所述触发操作为语音操作，则所述第一移动距离可以是预设的所述目标页面移动的距离。

示例性的，在确定所述第二移动距离时，如果所述第一移动距离为100像素长度，所述移动距离计算方法为所述第二移动距离为所述第一移动距离的两倍，则所述第二移动距离为200像素长度。

需要说明的是，不同的图像，对应的移动距离计算方法可能不同，示例性的，当目标页面进行滑动时，前景图像的移动速度可能较快，背景图像的移动速度可能较慢，因此不同的图像，可以根据视差效果和实际情况，设置不同的移动距离计算方法。

示例性的，如果所述预览信息中包含的背景图像为山脉图像、包含的两个前景图像分别为汽车图像和树林图像，则可以设置所述山脉图像的第二移动距离为所述第一移动距离的0.5倍，可以设置所述汽车图像的第二移动距离为所述第一移动距离的2倍，可以设置所述山脉图像的第二移动距离为所述第一移动距离的1.2倍。这样，就可以展示出汽车在行驶过程中，远处的山脉移动较慢、近处的树林移动较快的视觉效果。

采用这种方法，可以使所述预览信息中不同的图像移动不同的距离，从而产生视差效果，提升了浏览所述预览信息的趣味性。

在一种可能的实施方式中，在基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息时，可以基于所述触发操作的触发方向，确定所述各图像分别对应的移动方向。

其中，所述各图像分别对应的移动方向包括直线方向(如向左、向下、向45度方向)以及曲线方向(如弧线、波浪线)。

具体的，在确定所述各图像分别对应的移动方向时，如果所述触发操作为所述滑动操作，则需要先确定所述滑动操作的滑动方向(即所述触发方向)，然后基于预设的所述滑动方向与所述各图像分别对应的移动方向之间的方向关系，确定所述各图像分别对应的移动方向。

示例性的，如果所述预览信息中包含两个图像，分别为第一图像和第二图像，所述第一图像对应的方向关系为与所述滑动方向相同，所述第二图像对应的方向关系为与所述滑动方向相反，则当所述滑动方向为向右滑时，所述第一图像对应的移动方向为向右，所述第二图像对应的移动方向为向左。

如果所述触发操作为所述语音操作，所述语音操作的触发方向可以是所述语音操作中包含的方向词指示的方向，如所述语音操作为“向左滑”，则所述语音操作的触发方向可以是向左。

这里，对于不同触发方向的触发操作，任一图像可以对应多个不同的移动方向，示例性的，当所述目标页面响应到上滑操作时，所述预览信息中的第三图像左滑，响应到下滑操作时，所述预览信息中的第三图像右滑。

通过让不同的图像按照不同的方向进行移动，更加生动地展示所述预览信息，增加了浏览所述预览信息的趣味性。

在另一种可能的实施方式中，在基于所述触发操作的触发方向，确定所述各图像分别对应的移动方向时，还可以先确定所述各图像分别对应的属性信息；然后基于所述触发操作的触发方向和所述各图像分别对应的属性信息，确定所述各图像分别对应的移动方向。

具体的，所述属性信息可以是对象的类别，如苹果树、梨树的类别为树，足球、篮球的类别为球；在基于所述触发操作的触发方向和所述各图像分别对应的属性信息，确定所述各图像分别对应的移动方向时，可以基于所述属性信息的性质确定，示例性的，如果所述预览信息中的第一图像的属性信息为球，且所述触发操作的移动方向向左，则所述第一图像对应的移动方向可以是向左的抛物线方向，如果所述预览信息中的第二图像的属性为鸟，且所述触发操作的移动方向向右，则所述第二图像对应的移动方向可以是距离水平45度角的右上方向。

针对步骤104、

示例性的，所述内容卡片以及所述各图像的移动画面可以如图4所示，所述内容卡片向上移动，所述内容卡片中的人形图像向右上方移动，所述内容卡片中的山脉图像向左移动。

在一种可能的实施方式中，在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动时，可以先确定所述触发操作对应的移动时间；然后基于所述各图像各自对应的移动距离(所述移动信息包含移动距离)和所述移动时间，确定各图像对应的移动速度；最后在各所述内容卡片中控制各图像同时按照各自对应的移动速度和所述移动方向移动对应的移动距离。

其中，所述触发操作对应的移动时间可以是所述触发操作执行的时长，如单次滑动操作执行的总时长；或所述移动时间可以是指页面从开始移动到结束移动所需要的时间；所述移动速度示例性的可以是通过所述移动距离除以所述移动时间确定。

示例性的，如果用户在触摸屏上向下滑动2秒，所述预览信息中的第一图像对应的移动距离为3厘米，则所述触发操作对应的移动时间为2秒，所述第一图像对应的移动速度为1.5厘米/秒，如果所述第一图像对应的移动方向为向右，则所述第一图像以1.5厘米/秒的速度向右滑动3厘米。

在另一种可能的实施方式中，还可以先确定所述各图像分别对应的属性信息；然后基于所述属性信息，确定各图像对应的移动速度；最后在各所述内容卡片中控制各图像同时按照各自对应的移动速度和所述移动方向移动对应的移动距离。

示例性的，如果所述预览信息中的第二图像的属性信息为球，所述第二图像的移动方向为抛物线方向，所诉第二图像的移动速度可以按照预设的移动速度先变慢、后变快，使得展示的第二图像的物理效果更加真实。

在一种可能的应用场景中，针对展示的预览信息具有关联关系的多个目标内容卡片，为了呈现出同一对象在多个目标内容卡片中移动的动态效果，可以在所述多个目标内容卡片中 展示同一目标前景图像，以及不同的多个其他前景图像以及不同的背景图像，执行方法具体如下：

在一种可能的实施方式中，所述多个内容卡片包括多个目标内容卡片，所述多个目标内容卡片分别对应的多媒体内容具有关联关系，所述多个目标内容卡片在所述目标页面的位置相邻；所述多个目标内容卡片中包含相同的目标前景图像；所述多个目标内容卡片展示的预览信息中的目标前景图像为所述目标前景图像的不同区域的区域图像；相邻两个目标内容卡片上展示的区域图像在所述目标前景图像中相邻。

具体的，所述关联关系可以是所述多个目标内容卡片分别对应的多媒体内容具有相同的主题、或者属于同一对象的不同部分，示例性的，所述多个目标内容卡片分别对应的多媒体内容为同一漫画的不同章节。

这里，需要注意的是，上述多个目标内容卡片包含相同的目标前景图像的含义为，每个目标内容卡片均包含目标前景图像，除目标前景图像外，各个目标内容卡片可能还包括除所述目标前景图像外的其他前景图像。

示例性的，如果所述目标内容卡片包括内容卡片1、内容卡片2和内容卡片3，则内容卡片1包括前景图像1，内容卡片2包括前景图像1，内容卡片3也包括前景图像1。

需要说明的是，内容卡片1、内容卡片2、内容卡片3展示的预览信息中，所展示的前景图像为前景图像1的不同区域，例如内容卡片1展示的预览信息中包括前景图像1的A区域，内容卡片2展示的预览信息中包括前景图像1的B区域，内容卡片3展示的预览信息中包括前景图像1的C区域。

相邻两个目标内容卡片上展示的区域图像在所述目标前景图像中相邻，示例性的，若内容卡片1和内容卡片2相邻，则A区域和B区域在前景图像1中相邻，若内容卡片2和内容卡片3相邻，则B区域和C区域在前景图像1中相邻。

示例性的，如图5a所示，所述第一目标内容卡片展示有所述目标前景图象的第一区域的区域图像，所述第二目标内容卡片展示有所述目标前景图像的第二区域的区域图像，且第一区域的区域图像和第二区域的区域图像在目标前景图像上也相邻。

在一种可能的实施方式中，在基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息时，针对所述目标内容卡片上的任一目标内容卡片，基于该目标内容卡片对应的前景图像的区域信息和所述触发操作，确定该目标内容卡片对应的目标前景移动信息，以及基于所述移动操作，确定该目标内容卡片的背景图像对应的背景移动信息；其中，相邻两个目标内容卡片的前景移动信息相同。

其中，所述目标内容卡片对应的目标前景图像的区域信息可以是该目标内容卡片展示的预览信息中区域图像在目标前景图像中的位置信息。针对任一目标内容卡片，在其对应的区域图像的移动过程中，区域图像的大小可能会发生变化。

示例性的，如图5b所示，所述目标内容卡片与所述目标前景图像向下移动，所述第一区域的大小与所述第二区域的大小会随着所述目标前景图像的移动发生改变。

这样，即可实现相同的目标前景图像在多个不同目标内容卡片之间移动的展示效果，极大地提升了在推荐信息和搜索结果展示时的趣味性。

在一种可能的实施方式中，在任一内容卡片展示的所述预览信息中包括动态图像的情况下，所述方法还包括：在该内容卡片移动至屏幕界面的目标位置区域时，播放所述动态图像。

示例性的，所述任一内容卡片展示的所述预览信息中可以同时包括静态图像以及动态图像，响应于针对所述目标页面的触发操作，控制所述内容卡片以及所述内容卡片中的各图像按照对应的移动信息进行移动，当所述内容卡片移动至屏幕界面的目标位置区域时，播放所述动态图像；此外，可以使所述内容卡片移动至屏幕界面的目标位置区域时，所述各图像的展示画面与所述动态图像的初始画面一致，从而使用户的观看体验更加流畅。

本公开实施例提供的一种图像展示方法中，首先获取多个多媒体内容对应的预览信息，并在目标页面显示多个内容卡片，其中，所述内容卡片上展示有所述预览信息；然后，响应于针对所述目标页面的触发操作，并基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息，在控制所述内容卡片按照所述触发操作进行移动的同时，在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动。采用这种方法可以使预览信息随着用户的触发操作变换展示效果，通过静态的图像展示动态的效果，增加了用户阅读预览信息的趣味性。

本领域技术人员可以理解，在具体实施方式的上述方法中，各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定，各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。

基于同一发明构思，本公开实施例中还提供了与图像展示方法对应的图像展示装置，由于本公开实施例中的装置解决问题的原理与本公开实施例上述图像展示方法相似，因此装置的实施可以参见方法的实施，重复之处不再赘述。

参照图6所示，为本公开实施例提供的一种图像展示装置的架构示意图，所述装置包括：获取模块601、显示模块602、响应模块603、控制模块604；其中，

获取模块601，用于获取多个多媒体内容对应的预览信息；其中，所述预览信息包括多个叠加展示的图像；

显示模块602，用于在目标页面显示多个内容卡片，其中，所述内容卡片上展示有所述预览信息；

响应模块603，用于响应于针对所述目标页面的触发操作，基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息；

控制模块604，用于控制所述内容卡片按照所述触发操作进行移动的同时，在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动。

一种可能的实施方式中，所述预览信息包括背景图像以及至少一个前景图像；其中，所述至少一个前景图像叠加在所述背景图像之上，所述至少一个前景图像按照预设层级顺序叠加。

一种可能的实施方式中，所述响应模块603，在基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息时，用于：

确定所述触发操作对应的第一移动距离；

针对所述预览信息中的各图像，基于所述各图像分别对应的移动距离计算方法和所述第一移动距离，确定所述各图像分别对应的第二移动距离。

一种可能的实施方式中，所述响应模块603，在基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息时，用于：

基于所述触发操作的触发方向，确定所述各图像分别对应的移动方向；

所述控制模块604，在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动时，用于：

确定所述触发操作对应的移动时间；

基于所述各图像各自对应的移动距离和所述移动时间，确定各图像对应的移动速度；

在各所述内容卡片中控制各图像同时按照各自对应的移动速度和所述移动方向移动对应的移动距离。

一种可能的实施方式中，所述响应模块603，在基于所述触发操作的触发方向，确定所述各图像分别对应的移动方向时，用于：

确定所述各图像分别对应的属性信息；

基于所述触发操作的触发方向和所述各图像分别对应的属性信息，确定所述各图像分别对应的移动方向。

一种可能的实施方式中，所述多个内容卡片包括多个目标内容卡片，所述多个目标内容卡片分别对应的多媒体内容具有关联关系，所述多个目标内容卡片在所述目标页面的位置相邻；

所述多个目标内容卡片中包含相同的目标前景图像；

所述多个目标内容卡片展示的预览信息中的目标前景图像为所述目标前景图像的不同区域的区域图像；相邻两个目标内容卡片上展示的区域图像在所述目标前景图像中相邻。

一种可能的实施方式中，所述响应模块603，在基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息时，用于：

针对所述目标内容卡片上的任一目标内容卡片，基于该目标内容卡片对应的目标前景图像的区域信息和所述触发操作，确定该目标内容卡片对应的前景移动信息，以及基于所述移动操作，确定该目标内容卡片的背景图像对应的背景移动信息；

其中，相邻两个目标内容卡片的前景移动信息相同。

一种可能的实施方式中，所述控制模块604，在任一内容卡片展示的所述预览信息中包括动态图像的情况下，还用于：

在该内容卡片移动至屏幕界面的目标位置区域时，播放所述动态图像。

关于装置中的各模块的处理流程、以及各模块之间的交互流程的描述可以参照上述方法实施例中的相关说明，这里不再详述。

基于同一技术构思，本公开实施例还提供了一种计算机设备。参照图7所示，为本公开实施例提供的计算机设备700的结构示意图，包括处理器701、存储器702、和总线703。其中，存储器702用于存储执行指令，包括内存7021和外部存储器7022；这里的内存7021也称内存储器，用于暂时存放处理器701中的运算数据，以及与硬盘等外部存储器7022交换的数据，处理器701通过内存7021与外部存储器7022进行数据交换，当计算机设备700运行时，处理器701与存储器702之间通过总线703通信，使得处理器701在执行以下指令：

获取多个多媒体内容对应的预览信息；其中，所述预览信息包括多个叠加展示的图像；

在目标页面显示多个内容卡片，其中，所述内容卡片上展示有所述预览信息；

响应于针对所述目标页面的触发操作，基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息；

控制所述内容卡片按照所述触发操作进行移动的同时，在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动。

一种可能的实施方式中，处理器701执行的指令中，所述预览信息包括背景图像以及至少一个前景图像；其中，所述至少一个前景图像叠加在所述背景图像之上，所述至少一个前景图像按照预设层级顺序叠加。

一种可能的实施方式中，处理器701执行的指令中，所述基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息，包括：

确定所述触发操作对应的第一移动距离；

针对所述预览信息中的各图像，基于所述各图像分别对应的移动距离计算方法和所述第一移动距离，确定所述各图像分别对应的第二移动距离。

一种可能的实施方式中，处理器701执行的指令中，所述基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息，包括：

基于所述触发操作的触发方向，确定所述各图像分别对应的移动方向；

所述在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动，包括：

确定所述触发操作对应的移动时间；

基于所述各图像各自对应的移动距离和所述移动时间，确定各图像对应的移动速度；

在各所述内容卡片中控制各图像同时按照各自对应的移动速度和所述移动方向移动对应的移动距离。

一种可能的实施方式中，处理器701执行的指令中，所述基于所述触发操作的触发方向，确定所述各图像分别对应的移动方向，包括：

确定所述各图像分别对应的属性信息；

基于所述触发操作的触发方向和所述各图像分别对应的属性信息，确定所述各图像分别对应的移动方向。

一种可能的实施方式中，处理器701执行的指令中，所述多个内容卡片包括多个目标内容卡片，所述多个目标内容卡片分别对应的多媒体内容具有关联关系，所述多个目标内容卡片在所述目标页面的位置相邻；

所述多个目标内容卡片中包含相同的目标前景图像；

所述多个目标内容卡片展示的预览信息中的目标前景图像为所述目标前景图像的不同区域的区域图像；相邻两个目标内容卡片上展示的区域图像在所述目标前景图像中相邻。

一种可能的实施方式中，处理器701执行的指令中，所述基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息，包括：

针对所述目标内容卡片上的任一目标内容卡片，基于该目标内容卡片对应的目标前景图像的区域信息和所述触发操作，确定该目标内容卡片对应的前景移动信息，以及基于所述移动操作，确定该目标内容卡片的背景图像对应的背景移动信息；

其中，相邻两个目标内容卡片的前景移动信息相同。

一种可能的实施方式中，处理器701执行的指令中，在任一内容卡片展示的所述预览信息中包括动态图像的情况下，所述方法还包括：

在该内容卡片移动至屏幕界面的目标位置区域时，播放所述动态图像。

本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法实施例中所述的图像展示方法的步骤。其中，该存储介质可以是易失性或非易失的计算机可读取存储介质。

本公开实施例还提供一种计算机程序产品，该计算机产品承载有程序代码，所述程序代码包括的指令可用于执行上述方法实施例中所述的图像展示方法的步骤，具体可参见上述方法实施例，在此不再赘述。

其中，上述计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中，所述计算机程序产品具体体现为计算机存储介质，在另一个可选实施例中，计算机程序产品具体体现为软件产品，例如软件开发包(Software Development Kit，SDK)等等。

本公开实施例还提供一种计算机程序，该计算机程序被处理器运行时执行上述方法实施例中所述的图像展示方法的步骤。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。在本公开所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

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

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

Claims (13)

1. 一种图像展示方法，包括：

   获取多个多媒体内容对应的预览信息；其中，所述预览信息包括多个叠加展示的图像；

   在目标页面显示多个内容卡片，其中，所述内容卡片上展示有所述预览信息；

   响应于针对所述目标页面的触发操作，基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息；

   控制所述内容卡片按照所述触发操作进行移动的同时，在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动。
2. 根据权利要求1所述的方法，其中，所述预览信息包括背景图像以及至少一个前景图像；其中，所述至少一个前景图像叠加在所述背景图像之上，所述至少一个前景图像按照预设层级顺序叠加。
3. 根据权利要求1或2所述的方法，其中，所述基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息，包括：

   确定所述触发操作对应的第一移动距离；

   针对所述预览信息中的各图像，基于所述各图像分别对应的移动距离计算方法和所述第一移动距离，确定所述各图像分别对应的第二移动距离。
4. 根据权利要求3所述的方法，其中，所述基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息，包括：

   基于所述触发操作的触发方向，确定所述各图像分别对应的移动方向；

   所述在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动，包括：

   确定所述触发操作对应的移动时间；

   基于所述各图像各自对应的移动距离和所述移动时间，确定各图像对应的移动速度；

   在各所述内容卡片中控制各图像同时按照各自对应的移动速度和所述移动方向移动对应的移动距离。
5. 根据权利要求4所述的方法，其中，所述基于所述触发操作的触发方向，确定所述各图像分别对应的移动方向，包括：

   确定所述各图像分别对应的属性信息；

   基于所述触发操作的触发方向和所述各图像分别对应的属性信息，确定所述各图像分别对应的移动方向。
6. 根据权利要求2至5任一项所述的方法，其中，所述多个内容卡片包括多个目标内容卡片，所述多个目标内容卡片分别对应的多媒体内容具有关联关系，所述多个目标内容卡片在所述目标页面的位置相邻；

   所述多个目标内容卡片中包含相同的目标前景图像；

   所述多个目标内容卡片展示的预览信息中的目标前景图像为所述目标前景图像的不同区域的区域图像；相邻两个目标内容卡片上展示的区域图像在所述目标前景图像中相邻。
7. 根据权利要求6所述的方法，其中，所述基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息，包括：

   针对所述目标内容卡片上的任一目标内容卡片，基于该目标内容卡片对应的目标前景图像的区域信息和所述触发操作，确定该目标内容卡片对应的前景移动信息，以及基于所述移动操作，确定该目标内容卡片的背景图像对应的背景移动信息；

   其中，相邻两个目标内容卡片的前景移动信息相同。
8. 根据权利要求1至7任一项所述的方法，其中，在任一内容卡片展示的所述预览信息中包括动态图像的情况下，所述方法还包括：

   在该内容卡片移动至屏幕界面的目标位置区域时，播放所述动态图像。
9. 一种图像展示装置，包括：

   获取模块，用于获取多个多媒体内容对应的预览信息；其中，所述预览信息包括多个叠加展示的图像；

   显示模块，用于在目标页面显示多个内容卡片，其中，所述内容卡片上展示有所述预览信息；

   响应模块，用于响应于针对所述目标页面的触发操作，基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息；

   控制模块，用于控制所述内容卡片按照所述触发操作进行移动的同时，在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动。
10. 一种计算机设备，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当所述计算机设备运行时，所述处理器与所述存储器之间通过所述总线通信，所述机器可读指令被所述处理器执行时执行如权利要求1至8任一项所述的图像展示方法的步骤。
11. 一种计算机可读存储介质，其中，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如权利要求1至8任一项所述的图像展示方法的步骤。
12. 一种计算机程序产品，包括计算机程序，该计算机程序被处理器运行时执行如权利要求1至8任一项所述的图像展示方法的步骤。
13. 一种计算机程序，其中，所述计算机程序被处理器运行时执行如权利要求1至8任一项所述的图像展示方法的步骤。

Images