CN110223367B - 动画显示方法、装置、终端及存储介质 - Google Patents

Abstract

本申请提供了一种动画显示方法、装置、终端及存储介质。该方法包括：获取目标动画的显示资源；根据第一显示资源构建3D模型，以及根据第二显示资源构建2D模型；通过3D容器对3D模型进行非渲染处理得到第一输出帧，以及通过2D容器对2D模型进行非渲染处理得到第二输出帧；对第一输出帧和第二输出帧进行覆盖渲染，得到目标动画的动画帧；在目标动画的显示区域显示目标动画的动画帧。在本申请实施例中，对于同时包括2D模型与3D模型的动画，终端通过2D容器来对2D模型进行处理，通过3D容器来对3D模型进行处理，能够减少终端的处理开销，有效节省终端的处理资源。

Description

动画显示方法、装置、终端及存储介质

技术领域

本申请实施例涉及动画技术领域，特别涉及一种动画显示方法、装置、终端及存储介质。

背景技术

动画是通过把某一对象的表情、动作、变化等分解后生成许多动作瞬间的画面，将这些画面连续播放，给视觉造成连续变化的图画。目前，终端支持动画显示功能。

在相关技术中，当终端需要显示同时包含有三维(3D)模型和二维(2D)模型的动画时，执行如下步骤：终端先从服务端获取该动画的显示资源(包括该动画的图片资源)，之后通过上述显示资源构建出3D模型和2D模型，之后终端采用一个3D容器对上述3D模型和2D模型进行拼装、兼容等处理，生成动画帧，最后在页面上显示该动画帧。

相关技术中，由于采用3D容器对3D模型和2D模型进行处理，3D容器在对2D模型进行处理时，将该2D模型作为一个厚度为0的3D模型，并采用针对3D模型的处理方式来对其进行处理，这会增加终端的处理开销，占用终端过多的处理资源。

发明内容

本申请实施例提供了一种动画显示方法、装置、终端及存储介质，可用于解决相关技术中由于采用3D容器来对2D模型进行处理，导致终端的处理开销增加，处理资源消耗过多的问题。

一方面，本申请实施例提供了一种动画显示方法，所述方法包括：

获取目标动画的显示资源；其中，所述目标动画是包括三维3D模型和二维2D模型的动画，所述显示资源包括用于构建所述3D模型的第一显示资源，以及用于构建所述2D模型的第二显示资源；

根据所述第一显示资源构建所述3D模型，以及根据所述第二显示资源构建所述2D模型；

通过3D容器对所述3D模型进行非渲染处理得到第一输出帧，以及通过2D容器对所述2D模型进行非渲染处理得到第二输出帧；

对所述第一输出帧和所述第二输出帧进行覆盖渲染，得到所述目标动画的动画帧；

在所述目标动画的显示区域中显示所述目标动画的动画帧。

另一方面，本申请实施例提供一种动画显示方法，所述方法包括：

终端向服务器发送请求；

所述服务器根据所述请求获取目标动画的显示资源；其中，所述目标动画是包括三维3D模型和二维2D模型的动画，所述显示资源包括用于构建所述3D模型的第一显示资源，以及用于构建所述2D模型的第二显示资源；

所述服务器向所述终端发送所述目标动画的显示资源；

所述终端根据所述第一显示资源构建所述3D模型，以及根据所述第二显示资源构建所述2D模型；

所述终端通过3D容器对所述3D模型进行非渲染处理得到第一输出帧，以及通过2D容器对所述2D模型进行非渲染处理得到第二输出帧；

所述终端对所述第一输出帧和所述第二输出帧进行覆盖渲染，得到所述目标动画的动画帧；

所述终端在所述目标动画的显示区域中显示所述目标动画的动画帧。

再一方面，本申请实施例提供了一种动画显示装置，所述装置包括：

资源获取模块，用于获取目标动画的显示资源；其中，所述目标动画是包括三维3D模型和二维2D模型的动画，所述显示资源包括用于构建所述3D模型的第一显示资源，以及用于构建所述2D模型的第二显示资源；

第一构建模块，用于根据所述第一显示资源构建所述3D模型；

第二构建模块，用于根据所述第二显示资源构建所述2D模型；

第一处理模块，用于通过3D容器对所述3D模型进行非渲染处理得到第一输出帧；

第二处理模块，用于通过2D容器对所述2D模型进行非渲染处理得到第二输出帧；

覆盖渲染模块，用于对所述第一输出帧和所述第二输出帧进行覆盖渲染，得到所述目标动画的动画帧；

动画显示模块，用于在所述目标动画的显示区域中显示所述目标动画的动画帧。

又一方面，本申请实施例提供了一种终端，所述终端包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现上述方面所述的动画显示方法。

