CN109191549B - 显示动画的方法及装置 - Google Patents

Abstract

本发明公开了一种显示动画的方法及装置，属于互联网技术领域。所述方法包括：接收服务器发送的动画视频数据，其中，所述动画视频数据的每个视频帧包括动画区域图像和背景区域图像；基于画布canvas对象，提取所述动画视频数据的视频帧中的多个图像；将提取的图像中的背景区域图像调整为透明；对调整后的图像进行顺序显示。采用本发明，可以提高显示动画的成功率。

Description

显示动画的方法及装置

技术领域

本发明涉及互联网技术领域，特别涉及一种显示动画的方法及装置。

背景技术

终端在显示网页时，可以在网页中显示动画。

动画对应的动画数据一般采用Flash(闪客)动画的数据格式。终端通过浏览器来显示网页以及其中的动画。浏览器中安装有Flash控件，当接收到服务器发送的动画数据时，通过上述Flash控件对动画数据进行解析并渲染，得到动画，进而将动画显示在网页中。

在实现本发明的过程中，发明人发现现有技术至少存在以下问题：

Flash控件不是浏览器默认安装的控件，当浏览器未安装Flash控件时，浏览器接收到动画数据后将不能显示动画，导致显示动画的成功率较低。

发明内容

本发明实施例提供了一种显示动画的方法及装置，可以提高显示动画的成功率。所述技术方案如下：

第一方面，提供了一种显示动画的方法，该方法应用于终端，该方法包括：

接收服务器发送的动画视频数据，其中，所述动画视频数据的每个视频帧包括动画区域图像和背景区域图像；

基于canvas(画布)对象，提取所述动画视频数据的视频帧中的多个图像；

将提取的图像中的背景区域图像调整为透明；

对调整后的图像进行顺序显示。

可选的，所述动画视频数据包括第一子视频数据和第二子视频数据，所述第一子视频数据用于指示动画对应的RGB(Red Green Blue，红绿蓝)三通道数据，所述第二子视频数据用于指示动画对应的Alpha(阿尔法)通道数据；

所述基于canvas对象，提取所述动画视频数据的视频帧中的多个图像，包括：

获取所述动画视频数据中的所述第一子视频数据和所述第二子视频数据，后台播放所述第一子视频数据对应的视频和所述第二子视频数据对应的视频；

基于所述canvas对象的图像绘制功能，在后台播放的所述第一子视频数据对应的视频和所述第二子视频数据对应的视频中，周期性提取所述第一子视频数据的第一子图像和所述第二子视频数据的第二子图像，得到所述动画视频数据的视频帧中的多个图像。

可选的，所述将提取的图像中的背景区域图像调整为透明，包括：

基于所述canvas对象的图像获取功能，获取所述多个图像的图像数据，所述图像数据包括各个像素点的红色数值、绿色数值、蓝色数值和Alpha数值，所述Alpha数值用于指示像素点的透明度；

基于所述第二子图像的图像数据，将所述第一子图像的背景区域图像的Alpha数值调整为所指示的透明度为透明的Alpha数值。

可选的，在所述第二子图像中，动画区域图像的像素点之间数据相同，背景区域图像的像素点之间数据相同，动画区域图像和背景区域图像的像素点之间数据不同；

每个第一子图像具有相对应的第二子图像，每个第一子图像的动画区域图像与对应的第二子图像的动画区域图像的像素点的位置相同，每个第一子图像的背景区域图像与对应的第二子图像的背景区域图像的像素点的位置相同；

所述基于所述第二子图像的图像数据，将所述第一子图像的背景区域图像的Alpha数值调整为所指示的透明度为透明的Alpha数值，包括：

对于每个第一子图像与对应的第二子图像，将所述第一子图像中，与所述第二子图像的背景区域图像相对应的像素点的Alpha数值，调整为所指示的透明度为透明的Alpha数值。

可选的，所述第二子图像的动画区域图像中每个像素点的蓝色数值，与所指示的透明度为不透明的Alpha数值相等；所述第二子图像的背景区域图像中每个像素点的蓝色数值，与所指示的透明度为透明的Alpha数值相等；

所述将所述第一子图像中，与所述第二子图像的背景区域图像相对应的像素点的Alpha数值，调整为所指示的透明度为透明的Alpha数值，包括：

获取所述第二子图像中每个像素点的蓝色数值；

将所述第一子图像中每个像素点的Alpha数值，调整为所述第二子图像中对应像素点的蓝色数值。

可选的，所述对调整后的图像进行顺序显示，包括：

按照图像调整的先后顺序，周期性显示调整后的图像。

第二方面，提供了一种显示动画的方法，该方法应用于服务器，该方法包括：

在制作动画的过程中，基于动画对应的RGB三通道数据导出第一子视频数据，基于动画对应的Alpha通道数据导出第二子视频数据；

基于所述第一子视频数据和所述第二子视频数据，生成动画视频数据；

向终端发送所述动画视频数据。

可选的，所述基于所述第一子视频数据和所述第二子视频数据，生成动画视频数据，包括：

将所述第一子视频数据和所述第二子视频数据进行拼接，生成动画视频数据。

第三方面，提供了一种显示动画的装置，该装置应用于终端，该装置包括：

接收模块，用于接收服务器发送的动画视频数据，其中，所述动画视频数据的每个视频帧包括动画区域图像和背景区域图像；

提取模块，用于基于canvas对象，提取所述动画视频数据的视频帧中的多个图像；

调整模块，用于将提取的图像中的背景区域图像调整为透明；

显示模块，用于对调整后的图像进行顺序显示。

可选的，所述动画视频数据包括第一子视频数据和第二子视频数据，所述第一子视频数据用于指示动画对应的RGB三通道数据，所述第二子视频数据用于指示动画对应的Alpha通道数据；

所述提取模块，用于：

