页面显示方法、装置、设备、存储介质及产品制造方法及图纸

本申请公开了一种页面显示方法、装置、设备、存储介质及产品，属于多媒体技术领域。所述方法包括：显示第一页面；获取至少一个待处理图像；基于第三图像和第四图像，在第一页面显示至少一个目标对象。本申请实施例提供的技术方案中，通过获取待处理图像，可以得到能表征原始透明度图像颜色信息的非透明彩色图像，以及能表征透明度信息的非透明灰度图像，基于上述非透明彩色图像和非透明灰度图像，能够复现原始透明度图像的透明效果，从而可以在页面中显示原始透明度图像中的目标对象，无需人工制作配置粒子动画特效所需的动画粒子，降低了页面特效制作成本，并且页面显示所耗资源不会随着目标对象数量增多而增加，有效提升了页面显示效率。示效率。示效率。

【技术实现步骤摘要】
页面显示方法、装置、设备、存储介质及产品


[0001]本申请涉及多媒体
，特别涉及一种页面显示方法、装置、设备、存储介质及产品。

技术介绍

[0002]随着多媒体技术的发展，终端可以在用户界面中显示各种各样的特效的动画。
[0003]相关技术中，通过图形视频处理软件的插件将动画导出为Lottie动画文件之后，终端可根据内置对应的Lottie渲染库，针对Lottie动画文件内容进行解析并渲染，从而展示相应的动画内容；又或者由开发设计人员自行制作动画元素的原材料并进行渲染，实现动画播放。
[0004]然而，上述Lottie动画所支持的动效集合目前还不支持三维粒子运动特效，无法通过导出Lottie动画文件实现三维粒子运动特效动画，自行制作动画的耗时长，人工成本高，动画显示效率较低。

技术实现思路