又一方面，本申请实施例提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现上述方面所述的动画显示方法。

又一方面，提供了一种计算机程序产品，当该计算机程序产品被执行时，其用于实现上述方面所述的动画显示方法。

本申请实施例提供的技术方案至少包括如下有益效果：

对于同时包括2D模型与3D模型的动画，终端采用不同的容器对上述2D模型与3D模型分别进行处理，其中，终端采用2D容器来对2D模型进行处理，采用3D容器来对3D模型进行处理，由于采用2D容器对2D模型进行处理所需消耗的处理资源，小于采用3D容器对3D模型进行处理时所需消耗的处理资源，因此相较于相关技术中采用3D模型把2D模型作为3D模型来处理的方式，本申请实施例提供的技术方案，能够减少终端的处理开销，有效节省终端的处理资源。

附图说明

图1是本申请一个实施例提供的实施环境的示意图；

图2是本申请一个实施例提供的动画显示方法的流程图；

图3是本申请一个实施例提供的第一输出帧的示意图；

图4是本申请一个实施例提供的第二输出帧的示意图；

图5是本申请一个实施例提供的动画帧的生成过程的示意图；

图6是本申请一个实施例提供的动画帧的示意图；

图7是本申请一个实施例提供的动画显示方法的网络拓扑图；

图8是本申请另一个实施例提供的动画显示方法的流程图；

图9是本申请另一个实施例提供的动画显示方法的流程图；

图10是本申请一个实施例提供的动画显示装置的框图；

图11是本申请另一个实施例提供的动画显示装置的框图；

图12是本申请一个实施例提供的终端的框图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。

在对本申请实施例进行介绍说明之前，首先对本申请中涉及的一些名词进行简单介绍。

动画：通过把某一对象的表情、动作、变化等分解后生成许多动作瞬间的画面，将这些画面连续播放，给视觉造成连续变化的图画。3D动画是指能够展现3D物体运动的原理及过程的动画。2D动画是指能够展现2D物体运动的原理及过程的动画。

模型：用于呈现动画中的对象(例如人或物体)的形态结构的物件。3D模型是指存在长、宽、高三个维度的立体模型。2D模型是指存在长、宽两个维度的平面模型。

容器：用于对模型进行处理的软件工具。3D容器用于对3D模型进行处理；2D容器用于对2D模型进行处理。

请参考图1，其示出了本申请一个实施例提供的实施环境的示意图。该实施环境可以包括：终端11与服务器12。

终端11可以是诸如手机、平板电脑、电子书阅读器、多媒体播放设备、游戏终端、可穿戴设备、PC(Personal Computer，个人计算机)等电子设备。可选地，终端11中安装运行有目标应用程序，该目标应用程序能够提供动画显示的功能。目标应用程序可以是浏览器，也可以是其它具有动画显示功能的应用程序。在本申请实施例中，主要以目标应用程序为浏览器为例进行介绍说明。

服务器12可以是一台服务器，也可以是一个服务器集群，还可以是一个云计算服务中心。在本申请实施例中，服务器12用于向终端11提供动画的显示资源，比如图片资源、显示动画的页面所涉及的代码资源、用于对动画中的2D模型进行处理的2D容器资源、用于对动画中的3D模型进行处理的3D容器资源，等等。

终端11与服务器12之间可以通过有线网络或无线网络建立通信连接。

本申请实施例提供的方法，各步骤的执行主体可以是终端11，也可以是上述终端11中安装运行的目标应用程序。为了便于说明，在下述方法实施例中，仅以各步骤的执行主体为终端进行介绍说明，但对此不构成限定。

请参考图2，其示出了本申请一个实施例提供的动画显示方法的流程图。该方法可以应用于图1所示实施环境的终端11中。该方法可以包括如下几个步骤(201～205)：

步骤201，获取目标动画的显示资源。

目标动画是包括3D模型和2D模型的动画。有关3D模型和2D模型的介绍说明，可参见上文，此处不再赘述。目标动画可以包括一个3D模型，也可以包括多个3D模型，本申请实施例对此不作限定。类似地，目标动画可以包括一个2D模型，也可以包括多个2D模型，本申请实施例对此也不作限定。

显示资源是指终端在显示目标动画时所需的资源。显示资源包括用于构建3D模型的第一显示资源，以及用于构建2D模型的第二显示资源。用于构建3D模型的第一显示资源可以包括多张图片，上述多张图片中的每张图片用于表示一个视角下的3D模型。另外，上述图片的数量可以根据构建3D模型所需的图片数量实际确定，本申请实施例对此不作限定。用于构建2D模型的第二显示资源可以包括一张或多张图片。