获取所述动画视频数据中的所述第一子视频数据和所述第二子视频数据，后台播放所述第一子视频数据对应的视频和所述第二子视频数据对应的视频；

基于所述canvas对象的图像绘制功能，在后台播放的所述第一子视频数据对应的视频和所述第二子视频数据对应的视频中，周期性提取所述第一子视频数据的第一子图像和所述第二子视频数据的第二子图像，得到所述动画视频数据的视频帧中的多个图像。

可选的，所述调整模块，用于：

基于所述canvas对象的图像获取功能，获取所述多个图像的图像数据，所述图像数据包括各个像素点的红色数值、绿色数值、蓝色数值和Alpha数值，所述Alpha数值用于指示像素点的透明度；

基于所述第二子图像的图像数据，将所述第一子图像的背景区域图像的Alpha数值调整为所指示的透明度为透明的Alpha数值。

可选的，在所述第二子图像中，动画区域图像的像素点之间数据相同，背景区域图像的像素点之间数据相同，动画区域图像和背景区域图像的像素点之间数据不同；

每个第一子图像具有相对应的第二子图像，每个第一子图像的动画区域图像与对应的第二子图像的动画区域图像的像素点的位置相同，每个第一子图像的背景区域图像与对应的第二子图像的背景区域图像的像素点的位置相同；

所述调整模块，用于：

对于每个第一子图像与对应的第二子图像，将所述第一子图像中，与所述第二子图像的背景区域图像相对应的像素点的Alpha数值，调整为所指示的透明度为透明的Alpha数值。

可选的，所述第二子图像的动画区域图像中每个像素点的蓝色数值，与所指示的透明度为不透明的Alpha数值相等；所述第二子图像的背景区域图像中每个像素点的蓝色数值，与所指示的透明度为透明的Alpha数值相等；

所述调整模块，用于：

获取所述第二子图像中每个像素点的蓝色数值；

将所述第一子图像中每个像素点的Alpha数值，调整为所述第二子图像中对应像素点的蓝色数值。

可选的，所述显示模块，用于：

按照图像调整的先后顺序，周期性显示调整后的图像。

第四方面，提供了一种显示动画的装置，该装置应用于服务器，该装置包括：

导出模块，用于在制作动画的过程中，基于动画对应的RGB三通道数据导出第一子视频数据，基于动画对应的Alpha通道数据导出第二子视频数据；

生成模块，用于基于所述第一子视频数据和所述第二子视频数据，生成动画视频数据；

发送模块，用于向终端发送所述动画视频数据。

可选的，所述生成模块用于：

将所述第一子视频数据和所述第二子视频数据进行拼接，生成动画视频数据。

第五方面，提供了一种显示动画的***，该***包括服务器和终端，其中：

所述终端，用于接收所述服务器发送的动画视频数据，其中，所述动画视频数据的每个视频帧包括动画区域图像和背景区域图像；基于canvas对象，提取所述动画视频数据的视频帧中的多个图像；将提取的图像中的背景区域图像调整为透明；对调整后的图像进行顺序显示；

所述服务器，用于在制作动画的过程中，基于动画对应的RGB三通道数据导出第一子视频数据，基于动画对应的Alpha通道数据导出第二子视频数据；基于所述第一子视频数据和所述第二子视频数据，生成动画视频数据；向所述终端发送所述动画视频数据。

第六方面，提供了一种终端，所述终端包括处理器和存储器，所述存储器中存储有至少一条指令，所述至少一条指令由所述处理器加载并执行以实现如第一方面所述的显示动画的方法。

第七方面，提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令，所述至少一条指令由终端的处理器加载并执行以实现如第一方面所述的显示动画的方法。

第八方面，提供了一种服务器，所述服务器包括处理器和存储器，所述存储器中存储有至少一条指令，所述至少一条指令由所述处理器加载并执行以实现如第二方面所述的显示动画的方法。

第九方面，提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令，所述至少一条指令由服务器的处理器加载并执行以实现如第二方面所述的显示动画的方法。

本发明实施例提供的技术方案带来的有益效果是：

本发明实施例中，终端可以通过canvas对象来绘制动画的图像，由于canvas对象是HTML5协议的组件，不需要浏览器或其它应用程序额外进行安装，因此上述实施例提供的方法可以适用于更多的浏览器或其它应用程序中，提高显示动画的成功率。

附图说明

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

图1是本发明实施例提供的一种实施环境图；

图2是本发明实施例提供的一种服务器侧的显示动画的方法流程图；

图3是本发明实施例提供的一种视频图像示意图；

图4是本发明实施例提供的一种视频图像示意图；

图5是本发明实施例提供的一种终端侧的显示动画的方法流程图；

图6是本发明实施例提供的一种显示动画的装置示意图；

图7是本发明实施例提供的一种显示动画的装置示意图；

图8是本发明实施例提供的一种终端的结构示意图；

图9是本发明实施例提供的一种服务器的结构示意图。

具体实施方式

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

图1是本发明实施例提供的一种实施环境图。该实施环境可以包括多个终端101、用于为该多个终端101提供服务的服务器102。多个终端101通过无线或者有线网络和服务器102连接，该多个终端101可以为能够访问服务器102的计算机设备或智能终端等。终端101中可以安装有浏览器等应用程序，服务器102可以为上述浏览器提供后台服务。服务器102中还可以具有至少一种数据库，用以存储动画的视频数据等等。

本发明实施例提供了一种显示动画的方法，该方法可以由服务器与终端共同实现。

如图2所示的服务器侧的显示动画的方法流程图，服务器侧的处理流程可以包括如下的步骤：

在步骤201中，服务器在制作动画的过程中，基于动画对应的RGB三通道数据导出第一子视频数据，基于动画对应的Alpha通道数据导出第二子视频数据。

也即，第一子视频数据可以用于指示动画对应的红绿蓝RGB三通道数据，第二子视频数据可以用于指示动画对应的Alpha通道数据。