[0005]本申请实施例提供了一种页面显示方法、装置、设备、存储介质及产品，能够降低页面特效制作成本，提升页面显示效率。
[0006]根据本申请实施例的一个方面，提供了一种页面显示方法，所述方法包括：
[0007]显示第一页面；
[0008]获取至少一个待处理图像；其中，所述至少一个待处理图像包括至少一个第二图像对应的第三图像和第四图像，所述至少一个第二图像为包括至少一个目标对象的透明度图像，所述第三图像为用于表征所述第二图像的颜色信息的非透明彩色图像，所述第四图像为用于表征所述第二图像的透明度信息的非透明灰度图像；
[0009]基于所述第三图像和所述第四图像，在所述第一页面显示所述至少一个目标对象。
[0010]根据本申请实施例的一个方面，提供了一种页面显示装置，所述装置包括：
[0011]页面显示模块，用于显示第一页面；
[0012]图像获取模块，用于获取至少一个待处理图像；其中，所述至少一个待处理图像包括至少一个第二图像对应的第三图像和第四图像，所述至少一个第二图像为包括至少一个目标对象的透明度图像，所述第三图像为用于表征所述第二图像的颜色信息的非透明彩色图像，所述第四图像为用于表征所述第二图像的透明度信息的非透明灰度图像；
[0013]对象显示模块，用于基于所述第三图像和所述第四图像，在所述第一页面显示所述至少一个目标对象。
[0014]根据本申请实施例的一个方面，提供了一种计算机设备，所述计算机设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现
上述页面显示方法。
[0015]根据本申请实施例的一个方面，提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现上述页面显示方法。
[0016]根据本申请实施例的一个方面，提供了一种计算机程序产品，所述计算机程序产品包括计算机指令，所述计算机指令存储在计算机可读存储介质中，计算机设备的处理器从计算机可读存储介质读取所述计算机指令，所述处理器执行所述计算机指令，使得所述计算机设备执行以实现上述页面显示方法。
[0017]本申请实施例提供的技术方案可以带来如下有益效果：
[0018]通过获取待处理图像，可以得到能表征原始透明度图像颜色信息的非透明彩色图像，以及能表征透明度信息的非透明灰度图像，基于上述非透明彩色图像和非透明灰度图像，能够复现原始透明度图像的透明效果，从而可以在第一页面中显示原始透明度图像中的至少一个目标对象，无需人工制作配置粒子动画特效所需的动画粒子，降低了页面特效制作成本，并且页面显示所耗计算资源不会随着目标对象数量增多而增加，有效提升了页面显示效率。
附图说明
[0019]为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0020]图1是本申请一个实施例提供的应用程序运行环境的示意图；
[0021]图2是本申请一个实施例提供的页面显示方法的流程图一；
[0022]图3示例性示出了一种应用启动页面的示意图；
[0023]图4是本申请一个实施例提供的页面显示方法的流程图二；
[0024]图5是本申请一个实施例提供的第一图像生成方法的流程图一；
[0025]图6是本申请一个实施例提供的第一图像生成方法的流程图二；
[0026]图7示例性示出了一种将第二图像转换为第三图像的示意图；
[0027]图8示例性示出了一种提取第二图像颜色数据的示意图；
[0028]图9示例性示出了一种将第二图像转换为第四图像的示意图；
[0029]图10示例性示出了一种提取第二图像透明度数据的示意图；
[0030]图11示例性示出了一种第一视频的示意图；
[0031]图12示例性示出了一种第一图像的示意图；
[0032]图13示例性示出了一种过渡动画的示意图；
[0033]图14示例性示出了一种卡片元素的示意图；
[0034]图15示例性示出了一种页面交互流程的示意图；
[0035]图16是本申请一个实施例提供的页面显示方法的流程图三；
[0036]图17示例性示出了拆分第一图像的示意图；
[0037]图18是本申请一个实施例提供的页面显示方法的流程图四；
[0038]图19示例性示出了一种在应用启动页面展示彩带飘落特效的流程示意图；
[0039]图20是本申请一个实施例提供的页面显示装置的框图；
[0040]图21是本申请一个实施例提供的计算机设备的结构框图。
具体实施方式
[0041]在介绍本申请实施例之前，先对本申请方法实施例中可能涉及的应用场景、相关术语或者名词进行简要介绍，以便于本申请领域技术人员理解。
[0042]图形视频处理软件(After Effects，AE)：AE是非线性特效制作软件。针对AE动效(动画效果)在客户端内的展现，相关技术的方案是使用Lottie工作流，或者帧序列方案。
[0043]在使用Lottie工作流进行动效展示的方案中，主要流程为AE项目通过bodymovin插件(AE中的一款插件)导出为Lottie文件，Android/iOS/Web端根据内置对应的Lottie渲染库，针对Lottie文件内容进行解析并渲染，实现动画效果。而本申请实施例中需要在页面中显示的粒子运动特效，比如彩带飘落动效在AE内的原始实现，使用的特效类型为“CC Particle World”(三维粒子运动)。而Lottie所支持的动效集合目前还不支持三维粒子运动，无法通过导出lottie文件来描述粒子动效的动画细节。
[0044]在本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面显示方法，其特征在于，所述方法包括：显示第一页面；获取至少一个待处理图像；其中，所述至少一个待处理图像包括至少一个第二图像对应的第三图像和第四图像，所述至少一个第二图像为包括至少一个目标对象的透明度图像，所述第三图像为用于表征所述第二图像的颜色信息的非透明彩色图像，所述第四图像为用于表征所述第二图像的透明度信息的非透明灰度图像；基于所述第三图像和所述第四图像，在所述第一页面显示所述至少一个目标对象。2.根据权利要求1所述的方法，其特征在于，所述方法应用于设置有目标传感器的终端设备中，所述显示第一页面，包括：在检测到针对目标应用的应用启动指令的情况下，显示所述第一页面；所述基于所述第三图像和所述第四图像，在所述第一页面显示所述至少一个目标对象，包括：在显示所述第一页面的情况下，通过所述目标传感器接收触发操作，所述触发操作是用于触发显示所述至少一个目标对象的操作；响应于所述触发操作，基于所述第三图像和所述第四图像，在所述第一页面显示所述至少一个目标对象。3.根据权利要求1所述的方法，其特征在于，所述方法还包括：确定所述至少一个待处理图像在所述第一页面中对应的至少一个显示图层；所述基于所述第三图像和所述第四图像，在所述第一页面显示所述至少一个目标对象，包括：基于所述第三图像和所述第四图像，在所述至少一个显示图层上显示所述至少一个目标对象。4.根据权利要求1所述的方法，其特征在于，所述至少一个待处理图像包括至少一个第一图像，所述至少一个第一图像对应的生成过程包括：获取第二视频；其中，所述第二视频包括所述至少一个目标对象，所述第二视频中除所述至少一个目标对象之外的区域对应的透明度小于透明度阈值；对所述第二视频进行第一视频转换处理，得到第三视频，所述第三视频用于表征所述第二视频的颜色信息；对所述第二视频进行第二视频转换处理，得到第四视频，所述第四视频用于表征所述第二视频的透明度信息；将所述第三视频与所述第四视频进行融合处理，得到第一视频，所述第一视频包括所述至少一个第一图像。5.根据权利要求4所述的方法，其特征在于，所述第二视频包括所述至少一个第二图像中各像素点在像素色彩通道对应的颜色数据，以及所述各像素点在像素透明度通道对应的透明度数据；所述对所述第二视频进行第一视频转换处理，得到第三视频，包括：基于所述颜色数据，生成所述第三图像，所述第三视频包括所述第三图像；所述对所述第二视频进行第二视频转换处理，得到第四视频，包括：基于所述透明度数据，生成所述第四图像，所述第四视频包括所述第四图像；
所述将所述第三视频与所述第四视频进行融合处理，得到第一视频，包括：将所述第三图像与所述第四图像进行拼接，得到所述至少一个第一图像。6.根据权利要求5所述的方法，其特征在于，所述方法还包括：对所述至少一个第一图像进行拆分处理，得到所述第三图像和所述第四图像；所述基于所述第三图像和所述第四图像，在所述第一...

【专利技术属性】
技术研发人员：崔成杰，王一桐，杨珲，邓军，黄允明，刘思麟，
申请(专利权)人：腾讯科技深圳有限公司，
类型：发明
国别省市：