可选地，显示资源还包括对2D模型进行处理的2D容器资源，以及对3D模型进行处理的3D容器资源。上述2D容器资源是指2D容器对应的代码文件，上述3D容器资源是指3D容器对应的代码文件。另外，当终端在Web页面上显示目标动画时，显示资源还包括该Web页面的代码资源。

可选地，终端在接收到对应于目标动画的显示请求时，获取目标动画的显示资源。在一个示例中，当终端在Web页面显示目标动画时，该获取显示资源的过程如下：终端接收对应于该Web页面的访问链接的触发信号，之后终端向服务器发送对应于Web页面的网页访问请求，该网页访问请求携带上述Web页面的标识，比如该Web页面对应的统一资源定位符(Uniform Resource Locator，URL)，服务器根据该资源获取请求返回显示该Web页面所需的资源，显示该Web页面所需的资源中包括目标动画的显示资源。在其它可能的示例中，终端在应用程序界面中显示目标动画，当终端接收到对应于该目标动画的显示请求时，从服务器获取目标动画的显示资源。上述应用程序界面可以是应用程序的启动界面、跳转界面等用户界面，本申请实施例对此不作限定。

步骤202，根据第一显示资源构建3D模型，以及根据第二显示资源构建2D模型。

在本申请实施例中，根据第一显示资源构建3D模型，是指通过上述第一显示资源中的图片，来还原3D模型。终端可以通过如下几种方式来构建3D模型：根据基于单幅图像重建3D模型、采用立体视觉方法重建3D模型，基于侧影轮廓线重建3D模型，基于深度图像重建3D模型等等，本申请实施例对此不作限定。另外，终端所采用的构建3D模型的方式可以根据显示资源中的图片数量，以及内容实际确定。

另外，由于图片是二维的平面结构，而二维模型也是二维的平面结构，因此终端可以直接将用于构建2D模型的第二显示资源中的图片确定为2D模型，而无需复杂的计算步骤。

在本申请实施例中，对构建3D模型和构建2D模型的执行先后顺序不作限定，两者可以先后执行，也可以同步执行。

步骤203，通过3D容器对3D模型进行非渲染处理得到第一输出帧，以及通过2D容器对2D模型进行非渲染处理得到第二输出帧。

第一输出帧中仅存在3D模型，第二输出帧中仅存在2D模型。并且，3D模型在第一输出帧中的位置，与2D模型在第二输出帧中的位置不重合。由于3D模型在目标动画中的展示视角可以是不停切换的，也即每个动画帧所包括的3D模型的展示视角不停变化，因此第一输出帧的数量通常为多个，其可以等于目标动画所包括的动画帧的数量，也可以小于目标动画所包括的动画帧的数量。2D模型在目标动画中可以变化，也可以保持不变，因此第二输出帧的数量可以是一个，也可以是多个。

另外，当3D模型为多个时，3D容器通常只存在一个，由该一个3D容器对上述多个3D模型进行处理。另外，当2D模型为多个时，2D容器也只存在一个，由该一个2D容器对多个2D模型进行处理。

可选地，通过3D容器对3D模型进行非渲染处理得到第一输出帧，包括如下几个子步骤：

步骤203a，通过3D容器确定3D模型在第一输出帧中的第一显示区域；

步骤203b，在第一显示区域中添加3D模型；

步骤203c，对第一输出帧中除第一显示区域之外的第一剩余区域进行透明化处理，得到第一输出帧。

透明化处理是指将第一剩余区域调整为完全透明，以使得第一剩余区域在渲染过后也为完全透明，用户无法查看到该第一剩余区域。可选地。终端对第一剩余区域填充透明颜色，以实现对第一剩余区域进行透明化处理。例如，终端对第一剩余区域填充透明黑色，以实现对第一剩余区域进行透明化处理。

可选地，通过2D容器对2D模型进行非渲染处理得到第二输出帧，包括如下几个子步骤：

步骤203d，通过2D容器确定2D模型在第二输出帧中的第二显示区域；

步骤203e，在第二显示区域中添加2D模型；

步骤203f，对第二输出帧中除第二显示区域之外的第二剩余区域进行透明化处理，得到第二输出帧。

透明化处理是指将第二剩余区域调整为完全透明，以使得第二剩余区域在渲染过后也为完全透明，用户无法查看到该第二剩余区域。可选地。终端对第二剩余区域填充透明颜色，以实现对第二剩余区域进行透明化处理。例如，终端对第二剩余区域填充透明黑色，以实现对第二剩余区域进行透明化处理。

在本申请实施例中，对通过3D容器对3D模型进行非渲染处理和通过2D容器对2D模型进行非渲染处理的执行先后顺序不作限定，两者可以先后执行，也可以同步执行。