其中，RGB三通道可以是指分别保存图像的红色、绿色、蓝色颜色信息的三种通道。任意设备播放上述第一子视频数据时，可以按照视频帧的顺序显示预设尺寸的视频图像，如图3所示的视频图像示意图，该视频图像中可以包括动画区域图像以及背景区域图像，该动画区域图像可以具有动画原本的色彩，该背景区域图像可以是纯色的图像(如黑色的图像)。

Alpha通道可以是用于指示像素点的透明度的灰度通道，白色的像素点对应的透明度可以是不透明，黑色对应的透明度可以是透明，灰色对应的透明度可以是半透明。由于第一子视频数据与第二子视频数据都是同一动画导出的数据，则任意设备播放上述第二子视频数据时，与上述播放第一子视频数据相类似，区别在于，如图4所示的视频图像示意图，此时的视频图像中，动画区域图像和背景区域图像均为纯色的图像，动画区域图像和背景区域图像的图像不同，例如，动画区域图像可以是白色的图像，背景区域图像可以是黑色的图像。

在实施中，网页中可以显示动画的效果，例如，利用动画效果显示广告，或者，在直播间显示礼物的动画效果。在此之前，技术人员可以预先对动画进行制作。服务器可以提供制作动画的功能，制作完成时，技术人员可以通过提供的通道功能，生成动画对应的RGB三通道数据以及Alpha通道数据。然后，服务器可以基于上述RGB三通道数据导出第一子视频数据，基于上述Alpha通道数据导出第二子视频数据。导出第一子视频数据和第二子视频数据的操作没有必然的时间顺序，本实施例对此不做限定。第一子视频数据和第二子视频数据的格式可以是预设的视频格式，例如MP4(Moving Picture Experts Group Audio LayerIV，动态影像专家压缩标准音频层面4)格式，本实施例对具体的视频格式不作限定。

在步骤202中，服务器基于第一子视频数据和第二子视频数据，生成动画视频数据。

服务器在导出第一子视频数据和第二子视频数据后，可以将两个独立的视频进行合并，生成动画视频数据，进而可以将动画视频数据进行存储。

在一种可能的实施方式中，服务器合并两个独立的视频的处理可以是：将第一子视频数据和第二子视频数据进行拼接，生成动画视频数据。

服务器可以按照第一子视频数据在上，第二子视频在下的方式，对两者进行拼接，生成动画视频数据。此时，任意设备播放上述动画视频数据时，可以显示重叠的两个视频。

当然，服务器还可以基于其它方式对第一子视频数据和第二子视频数据进行拼接，例如按照第二子视频数据在上，第一子视频在下的方式等，生成动画视频数据后，能够从动画视频数据中分别获取到第一子视频数据和第二子视频数据即可，本实施例对具体的拼接方式不做限定。

上述步骤201-202的处理还可以在其它具有制作动画功能的设备中完成，可以通过该设备将动画视频数据上传至服务器。当服务器接收到动画视频数据时，可以将其进行存储。

在步骤203中，服务器向终端发送动画视频数据。

服务器可以触发向终端发送动画的指令，例如，当终端在浏览器打开网页时，向服务器发送加载网页的请求，此时，服务器可以触发上述指令；又例如，在直播间中任一观众向主播赠送礼物时，服务器可以触发向直播间中的各个用户发送对应的礼物动画的指令。本实施例中对具体的触发方式不做限定。

当触发向终端发送动画的指令时，服务器可以从存储的各个动画的动画视频数据中，获取该动画对应的动画视频数据，并向终端发送该动画视频数据。

当终端接收到动画视频数据时，可以执行显示动画的方法流程，如图5所示的终端侧的显示动画的方法流程图，终端侧的处理流程可以包括如下的步骤：

在步骤501中，终端接收服务器发送的动画视频数据。

其中，动画视频数据可以用于指示多个视频帧，该多个视频帧可以是上述第一子视频数据和第二子视频数据中的各帧图像。动画视频数据的每个视频帧可以包括动画区域图像和背景区域图像。

终端可以通过浏览器等应用程序展示网页的内容，当网页需要展示动画时，终端可以接收到服务器发送的该动画对应的动画视频数据。例如，用户可以通过浏览器在直播网页上观看直播，当观众向主播赠送礼物时，直播网页中可以显示相应的礼物动画。

在步骤502中，终端基于canvas对象，提取动画视频数据的视频帧中的多个图像。

其中，canvas对象是HTML5(HyperText Markup Language 5，超级文本标记语言)协议的组件，可以用于将获取到的图像数据显示在设定区域中。canvas对象可以具有多种预设功能，例如，图像绘制功能，该功能可以由drawImage(绘制图像)方法实现，用于将指定图像转换为canvas对象的图像数据；图像获取功能，该功能可以由getImageData(获取图像数据)方法实现，用于获取canvas对象的图像数据中各个像素点的数据，即像素点的红色数值、绿色数值、蓝色数值和Alpha数值，其中，红色数值、绿色数值、蓝色数值用于表示像素点颜色的组成，Alpha数值可以用于指示像素点的透明度。本实施例不对canvas对象的各个预设功能进行一一介绍。

终端在接收到动画对应的动画视频数据之后，可以对动画视频数据进行解析，获取对应视频的高度和宽度。然后，终端可以建立对应的canvas对象，在网页的预设位置上设置该canvas对象的设定区域，并且可以将该设定区域的高度和宽度分别设置为上述获取到的高度和宽度。上述预设位置可以是显示动画的位置，由技术人员根据实际需求进行设置，本实施例对具体的位置不作限定。

进而，终端可以通过canvas对象的图像绘制功能，提取动画视频数据中的各帧图像，也即将视频格式的数据转换为图像格式的数据。

