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

技术编号:32461533 阅读:13 留言:0更新日期:2022-02-26 08:51
本公开提供了一种图像展示方法、装置、计算机设备及存储介质,其中,该方法包括:获取多个多媒体内容对应的预览信息;其中,所述预览信息包括多个叠加展示的图像;在目标页面显示多个内容卡片,其中,所述内容卡片上展示有所述预览信息;响应于针对所述目标页面的触发操作,基于所述触发操作确定各所述内容卡片上的预览信息中、各图像对应的移动信息;控制所述内容卡片按照所述触发操作进行移动的同时,在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动。移动信息进行移动。移动信息进行移动。

【技术实现步骤摘要】
一种图像展示方法、装置、计算机设备及存储介质


[0001]本公开涉及计算机
,具体而言,涉及一种图像展示方法、装置、计算机设备及存储介质。

技术介绍

[0002]目前,随着互联网产品的不断发展,越来越多人开始使用互联网产品,例如使用APP(手机应用程序,application)或者PC网页(个人计算机,Personal Computer)来浏览相关的信息。
[0003]在向用户展示搜索结果或者推荐信息时,通常会以图片、文字、视频的形式展示搜索结果或者推荐信息的预览信息,然而这种展示形式较为普遍,因此如何丰富内容的展示形式成为亟待解决的问题。

技术实现思路