结合参考图3，其示出了本申请一个实施例提供的第一输出帧的示意图。该第一输出帧31中包括3D模型32，该3D模型32之外的第一剩余区域进行透明化处理。结合参考图4，其示出了本申请一个实施例提供的第二输出帧的示意图。该第二输出帧41中包括2D模型42，该2D模型42之外的第二剩余区域进行透明化处理。

步骤204，对第一输出帧和第二输出帧进行覆盖渲染，得到目标动画的动画帧。

可选地，终端对第一输出帧和第二输出帧分别执行覆盖及渲染步骤，以生成目标动画的动画帧。另外，在本申请实施例中，终端对覆盖及渲染两个步骤的执行顺序不作限定，终端可以先执行渲染步骤，再执行覆盖步骤；也可以先执行覆盖步骤，再执行渲染步骤。

当终端先执行渲染步骤，再执行覆盖步骤时，步骤204可以具体实现为如下几个子步骤(204a～204c)：

步骤204a，对第一输出帧进行渲染，得到第一渲染结果；

步骤204b，对第二输出帧进行渲染，得到第二渲染结果；

步骤204c，将第一渲染结果覆盖在第二渲染结果之上，或者将第二渲染结果覆盖在第一渲染结果之上，得到目标动画的动画帧。

当终端先执行覆盖步骤，再执行渲染步骤时，步骤204可以具体实现为如下几个子步骤(204d～204e)：

步骤204d，将第一输出帧覆盖在第二输出帧之上，或者将第二输出帧覆盖在第一输出帧之上，得到覆盖结果；

步骤204e，对覆盖结果进行渲染，得到目标动画的动画帧。

结合参考图5，其示出了本申请实施例示出的动画帧的生成过程的示意图。终端对第一输出帧31、第二输出帧41进行覆盖渲染，得到动画帧51。

结合参考图6，其示出了本申请另一个实施例示出的动画帧的生成示意图。终端通过3D容器对3D模型进行处理，得到第一输出帧61，通过2D容器对2D模型进行处理，得到第二输出帧62，之后将第一输出帧61与第二输出帧62进行覆盖渲染，得到动画帧63。

步骤205，在显示目标动画的显示区域显示目标动画的动画帧。

终端在显示目标动画的显示区域显示目标动画的动画帧。

可选地，步骤205可以包括如下两个子步骤(步骤205a-205b)：

步骤205a，对动画帧中2D模型与3D模型的衔接部分进行模糊化处理，得到模糊化处理后的动画帧；

2D模型与3D模型的衔接部分是指包括3D模型的边缘部分，且包括2D模型中与3D模型之间的距离小于预设阈值的区域。上述预设阈值可以根据实际需求设定，本申请实施例对此不作限定。

模糊化处理用于模糊上述衔接部分的画面细节，以使得2D模型与3D模型衔接地更加自然、流畅，以提高动画帧的显示效果。可选地，终端对上述衔接部分进行模糊化处理可以通过如下任意一种实现：通过线性滤波器对上述衔接部分进行处理、通过归一化滤波器对上述衔接部分进行处理等。

步骤205b，在目标动画的显示区域中显示模糊化处理后的动画帧。

终端在显示目标动画的显示区域显示模糊化处理后的动画帧。

上述仅以目标动画中的一个动画帧的生成过程进行了介绍说明，目标动画中包括多个动画帧，终端可以采用同样的方法生成该多个动画帧，并按照顺序依次逐帧进行显示。

在一个具体的例子中，结合参考图7，其示出了本申请一个实施例示出的动画显示方法的网络拓扑图。移动端需要在浏览器中的某一Web页面中显示目标动画时，先对该Web页面进行初始化，之后从云端拉取相关数据(目标动画的显示资源)，并将上述数据存储至本地，之后向前端回吐，最终前端本地化资源，并在页面上展示上述目标动画。其中，在向前端回吐的过程中，由2D容器对2D模型进行处理，由3D容器对3D模型进行处理；在前端本地化资源的过程中，终端对得到的两个处理结果进行覆盖渲染。

在一个具体的例子中，结合参考图8，其示出了本申请一个实施例示出的动画显示方法的流程图。终端先下载显示目标动画所需的资源，之后在本地存储上述资源，之后通过2个容器分别进行非渲染拼装，得到两个当前帧，最后将上述两个当前帧进行覆盖合并。

综上所述，本申请实施例提供的技术方案，对于同时包括2D模型与3D模型的动画，终端采用不同的容器对上述2D模型与3D模型分别进行处理，其中，终端采用2D容器来对2D模型进行处理，采用3D容器来对3D模型进行处理，由于采用2D容器对2D模型进行处理所需消耗的处理资源，小于采用3D容器对3D模型进行处理时所需消耗的处理资源，因此相较于相关技术中采用3D模型把2D模型作为3D模型来处理的方式，本申请实施例提供的技术方案，能够减少终端的处理开销，有效节省终端的处理资源。