在一种可能的实施方式中，与上述实施例中介绍的服务器的处理相对应的，动画视频数据可以包括第一子视频数据和第二子视频数据。上述提取的多个图像数据可以包括多个第一子视频数据的第一子图像和多个第二子视频数据的第二子图像。

在此基础上，上述步骤502的处理可以如下：终端获取动画视频数据中的第一子视频数据和第二子视频数据，后台播放第一子视频数据对应的视频和所述第二子视频数据对应的视频；基于canvas对象的图像绘制功能，在后台播放的第一子视频数据对应的视频和第二子视频数据对应的视频中，周期性提取第一子视频数据的第一子图像和第二子视频数据的第二子图像，得到动画视频数据的视频帧中的多个图像。

由于第一子视频数据和第二子视频数据由同一动画导出，在同时播放第一子视频数据对应的视频和第二子视频数据对应的视频时，两视频相同时间戳上的图像可以对应于同一动画图像，也即，如果展示同时播放的两视频，则在视觉效果上同一时刻的动画图像的轮廓相同。也即是说，每个第一子图像可以具有相对应的第二子图像，每个第一子图像中动画区域图像可以与对应的第二子图像中的动画区域图像的像素点的位置相同，每个第一子图像中背景区域图像可以与对应的第二子图像中的背景区域图像的像素点的位置相同。

在实施中，终端在接收到动画对应的动画视频数据后，可以获取其中的第一子视频数据和第二子视频数据。在一种可能的实施方式中，终端可以基于服务器合并第一子视频数据和第二子视频数据的处理，相应地获取第一子视频数据和第二子视频数据，例如，将位置在上的视频数据获取为第一子视频数据，将位置在下的视频数据获取为第二子视频数据。

终端可以在网页中建立对应的video(视频)标签，然后基于该video标签将获取到的第一子视频数据和第二子视频数据加载到该网页中，在后台同时播放第一子视频数据对应的视频和第二子视频数据对应的视频。

然后，终端可以基于上面介绍的canvas对象的图像绘制功能，周期性地提取当前时刻后台播放的第一子视频数据和第二子视频数据的视频图像，得到各个时间戳上的第一子视频数据的第一子图像和第二子视频数据的第二子图像，一个时间戳上的第一子图像和该时间戳上的第二子图像相对应。

在步骤503中，终端将提取的图像中的背景区域图像调整为透明。

每当终端提取到动画视频数据的视频帧中的图像时，可以获取包括动画原本色彩的图像，并在该图像中，将背景区域图像调整为透明。终端在调整背景区域图像的透明度时，可以相应记录调整的时间，或者，也可以是记录该调整的图像在视频中的时间戳信息，作为图像的时间信息。

在一种可能的实施方式中，对于动画视频数据包括第一子视频数据和第二子视频数据的情况，上述步骤503的处理可以如下：终端基于canvas对象的图像获取功能，获取多个图像的图像数据；基于第二子图像的图像数据，将第一子图像的背景区域图像的Alpha数值调整为所指示的透明度为透明的Alpha数值。

每当终端提取到动画视频数据的视频帧中的图像时，终端可以基于上面介绍的canvas对象的图像获取功能，获取各个图像的图像数据。由于第一子图像对应于第一子视频数据的视频图像，而第一子视频数据由动画对应的红绿蓝RGB三通道数据导出，因此，终端可以获取第一子图像的图像数据作为基准，对第一子图像的Alpha数值进行调整。

终端设置透明度的处理可以如下：对于每个第一子图像与对应的第二子图像，将第一子图像中，与第二子图像的背景区域图像相对应的像素点的Alpha数值，调整为所指示的透明度为透明的Alpha数值。

在本实施例中，canvas对象的图像获取功能获取到的每个像素点的Alpha数值可以相同，并且Alpha数值可以是预设值，例如，每个像素点的Alpha数值可以等于1，表明每个像素点的透明度均可以是不透明。

上一实施例中介绍了第二子视频数据对应的视频图像中，动画区域图像和背景区域图像可以均为纯色的图像，动画区域图像和背景区域图像的图像不同，相对应的，在canvas对象的图像获取功能获取的第二子图像中，动画区域图像的像素点之间数据可以相同，背景区域图像的像素点之间数据可以相同，动画区域图像和背景区域图像的像素点之间数据可以不同。例如，第二子图像中动画区域图像的像素点可以表示为(1,1,1,1)，也即红色数值、绿色数值、蓝色数值均为1，显示为白色，Alpha数值为1，表明透明度为不透明；背景区域图像的像素点可以表示为(0,0,0,1)，也即红色数值、绿色数值、蓝色数值均为0，显示为黑色，Alpha数值为1，表明透明度为不透明。

从上面介绍的第二子图像可知，第二子图像可以指示属于动画区域图像的像素点以及属于背景区域图像的像素点。在此基础上，每当获取到第一子视频数据和第二子视频数据中各个像素点的数据时，终端可以获取第二子图像中背景区域图像对应的各个像素点的位置信息，进而，可以根据获取到的位置信息，获取第一子图像中对应的各个像素点，获取到的像素点所指示的图像可以认为是第一子图像中的背景区域图像。终端可以在第一子图像中，对上述背景区域图像的像素点的Alpha数值进行修改，将透明度设置为透明，得到调整后的图像。当然，在第一子图像中，终端可以对其余像素点(即动画区域图像对应的像素点)的透明度进行相应处理，也可以不进行处理。

对于对其余像素点进行处理的情况，上述步骤503中设置透明度的处理还可以如下：终端获取第二子图像中每个像素点的蓝色数值；将第一子图像中每个像素点的Alpha数值，调整为第二子图像中对应像素点的蓝色数值。