[0004]本公开实施例至少提供一种图像展示方法、装置、计算机设备及存储介质。
[0005]第一方面,本公开实施例提供了一种图像展示方法,包括:
[0006]获取多个多媒体内容对应的预览信息;其中,所述预览信息包括多个叠加展示的图像;
[0007]在目标页面显示多个内容卡片,其中,所述内容卡片上展示有所述预览信息;
[0008]响应于针对所述目标页面的触发操作,基于所述触发操作确定各所述内容卡片上的预览信息中、各图像对应的移动信息;
[0009]控制所述内容卡片按照所述触发操作进行移动的同时,在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动。
[0010]一种可能的实施方式中,所述预览信息包括背景图像以及至少一个前景图像;其中,所述至少一个前景图像叠加在所述背景图像之上,所述至少一个前景图像按照预设层级顺序叠加。
[0011]一种可能的实施方式中,所述基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息,包括:
[0012]确定所述触发操作对应的第一移动距离;
[0013]针对所述预览信息中的各图像,基于所述各图像分别对应的移动距离计算方法和所述第一移动距离,确定所述各图像分别对应的第二移动距离。
[0014]一种可能的实施方式中,所述基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息,包括:
[0015]基于所述触发操作的触发方向,确定所述各图像分别对应的移动方向;
[0016]所述在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动,包括:
[0017]确定所述触发操作对应的移动时间;
[0018]基于所述各图像各自对应的移动距离和所述移动时间,确定各图像对应的移动速
度;
[0019]在各所述内容卡片中控制各图像同时按照各自对应的移动速度和所述移动方向移动对应的移动距离。
[0020]一种可能的实施方式中,所述基于所述触发操作的触发方向,确定所述各图像分别对应的移动方向,包括:
[0021]确定所述各图像分别对应的属性信息;
[0022]基于所述触发操作的触发方向和所述各图像分别对应的属性信息,确定所述各图像分别对应的移动方向。
[0023]一种可能的实施方式中,所述多个内容卡片包括多个目标内容卡片,所述多个目标内容卡片分别对应的多媒体内容具有关联关系,所述多个目标内容卡片在所述目标页面的位置相邻;
[0024]所述多个目标内容卡片中包含相同的目标前景图像;
[0025]所述多个目标内容卡片展示的预览信息中的目标前景图像为所述目标前景图像的不同区域的区域图像;相邻两个目标内容卡片上展示的区域图像在所述目标前景图像中相邻。
[0026]一种可能的实施方式中,所述基于所述触发操作确定各所述内容卡片上的预览信息中、各图像对应的移动信息,包括:
[0027]针对所述目标内容卡片上的任一目标内容卡片,基于该目标内容卡片对应的目标前景图像的区域信息和所述触发操作,确定该目标内容卡片对应的前景移动信息,以及基于所述移动操作,确定该目标内容卡片的背景图像对应的背景移动信息;
[0028]其中,相邻两个目标内容卡片的前景移动信息相同。
[0029]一种可能的实施方式中,在任一内容卡片展示的所述预览信息中包括动态图像的情况下,所述方法还包括:
[0030]在该内容卡片移动至屏幕界面的目标位置区域时,播放所述动态图像。
[0031]第二方面,本公开实施例还提供一种图像展示装置,包括:
[0032]获取模块,用于获取多个多媒体内容对应的预览信息;其中,所述预览信息包括多个叠加展示的图像;
[0033]显示模块,用于在目标页面显示多个内容卡片,其中,所述内容卡片上展示有所述预览信息;
[0034]响应模块,用于响应于针对所述目标页面的触发操作,基于所述触发操作确定各所述内容卡片上的预览信息中、各图像对应的移动信息;
[0035]控制模块,用于控制所述内容卡片按照所述触发操作进行移动的同时,在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动。
[0036]一种可能的实施方式中,所述预览信息包括背景图像以及至少一个前景图像;其中,所述至少一个前景图像叠加在所述背景图像之上,所述至少一个前景图像按照预设层级顺序叠加。
[0037]一种可能的实施方式中,所述响应模块,在基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息时,用于:
[0038]确定所述触发操作对应的第一移动距离;
[0039]针对所述预览信息中的各图像,基于所述各图像分别对应的移动距离计算方法和所述第一移动距离,确定所述各图像分别对应的第二移动距离。
[0040]一种可能的实施方式中,所述响应模块,在基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息时,用于:
[0041]基于所述触发操作的触发方向,确定所述各图像分别对应的移动方向;
[0042]所述控制模块,在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动时,用于:
[0043]确定所述触发操作对应的移动时间;
[0044]基于所述各图像各自对应的移动距离和所述移动时间,确定各图像对应的移动速度;
[0045]在各所述内容卡片中控制各图像同时按照各自对应的移动速度和所述移动方向移动对应的移动距离。
[0046]一种可能的实施方式中,所述响应模块,在基于所述触发操作的触发方向,确定所述各图像分别对应的移动方向时,用于:
[0047]确定所述各图像分别对应的属性信息;
[0048]基于所述触发操作的触发方向和所述各图像分别对应的属性信息,确定所述各图像分别对应的移动方向。
[0049]一种可能的实施方式中,所述多个内容卡片包括多个目标内容卡片,所述多个目标内容卡片分别对应的多媒体内容具有关联关系,所述多个目标内容卡片在所述目标页面的位置相邻;
[0050]所述多个目标内容卡片中包含相同的目标前景图像;
[0051]所述多个目标内容卡片展示的预览信息中的目标前景图像为所述目标前景图本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种图像展示方法,其特征在于,包括:获取多个多媒体内容对应的预览信息;其中,所述预览信息包括多个叠加展示的图像;在目标页面显示多个内容卡片,其中,所述内容卡片上展示有所述预览信息;响应于针对所述目标页面的触发操作,基于所述触发操作确定各所述内容卡片上的预览信息中、各图像对应的移动信息;控制所述内容卡片按照所述触发操作进行移动的同时,在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动。2.根据权利要求1所述的方法,其特征在于,所述预览信息包括背景图像以及至少一个前景图像;其中,所述至少一个前景图像叠加在所述背景图像之上,所述至少一个前景图像按照预设层级顺序叠加。3.根据权利要求1所述的方法,其特征在于,所述基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息,包括:确定所述触发操作对应的第一移动距离;针对所述预览信息中的各图像,基于所述各图像分别对应的移动距离计算方法和所述第一移动距离,确定所述各图像分别对应的第二移动距离。4.根据权利要求3所述的方法,其特征在于,所述基于所述触发操作确定各所述内容卡片上的预览信息中、各图像分别对应的移动信息,包括:基于所述触发操作的触发方向,确定所述各图像分别对应的移动方向;所述在各所述内容卡片中控制所述各图像按照对应的移动信息进行移动,包括:确定所述触发操作对应的移动时间;基于所述各图像各自对应的移动距离和所述移动时间,确定各图像对应的移动速度;在各所述内容卡片中控制各图像同时按照各自对应的移动速度和所述移动方向移动对应的移动距离。5.根据权利要求4所述的方法,其特征在于,所述基于所述触发操作的触发方向,确定所述各图像分别对应的移动方向,包括:确定所述各图像分别对应的属性信息;基于所述触发操作的触发方向和所述各图像分别对应的属性信息,确定所述各图像分别对应的移动方向。6.根据权利要求2所述的方法,其特征在于,所述多个内容卡片包括多个目标内容卡片,所述多个目标内容卡片分别对应的多媒体内容具有关联关系,所...

【专利技术属性】
技术研发人员:刘宇星
申请(专利权)人:北京字节跳动网络技术有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1