还通过对动画帧中2D模型和3D模型的衔接部分进行模糊化处理，以使得2D模型与3D模型衔接地更加自然流畅，进而提升动画的显示效果。

在基于图2所示实施例提供的一个可选实施例中，在步骤204之前，该动画显示方法还包括如下步骤：

步骤301，根据第二输出帧中的2D模型的尺寸，对第一输出帧中的第一剩余区域进行适配处理，得到适配处理后的第一输出帧；

上述适配处理可以包括尺寸变换、裁剪等等。适配处理后的第一输出帧中的第一剩余区域与2D模型相匹配，也即上述第一剩余区域的尺寸与2D模型的尺寸之间的差值小于第一预设阈值。上述第一预设阈值可以根据实际需求设定，本申请实施例对此不作限定。可选地，上述第一剩余区域的尺寸与2D模型的尺寸相同。

步骤302，根据第一输出帧中的3D模型的尺寸，对第二输出帧中的第二剩余区域进行适配处理，得到适配处理后的第二输出帧；

上述适配处理可以包括尺寸变换、裁剪等等。适配处理后的第二输出帧中的第二剩余区域与3D模型相匹配，也即上述第二剩余区域的尺寸与3D模型的尺寸之间的差值小于第二预设阈值。上述第二预设阈值可以根据实际需求设定，本申请实施例对此不作限定。可选地，上述第二剩余区域的尺寸与3D模型的尺寸相同。

其中，目标动画的动画帧是对适配处理后的第一输出帧和适配处理后的第二输出帧进行覆盖渲染得到的。

综上所述，本申请实施例提供的技术方案，还通过根据2D模型的尺寸，对第一输出帧中的第一剩余区域进行适配处理，并根据3D模型的尺寸，对第二输出帧中的第二剩余区域进行适配处理，后续将第一输出帧与第二输出帧进行覆盖渲染时可以避免2D模型与第一剩余区域不匹配，以及3D模型与第二剩余区域不匹配时导致的覆盖效果不佳的情况，从而提升动画帧的显示效果。

目标动画可以在不同的终端上显示，然而不同的终端的显示区域通常不相同，因此在显示目标动画之前，通常需要对其进行兼容处理，以适配待显示目标动画的终端。

在基于图2所示实施例提供的一个可选实施例中，在步骤204之前，该动画显示方法还包括如下步骤：

步骤303，根据显示区域的显示特性对第一输出帧进行兼容处理，得到兼容处理后的第一输出帧；

步骤304，根据显示特性对第二输出帧进行兼容处理，得到兼容处理后的第二输出帧。

显示区域的显示特性可以包括分辨率以及显示区域的尺寸，例如宽高比。可选地，显示区域宽高比为第一比例，对第一输出帧进行兼容处理也即是将第一输出帧的宽高比调整至第一比例。可选地，显示区域宽高比为第一比例，对第二输出帧进行兼容处理也即是将第二输出帧的宽高比调整至第一比例。

兼容处理后的第一输出帧，与兼容处理后的第二输出帧，被用于覆盖渲染，以得到目标动画的动画帧，目标动画的动画帧被用于在显示区域显示。

在本申请其它可能的实施例中，终端也可以在显示动画帧之前，对该动画帧进行兼容处理，兼容处理后的动画帧被用于在显示区域进行显示。

综上所述，本申请实施例提供的技术方案，还通过显示区域的显示特性对第一输出帧、第二输出帧进行兼容处理，后续通过显示区域来显示动画帧时，可以避免动画帧与显示区域不兼容的情况出现，从而提升动画帧的显示效果。

另外，本申请实施例对步骤301-302、步骤303-304的执行顺序不作限定。终端可以先执行步骤301-302，再执行步骤303-304；也可以先执行步骤303-304，再执行步骤301-302。

请参考图9，其示出了本申请一个实施例示出的动画显示方法的流程图。该方法可以应用于图1所示实施环境。该方法包括：

步骤901，终端向服务器发送请求。

可选地，上述请求为对应于目标Web页面的访问请求。目标Web页面是用于显示目标动画的Web页面。可选地，终端显示有目标Web页面的访问链接，当终端接收到作用于该访问链接的触发信号时，向服务器发送对应于目标Web页面的访问请求。

步骤902，服务器根据请求获取目标动画的显示资源。

目标动画是包括三维3D模型和二维2D模型的动画，显示资源包括用于构建3D模型的第一显示资源，以及用于构建2D模型的第二显示资源。可选地，服务器保存有目标动画的标识与显示资源的对应关系，服务器根据该对应关系获取目标动画的显示资源。