其中，第二子图像的动画区域图像中每个像素点的蓝色数值，可以与所指示的透明度为不透明的Alpha数值相等；第二子图像的背景区域图像中每个像素点的蓝色数值，可以与所指示的透明度为透明的Alpha数值相等。例如，当第二子图像中动画区域图像是白色的图像，背景区域图像是黑色的图像时，动画区域图像的像素点均可表示为(1,1,1,1)，其中蓝色数值均为1，Alpha数值为1时，所指示的透明度可以为不透明；背景区域图像的像素点均可表示为(0,0,0,1)，其中蓝色数值均为0，Alpha数值为0时，所指示的透明度可以为透明。

在实施中，终端可以获取第二子图像中各个像素点的蓝色数值以及对应的位置信息，然后在第一子图像中，根据位置信息将对应像素点的Alpha数值，设置为第二子图像中该位置信息对应的蓝色数值。也即，设置完成后，第一子图像中动画区域图像的像素点的透明度为不透明，背景区域图像的像素点的透明度为透明。

当然，终端还可以基于其它方式设置透明度，例如，当第二子图像中动画区域图像是黑色的图像，背景区域图像是白色的图像时，终端还可以对各个像素点的蓝色数值进行逻辑非运算后，将第一子图像中每个像素点的Alpha数值设置为逻辑非运算后的蓝色数值。本实施例对设置透明度的具体实施方式不作限定。

在步骤504中，终端对调整后的图像进行顺序显示。

终端可以通过canvas对象顺序显示调整后的图像，该图像中的背景区域图像可以是透明的，使得终端可以仅显示动画区域图像，达到显示动画的效果。在一种可能的实施方式中，终端可以按照图像的时间信息的先后顺序，周期性显示调整后的图像，在显示达到预设时长后关闭显示。当然，终端也可以在显示最后生成的图像后关闭显示，本实施例对动画的具体关闭方式不作限定。

上述过程中，对于一帧图像，终端可以在一个周期内完成上述显示该图像的处理。也即，终端可以在后台正常播放第一子视频数据和第二子视频数据对应的视频，每当达到预设周期(如20毫秒)时，可以基于canvas对象获取当前时刻播放的第一子视频数据和第二子视频数据的视频图像，进而通过上述过程对一个图像进行调整，并显示该调整后的图像。周期性地执行上述处理，即可达到显示动画的效果。在这个过程中，后台播放的视频图像可以与显示的图像同步。

当然，终端也可以分别执行提取多个图像、调整多个图像、显示调整后的图像的处理。也即，终端可以首先提取多个图像，此时，终端还可以相应记录每个图像可以对应的时间信息，在对多个图像提取完毕后，终端可以再对多个图像进行调整，，具体处理与上述过程同理，区别在于，调整后的图像可以具有对应的时间信息，以便终端可以根据时间信息显示每帧调整后的图像。在这个过程中，后台播放的视频图像可以与显示的图像不同步，但应与上述过程属于同一种技术构思。

上述实施例中，终端可以通过canvas对象来绘制动画的图像，由于canvas对象是HTML5协议的组件，不需要浏览器或其它应用程序额外进行安装，因此上述实施例提供的方法可以适用于更多的浏览器或其它应用程序中，提高显示动画的成功率。并且，对于数据量较大的动画而言，通过视频格式进行数据传输时，相比于Flash动画的数据格式，视频格式的压缩比例较高，可以减少传输的数据量，提高传输效率。

基于相同的技术构思，本发明实施例还提供了一种显示动画的装置，该装置应用于上述实施例中的终端，如图6所示的显示动画的装置示意图，该装置包括：

接收模块610，用于接收服务器发送的动画视频数据，其中，所述动画视频数据的每个视频帧包括动画区域图像和背景区域图像；

提取模块620，用于基于canvas对象，提取所述动画视频数据的视频帧中的多个图像；

调整模块630，用于将提取的图像中的背景区域图像调整为透明；

显示模块640，用于对调整后的图像进行顺序显示。

可选的，所述动画视频数据包括第一子视频数据和第二子视频数据，所述第一子视频数据用于指示动画对应的RGB三通道数据，所述第二子视频数据用于指示动画对应的Alpha通道数据；

所述提取模块620，用于：

获取所述动画视频数据中的所述第一子视频数据和所述第二子视频数据，后台播放所述第一子视频数据对应的视频和所述第二子视频数据对应的视频；

基于所述canvas对象的图像绘制功能，在后台播放的所述第一子视频数据对应的视频和所述第二子视频数据对应的视频中，周期性提取所述第一子视频数据的第一子图像和所述第二子视频数据的第二子图像，得到所述动画视频数据的视频帧中的多个图像。

可选的，所述调整模块630，用于：

基于所述canvas对象的图像获取功能，获取所述多个图像的图像数据，所述图像数据包括各个像素点的红色数值、绿色数值、蓝色数值和Alpha数值，所述Alpha数值用于指示像素点的透明度；

基于所述第二子图像的图像数据，将所述第一子图像的背景区域图像的Alpha数值调整为所指示的透明度为透明的Alpha数值。

可选的，在所述第二子图像中，动画区域图像的像素点之间数据相同，背景区域图像的像素点之间数据相同，动画区域图像和背景区域图像的像素点之间数据不同；

每个第一子图像具有相对应的第二子图像，每个第一子图像的动画区域图像与对应的第二子图像的动画区域图像的像素点的位置相同，每个第一子图像的背景区域图像与对应的第二子图像的背景区域图像的像素点的位置相同；

所述调整模块630，用于：

对于每个第一子图像与对应的第二子图像，将所述第一子图像中，与所述第二子图像的背景区域图像相对应的像素点的Alpha数值，调整为所指示的透明度为透明的Alpha数值。

可选的，所述第二子图像的动画区域图像中每个像素点的蓝色数值，与所指示的透明度为不透明的Alpha数值相等；所述第二子图像的背景区域图像中每个像素点的蓝色数值，与所指示的透明度为透明的Alpha数值相等；

所述调整模块630，用于：

获取所述第二子图像中每个像素点的蓝色数值；

将所述第一子图像中每个像素点的Alpha数值，调整为所述第二子图像中对应像素点的蓝色数值。

可选的，所述显示模块640，用于：

按照图像调整的先后顺序，周期性显示调整后的图像。

基于相同的技术构思，本发明实施例还提供了一种显示动画的装置，该装置应用于上述实施例中的服务器，如图7所示的显示动画的装置示意图，该装置包括：

导出模块710，用于在制作动画的过程中，基于动画对应的RGB三通道数据导出第一子视频数据，基于动画对应的Alpha通道数据导出第二子视频数据；

生成模块720，用于基于所述第一子视频数据和所述第二子视频数据，生成动画视频数据；

发送模块730，用于向终端发送所述动画视频数据。

可选的，所述生成模块720用于：

将所述第一子视频数据和所述第二子视频数据进行拼接，生成动画视频数据。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

上述实施例中，终端可以通过canvas对象来绘制动画的图像，由于canvas对象是HTML5协议的组件，不需要浏览器或其它应用程序额外进行安装，因此上述实施例提供的方法可以适用于更多的浏览器或其它应用程序中，提高显示动画的成功率。并且，对于数据量较大的动画而言，通过视频格式进行数据传输时，相比于Flash动画的数据格式，视频格式的压缩比例较高，可以减少传输的数据量，提高传输效率。

需要说明的是：上述实施例提供的显示动画的装置在显示动画时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将终端和服务器的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的显示动画的装置与显示动画的方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

基于相同的技术构思，本发明实施例还提供了一种显示动画的***，该***包括服务器和终端，其中：

所述终端，用于接收所述服务器发送的动画视频数据，其中，所述动画视频数据的每个视频帧包括动画区域图像和背景区域图像；基于canvas对象，提取所述动画视频数据的视频帧中的多个图像；将提取的图像中的背景区域图像调整为透明；对调整后的图像进行顺序显示；

所述服务器，用于在制作动画的过程中，基于动画对应的RGB三通道数据导出第一子视频数据，基于动画对应的Alpha通道数据导出第二子视频数据；基于所述第一子视频数据和所述第二子视频数据，生成动画视频数据；向所述终端发送所述动画视频数据。

本实施例提供的显示动画的***与显示动画的方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

本发明实施例中，终端可以通过canvas对象来绘制动画的图像，由于canvas对象是HTML5协议的组件，不需要浏览器或其它应用程序额外进行安装，因此上述实施例提供的方法可以适用于更多的浏览器或其它应用程序中，提高显示动画的成功率。

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

通常，终端800包括有：处理器801和存储器802。

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

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

在一些实施例中，终端800还可选包括有：***设备接口803和至少一个***设备。处理器801、存储器802和***设备接口803之间可以通过总线或信号线相连。各个***设备可以通过总线、信号线或电路板与***设备接口803相连。具体地，***设备包括：射频电路804、触摸显示屏805、摄像头806、音频电路807、定位组件808和电源809中的至少一种。

***设备接口803可被用于将I/O(Input/Output，输入/输出)相关的至少一个***设备连接到处理器801和存储器802。在一些实施例中，处理器801、存储器802和***设备接口803被集成在同一芯片或电路板上；在一些其他实施例中，处理器801、存储器802和***设备接口803中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不加以限定。

射频电路804用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路804通过电磁信号与通信网络以及其他通信设备进行通信。射频电路804将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路804包括：天线***、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路804可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：城域网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路804还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本申请对此不加以限定。