当请求为对应于目标Web页面的访问请求时，步骤902可以实现为：服务器获取目标Web页面的网页资源，网页资源包括目标Web页面的代码资源和目标动画的显示资源。

步骤903，服务器向终端发送目标动画的显示资源。

当请求为对应于目标Web页面的访问请求时，步骤903可以实现为：服务器向终端发送目标Web页面的网页资源，网页资源包括目标Web页面的代码资源和目标动画的显示资源。

步骤904，终端根据第一显示资源构建3D模型，以及根据第二显示资源构建2D模型。

步骤905，终端通过3D容器对3D模型进行非渲染处理得到第一输出帧，以及通过2D容器对2D模型进行非渲染处理得到第二输出帧。

步骤906，终端对第一输出帧和第二输出帧进行覆盖渲染，得到目标动画的动画帧。

步骤907，终端在目标动画的显示区域中显示目标动画的动画帧。步骤904至步骤907的解释说明可以参考步骤202至步骤205，此处不作赘述。

下述为本申请装置实施例，可以用于执行本申请方法实施例。对于本申请装置实施例中未披露的细节，请参照本申请方法实施例。

请参考图10，其示出了本申请一个实施例提供的动画显示装置的框图。该装置具有实现上述方法的功能，所述功能可以由硬件实现，也可以由硬件执行相应的软件实现。该装置可以包括：

资源获取模块1001，用于获取目标动画的显示资源；其中，所述目标动画是包括三维3D模型和二维2D模型的动画，所述显示资源包括用于构建所述3D模型的第一显示资源，以及用于构建所述2D模型的第二显示资源。

第一构建模块1002，用于根据所述第一显示资源构建所述3D模型。

第二构建模块1003，用于根据所述第二显示资源构建所述2D模型。

第一处理模块1004，用于通过3D容器对所述3D模型进行非渲染处理得到第一输出帧。

第二处理模块1005，用于通过2D容器对所述2D模型进行非渲染处理得到第二输出帧。

覆盖渲染模块1006，用于对所述第一输出帧和所述第二输出帧进行覆盖渲染，得到所述目标动画的动画帧。

动画显示模块1007，用于在所述目标动画的显示区域中显示所述目标动画的动画帧。

综上所述，本申请实施例提供的技术方案，对于同时包括2D模型与3D模型的动画，终端采用不同的容器对上述2D模型与3D模型分别进行处理，其中，终端采用2D容器来对2D模型进行处理，采用3D容器来对3D模型进行处理，由于采用2D容器对2D模型进行处理所需消耗的处理资源，小于采用3D容器对3D模型进行处理时所需消耗的处理资源，因此相较于相关技术中采用3D模型把2D模型作为3D模型来处理的方式，本申请实施例提供的技术方案，能够减少终端的处理开销，有效节省终端的处理资源。

在基于图10所示实施例提供的一个可选实施例中，所述第一处理模块1004，用于：

通过所述3D容器确定所述3D模型在所述第一输出帧中的第一显示区域；

在所述第一显示区域中添加所述3D模型；

对所述第一输出帧中除所述第一显示区域之外的第一剩余区域进行透明化处理，得到所述第一输出帧。

在基于图10所示实施例提供的一个可选实施例中，所述第二处理模块1005，

通过所述2D容器确定所述2D模型在所述第二输出帧中的第二显示区域；

在所述第二显示区域中添加所述2D模型；

对所述第二输出帧中除所述第二显示区域之外的第二剩余区域进行透明化处理，得到所述第二输出帧。

在基于图8所示实施例提供的一个可选实施例中，所述覆盖渲染模块1006，用于：

将所述第一输出帧覆盖在所述第二输出帧之上，或者将所述第二输出帧覆盖在所述第一输出帧之上，得到覆盖结果；

对所述覆盖结果进行渲染，得到所述目标动画的动画帧。

在基于图10所示实施例提供的一个可选实施例中，所述覆盖渲染模块1006，用于：

对所述第一输出帧进行渲染，得到第一渲染结果；

对所述第二输出帧进行渲染，得到第二渲染结果；

将所述第一渲染结果覆盖在所述第二渲染结果之上，或者将所述第二渲染结果覆盖在所述第一渲染结果之上，得到所述目标动画的动画帧。

在基于图10所示实施例提供的一个可选实施例中，请参考图11，所述装置还包括：第三处理模块1008和第四处理模块1009。

所述第三处理模块1008，用于根据所述第二输出帧中的所述2D模型的尺寸，对所述第一输出帧中的所述第一剩余区域进行适配处理，得到适配处理后的第一输出帧。

所述第四处理模块1009，用于根据所述第一输出帧中的所述3D模型的尺寸，对所述第二输出帧中的所述第二剩余区域进行适配处理，得到适配处理后的第二输出帧。

其中，所述目标动画的动画帧是对所述适配处理后的第一输出帧和所述适配处理后的第二输出帧进行覆盖渲染得到的。

在基于图10所示实施例提供的一个可选实施例中，请参考图11，所述装置还包括：第五处理模块1010和第六处理模块1011。

第五处理模块1010，用于根据所述显示区域的显示特性对所述第一输出帧进行兼容处理，得到兼容处理后的所述第一输出帧。

第六处理模块1011，用于根据所述显示区域的显示特性对所述第二输出帧进行兼容处理，得到兼容处理后的所述第二输出帧。

其中，所述目标动画的动画帧是对所述兼容处理后的第一输出帧和所述兼容处理后的第二输出帧进行覆盖渲染得到的。

在基于图10所示实施例提供的一个可选实施例中，请参考图10，所述动画显示模块1007，用于：

对所述动画帧中所述2D模型与所述3D模型的衔接部分进行模糊化处理，得到模糊化处理后的动画帧；

在所述目标动画的显示区域中显示所述模糊化处理后的动画帧。

图12示出了本申请一个示例性实施例提供的终端1200的结构框图。该终端1200可以是：智能手机、平板电脑、MP3播放器(Moving Picture Experts Group Audio LayerIII，动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group AudioLayer IV，动态影像专家压缩标准音频层面4)播放器、笔记本电脑或台式电脑。终端1200还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。

通常，终端1200包括有：处理器1201和存储器1202。

处理器1201可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器1201可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器1201也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器1201可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器1201还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。

存储器1202可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器1202还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器1202中的非暂态的计算机可读存储介质用于存储至少一条指令、至少一段程序、代码集或指令集，该至少一条指令、所述至少一段程序、所述代码集或指令集用于被处理器1201所执行以实现本申请中方法实施例提供的动画显示方法。

在一些实施例中，终端1200还可选包括有：外围设备接口1203和至少一个外围设备。处理器1201、存储器1202和外围设备接口1203之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口1203相连。具体地，外围设备包括：显示屏1205、音频电路1207、定位组件1208和电源1209中的至少一种。

本领域技术人员可以理解，图12中示出的结构并不构成对终端1200的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

在示例性实施例中，还提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由电子设备的处理器加载并执行以实现上述方法实施例中的动画显示方法。

可选地，上述计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

在示例性实施例中，还提供了一种计算机程序产品，当该计算机程序产品被执行时，其用于执行上述动画显示方法。

应当理解的是，在本文中提及的“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。本文中使用的“第一”、“第二”以及类似的词语并不表示任何顺序、数量或者重要性，而只是用来区分不同的组成部分。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

以上仅为本申请的示例性实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (11)

1.一种动画显示方法，其特征在于，所述方法包括：

获取目标动画的显示资源；其中，所述目标动画是包括三维3D模型和二维2D模型的动画，所述显示资源包括用于构建所述3D模型的第一显示资源，以及用于构建所述2D模型的第二显示资源；

根据所述第一显示资源构建所述3D模型，以及根据所述第二显示资源构建所述2D模型；

通过3D容器确定所述3D模型在第一输出帧中的第一显示区域；在所述第一显示区域中添加所述3D模型；对所述第一输出帧中除所述第一显示区域之外的第一剩余区域进行透明化处理，得到所述第一输出帧；

通过2D容器确定所述2D模型在第二输出帧中的第二显示区域；在所述第二显示区域中添加所述2D模型；对所述第二输出帧中除所述第二显示区域之外的第二剩余区域进行透明化处理，得到所述第二输出帧；

对所述第一输出帧和所述第二输出帧进行覆盖渲染，得到所述目标动画的动画帧；

在所述目标动画的显示区域中显示所述目标动画的动画帧。

2.根据权利要求1所述的方法，其特征在于，所述对所述第一输出帧和所述第二输出帧进行覆盖渲染，得到所述目标动画的动画帧，包括：

将所述第一输出帧覆盖在所述第二输出帧之上，或者将所述第二输出帧覆盖在所述第一输出帧之上，得到覆盖结果；

对所述覆盖结果进行渲染，得到所述目标动画的动画帧。

3.根据权利要求1所述的方法，其特征在于，所述对所述第一输出帧和所述第二输出帧进行覆盖渲染，得到所述目标动画的动画帧，包括：

对所述第一输出帧进行渲染，得到第一渲染结果；

对所述第二输出帧进行渲染，得到第二渲染结果；

将所述第一渲染结果覆盖在所述第二渲染结果之上，或者将所述第二渲染结果覆盖在所述第一渲染结果之上，得到所述目标动画的动画帧。