显示屏805用于显示UI(User Interface，用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏805是触摸显示屏时，显示屏805还具有采集在显示屏805的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器801进行处理。此时，显示屏805还可以用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施例中，显示屏805可以为一个，设置终端800的前面板；在另一些实施例中，显示屏805可以为至少两个，分别设置在终端800的不同表面或呈折叠设计；在再一些实施例中，显示屏805可以是柔性显示屏，设置在终端800的弯曲表面上或折叠面上。甚至，显示屏805还可以设置成非矩形的不规则图形，也即异形屏。显示屏805可以采用LCD(LiquidCrystal Display，液晶显示屏)、OLED(Organic Light-Emitting Diode,有机发光二极管)等材质制备。

摄像头组件806用于采集图像或视频。可选地，摄像头组件806包括前置摄像头和后置摄像头。通常，前置摄像头设置在终端的前面板，后置摄像头设置在终端的背面。在一些实施例中，后置摄像头为至少两个，分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种，以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality，虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中，摄像头组件806还可以包括闪光灯。闪光灯可以是单色温闪光灯，也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合，可以用于不同色温下的光线补偿。

音频电路807可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器801进行处理，或者输入至射频电路804以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在终端800的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器801或射频电路804的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路807还可以包括耳机插孔。

定位组件808用于定位终端800的当前地理位置，以实现导航或LBS(LocationBased Service，基于位置的服务)。定位组件808可以是基于美国的GPS(GlobalPositioning System，全球定位***)、中国的北斗***、俄罗斯的格雷纳斯***或欧盟的伽利略***的定位组件。

电源809用于为终端800中的各个组件进行供电。电源809可以是交流电、直流电、一次性电池或可充电电池。当电源809包括可充电电池时，该可充电电池可以支持有线充电或无线充电。该可充电电池还可以用于支持快充技术。

在一些实施例中，终端800还包括有一个或多个传感器810。该一个或多个传感器810包括但不限于：加速度传感器811、陀螺仪传感器812、压力传感器813、指纹传感器814、光学传感器815以及接近传感器816。

加速度传感器811可以检测以终端800建立的坐标系的三个坐标轴上的加速度大小。比如，加速度传感器811可以用于检测重力加速度在三个坐标轴上的分量。处理器801可以根据加速度传感器811采集的重力加速度信号，控制触摸显示屏805以横向视图或纵向视图进行用户界面的显示。加速度传感器811还可以用于游戏或者用户的运动数据的采集。

陀螺仪传感器812可以检测终端800的机体方向及转动角度，陀螺仪传感器812可以与加速度传感器811协同采集用户对终端800的3D动作。处理器801根据陀螺仪传感器812采集的数据，可以实现如下功能：动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。

压力传感器813可以设置在终端800的侧边框和/或触摸显示屏805的下层。当压力传感器813设置在终端800的侧边框时，可以检测用户对终端800的握持信号，由处理器801根据压力传感器813采集的握持信号进行左右手识别或快捷操作。当压力传感器813设置在触摸显示屏805的下层时，由处理器801根据用户对触摸显示屏805的压力操作，实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。

指纹传感器814用于采集用户的指纹，由处理器801根据指纹传感器814采集到的指纹识别用户的身份，或者，由指纹传感器814根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时，由处理器801授权该用户执行相关的敏感操作，该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器814可以被设置终端800的正面、背面或侧面。当终端800上设置有物理按键或厂商Logo时，指纹传感器814可以与物理按键或厂商Logo集成在一起。

光学传感器815用于采集环境光强度。在一个实施例中，处理器801可以根据光学传感器815采集的环境光强度，控制触摸显示屏805的显示亮度。具体地，当环境光强度较高时，调高触摸显示屏805的显示亮度；当环境光强度较低时，调低触摸显示屏805的显示亮度。在另一个实施例中，处理器801还可以根据光学传感器815采集的环境光强度，动态调整摄像头组件806的拍摄参数。

接近传感器816，也称距离传感器，通常设置在终端800的前面板。接近传感器816用于采集用户与终端800的正面之间的距离。在一个实施例中，当接近传感器816检测到用户与终端800的正面之间的距离逐渐变小时，由处理器801控制触摸显示屏805从亮屏状态切换为息屏状态；当接近传感器816检测到用户与终端800的正面之间的距离逐渐变大时，由处理器801控制触摸显示屏805从息屏状态切换为亮屏状态。

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

图9是本发明实施例提供的一种服务器的结构示意图，该服务器900可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(central processingunits，CPU)901和一个或一个以上的存储器902，其中，所述存储器902中存储有至少一条指令，所述至少一条指令由所述处理器901加载并执行以实现显示动画的方法步骤：

在制作动画的过程中，基于动画对应的RGB三通道数据导出第一子视频数据，基于动画对应的Alpha通道数据导出第二子视频数据；

基于所述第一子视频数据和所述第二子视频数据，生成动画视频数据；

向终端发送所述动画视频数据。

可选的，所述基于所述第一子视频数据和所述第二子视频数据，生成动画视频数据，包括：

将所述第一子视频数据和所述第二子视频数据进行拼接，生成动画视频数据。

在示例性实施例中，还提供了一种计算机可读存储介质，例如包括指令的存储器，上述指令可由终端或服务器中的处理器执行以完成上述显示动画的方法。例如，所述计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

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

Claims (12)

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

接收服务器发送的动画视频数据，其中，所述动画视频数据的每个视频帧包括动画区域图像和背景区域图像，所述动画视频数据包括第一子视频数据和第二子视频数据，所述第一子视频数据用于指示Flash动画对应的红绿蓝RGB三通道数据，所述第二子视频数据用于指示Flash动画对应的阿尔法Alpha通道数据，所述服务器将所述第一子视频数据和所述第二子视频数据合并，生成所述动画视频数据进行存储；

获取所述动画视频数据中的所述第一子视频数据和所述第二子视频数据，后台播放所述第一子视频数据对应的视频和所述第二子视频数据对应的视频，所述第一子视频数据和所述第二子视频数据的格式为预设的视频格式；

基于canvas对象的图像绘制功能，在后台播放的所述第一子视频数据对应的视频和所述第二子视频数据对应的视频中，周期性提取所述第一子视频数据的第一子图像和所述第二子视频数据的第二子图像，得到所述动画视频数据的视频帧中的多个图像；

将提取的图像中的背景区域图像调整为透明；

按照图像的时间信息的先后顺序，周期性显示调整后的图像。

2.根据权利要求1所述的方法，其特征在于，所述将提取的图像中的背景区域图像调整为透明，包括：

基于所述canvas对象的图像获取功能，获取所述多个图像的图像数据，所述图像数据包括各个像素点的红色数值、绿色数值、蓝色数值和Alpha数值，所述Alpha数值用于指示像素点的透明度；

基于所述第二子图像的图像数据，将所述第一子图像的背景区域图像的Alpha数值调整为所指示的透明度为透明的Alpha数值。

3.根据权利要求2所述的方法，其特征在于，在所述第二子图像中，动画区域图像的像素点之间数据相同，背景区域图像的像素点之间数据相同，动画区域图像和背景区域图像的像素点之间数据不同；

每个第一子图像具有相对应的第二子图像，每个第一子图像的动画区域图像与对应的第二子图像的动画区域图像的像素点的位置相同，每个第一子图像的背景区域图像与对应的第二子图像的背景区域图像的像素点的位置相同；

所述基于所述第二子图像的图像数据，将所述第一子图像的背景区域图像的Alpha数值调整为所指示的透明度为透明的Alpha数值，包括：

对于每个第一子图像与对应的第二子图像，将所述第一子图像中，与所述第二子图像的背景区域图像相对应的像素点的Alpha数值，调整为所指示的透明度为透明的Alpha数值。

4.根据权利要求3所述的方法，其特征在于，所述第二子图像的动画区域图像中每个像素点的蓝色数值，与所指示的透明度为不透明的Alpha数值相等；所述第二子图像的背景区域图像中每个像素点的蓝色数值，与所指示的透明度为透明的Alpha数值相等；

所述将所述第一子图像中，与所述第二子图像的背景区域图像相对应的像素点的Alpha数值，调整为所指示的透明度为透明的Alpha数值，包括：

获取所述第二子图像中每个像素点的蓝色数值；

将所述第一子图像中每个像素点的Alpha数值，调整为所述第二子图像中对应像素点的蓝色数值。

5.一种显示动画的方法，其特征在于，所述方法应用于服务器，所述方法包括：

在制作Flash动画的过程中，基于Flash动画对应的红绿蓝RGB三通道数据导出第一子视频数据，基于Flash动画对应的阿尔法Alpha通道数据导出第二子视频数据；

将所述第一子视频数据和所述第二子视频数据进行拼接，生成动画视频数据并进行存储；

向终端发送所述动画视频数据以使所述终端获取所述动画视频数据中的所述第一子视频数据和所述第二子视频数据，后台播放所述第一子视频数据对应的视频和所述第二子视频数据对应的视频，所述第一子视频数据和所述第二子视频数据的格式为预设的视频格式；基于canvas对象的图像绘制功能，在后台播放的所述第一子视频数据对应的视频和所述第二子视频数据对应的视频中，周期性提取所述第一子视频数据的第一子图像和所述第二子视频数据的第二子图像，得到所述动画视频数据的视频帧中的多个图像，将提取的图像中的背景区域图像调整为透明，按照图像的时间信息的先后顺序，周期性显示调整后的图像。

6.一种显示动画的装置，其特征在于，所述装置应用于终端，所述装置包括：

接收模块，用于接收服务器发送的动画视频数据，其中，所述动画视频数据的每个视频帧包括动画区域图像和背景区域图像，所述动画视频数据包括第一子视频数据和第二子视频数据，所述第一子视频数据用于指示Flash动画对应的红绿蓝RGB三通道数据，所述第二子视频数据用于指示Flash动画对应的阿尔法Alpha通道数据，所述服务器将所述第一子视频数据和所述第二子视频数据合并，生成所述动画视频数据进行存储；

提取模块，用于获取所述动画视频数据中的所述第一子视频数据和所述第二子视频数据，后台播放所述第一子视频数据对应的视频和所述第二子视频数据对应的视频，所述第一子视频数据和所述第二子视频数据的格式为预设的视频格式；基于canvas对象的图像绘制功能，在后台播放的所述第一子视频数据对应的视频和所述第二子视频数据对应的视频中，周期性提取所述第一子视频数据的第一子图像和所述第二子视频数据的第二子图像，得到所述动画视频数据的视频帧中的多个图像；

调整模块，用于将提取的图像中的背景区域图像调整为透明；

显示模块，用于按照图像的时间信息的先后顺序，周期性显示调整后的图像。

7.一种显示动画的装置，其特征在于，所述装置应用于服务器，所述装置包括：

导出模块，用于在制作Flash动画的过程中，基于Flash动画对应的红绿蓝RGB三通道数据导出第一子视频数据，基于Flash动画对应的阿尔法Alpha通道数据导出第二子视频数据；

生成模块，用于将所述第一子视频数据和所述第二子视频数据进行拼接，生成动画视频数据并进行存储；

发送模块，用于向终端发送所述动画视频数据以使所述终端获取所述动画视频数据中的所述第一子视频数据和所述第二子视频数据，后台播放所述第一子视频数据对应的视频和所述第二子视频数据对应的视频，所述第一子视频数据和所述第二子视频数据的格式为预设的视频格式；基于canvas对象的图像绘制功能，在后台播放的所述第一子视频数据对应的视频和所述第二子视频数据对应的视频中，周期性提取所述第一子视频数据的第一子图像和所述第二子视频数据的第二子图像，得到所述动画视频数据的视频帧中的多个图像，将提取的图像中的背景区域图像调整为透明，按照图像的时间信息的先后顺序，周期性显示调整后的图像。

8.一种显示动画的***，其特征在于，所述***包括服务器和终端，其中：

所述终端，用于接收所述服务器发送的动画视频数据，其中，所述动画视频数据的每个视频帧包括动画区域图像和背景区域图像，所述动画视频数据包括第一子视频数据和第二子视频数据，所述第一子视频数据用于指示Flash动画对应的红绿蓝RGB三通道数据，所述第二子视频数据用于指示Flash动画对应的阿尔法Alpha通道数据，所述服务器将所述第一子视频数据和所述第二子视频数据合并，生成所述动画视频数据进行存储；获取所述动画视频数据中的所述第一子视频数据和所述第二子视频数据，后台播放所述第一子视频数据对应的视频和所述第二子视频数据对应的视频，所述第一子视频数据和所述第二子视频数据的格式为预设的视频格式；基于canvas对象的图像绘制功能，在后台播放的所述第一子视频数据对应的视频和所述第二子视频数据对应的视频中，周期性提取所述第一子视频数据的第一子图像和所述第二子视频数据的第二子图像，得到所述动画视频数据的视频帧中的多个图像；将提取的图像中的背景区域图像调整为透明；按照图像的时间信息的先后顺序，周期性显示调整后的图像；

所述服务器，用于在制作动画的过程中，基于动画对应的红绿蓝RGB三通道数据导出第一子视频数据，基于动画对应的阿尔法Alpha通道数据导出第二子视频数据；基于所述第一子视频数据和所述第二子视频数据，生成动画视频数据；向所述终端发送所述动画视频数据。

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

10.一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一条指令，所述至少一条指令由终端的处理器加载并执行以实现如权利要求1至4任一所述的显示动画的方法。

11.一种服务器，其特征在于，所述服务器包括处理器和存储器，所述存储器中存储有至少一条指令，所述至少一条指令由所述处理器加载并执行以实现如权利要求5所述的显示动画的方法。

12.一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一条指令，所述至少一条指令由服务器的处理器加载并执行以实现如权利要求5所述的显示动画的方法。