4.根据权利要求1至3任一项所述的方法，其特征在于，所述对所述第一输出帧和所述第二输出帧进行覆盖渲染，得到所述目标动画的动画帧之前，还包括：

根据所述第二输出帧中的所述2D模型的尺寸，对所述第一输出帧中的所述第一剩余区域进行适配处理，得到适配处理后的第一输出帧；

根据所述第一输出帧中的所述3D模型的尺寸，对所述第二输出帧中的所述第二剩余区域进行适配处理，得到适配处理后的第二输出帧；

其中，所述目标动画的动画帧是对所述适配处理后的第一输出帧和所述适配处理后的第二输出帧进行覆盖渲染得到的。

5.根据权利要求1至3任一项所述的方法，其特征在于，所述对所述第一输出帧和所述第二输出帧进行覆盖渲染，得到所述目标动画的动画帧之前，还包括：

根据所述显示区域的显示特性对所述第一输出帧进行兼容处理，得到兼容处理后的第一输出帧；

根据所述显示区域的显示特性对所述第二输出帧进行兼容处理，得到兼容处理后的第二输出帧；

其中，所述目标动画的动画帧是对所述兼容处理后的第一输出帧和所述兼容处理后的第二输出帧进行覆盖渲染得到的。

6.根据权利要求1至3任一项所述的方法，其特征在于，所述在所述目标动画的显示区域中显示所述目标动画的动画帧，包括：

对所述动画帧中所述2D模型与所述3D模型的衔接部分进行模糊化处理，得到模糊化处理后的动画帧；

在所述目标动画的显示区域中显示所述模糊化处理后的动画帧。

7.一种动画显示方法，其特征在于，所述方法包括：

终端向服务器发送请求；

所述服务器根据所述请求获取目标动画的显示资源；其中，所述目标动画是包括三维3D模型和二维2D模型的动画，所述显示资源包括用于构建所述3D模型的第一显示资源，以及用于构建所述2D模型的第二显示资源；

所述服务器向所述终端发送所述目标动画的显示资源；

所述终端根据所述第一显示资源构建所述3D模型，以及根据所述第二显示资源构建所述2D模型；

所述终端通过3D容器确定所述3D模型在第一输出帧中的第一显示区域；在所述第一显示区域中添加所述3D模型；对所述第一输出帧中除所述第一显示区域之外的第一剩余区域进行透明化处理，得到所述第一输出帧；以及通过2D容器确定所述2D模型在第二输出帧中的第二显示区域；在所述第二显示区域中添加所述2D模型；对所述第二输出帧中除所述第二显示区域之外的第二剩余区域进行透明化处理，得到所述第二输出帧；

所述终端对所述第一输出帧和所述第二输出帧进行覆盖渲染，得到所述目标动画的动画帧；

所述终端在所述目标动画的显示区域中显示所述目标动画的动画帧。

8.根据权利要求7所述的方法，其特征在于，所述请求为对应于目标Web页面的网页访问请求，所述目标Web页面是用于显示所述目标动画的Web页面；

所述服务器向所述终端发送所述目标动画的显示资源，包括：

所述服务器向所述终端发送所述目标Web页面的网页资源，所述网页资源包括所述目标Web页面的代码资源和所述目标动画的显示资源。

9.一种动画显示装置，其特征在于，所述装置包括：

资源获取模块，用于获取目标动画的显示资源；其中，所述目标动画是包括三维3D模型和二维2D模型的动画，所述显示资源包括用于构建所述3D模型的第一显示资源，以及用于构建所述2D模型的第二显示资源；

第一构建模块，用于根据所述第一显示资源构建所述3D模型；

第二构建模块，用于根据所述第二显示资源构建所述2D模型；

第一处理模块，用于通过3D容器确定所述3D模型在第一输出帧中的第一显示区域；在所述第一显示区域中添加所述3D模型；对所述第一输出帧中除所述第一显示区域之外的第一剩余区域进行透明化处理，得到所述第一输出帧；

第二处理模块，用于通过2D容器确定所述2D模型在第二输出帧中的第二显示区域；在所述第二显示区域中添加所述2D模型；对所述第二输出帧中除所述第二显示区域之外的第二剩余区域进行透明化处理，得到所述第二输出帧；

覆盖渲染模块，用于对所述第一输出帧和所述第二输出帧进行覆盖渲染，得到所述目标动画的动画帧；

动画显示模块，用于在所述目标动画的显示区域中显示所述目标动画的动画帧。

10.一种终端，其特征在于，所述终端包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如权利要求1至6任一项所述的动画显示方法。

11.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如权利要求1至6任一项所述的动画显示方法。

Images