显示动画的方法及装置制造方法及图纸

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

The Method and Device of Displaying Animation

The invention discloses a method and device for displaying animation, belonging to the technical field of Internet. The method includes: receiving animation video data sent by the server, in which each video frame of the animation video data includes animation region image and background region image; extracting multiple images in the video frame of the animation video data based on canvas object; adjusting the background region image of the extracted image to transparency; and sequencing the adjusted image. Show. The invention can improve the success rate of display animation.

【技术实现步骤摘要】
显示动画的方法及装置
本专利技术涉及互联网
，特别涉及一种显示动画的方法及装置。
技术介绍
终端在显示网页时，可以在网页中显示动画。动画对应的动画数据一般采用Flash(闪客)动画的数据格式。终端通过浏览器来显示网页以及其中的动画。浏览器中安装有Flash控件，当接收到服务器发送的动画数据时，通过上述Flash控件对动画数据进行解析并渲染，得到动画，进而将动画显示在网页中。在实现本专利技术的过程中，专利技术人发现现有技术至少存在以下问题：Flash控件不是浏览器默认安装的控件，当浏览器未安装Flash控件时，浏览器接收到动画数据后将不能显示动画，导致显示动画的成功率较低。
技术实现思路
本专利技术实施例提供了一种显示动画的方法及装置，可以提高显示动画的成功率。所述技术方案如下：第一方面，提供了一种显示动画的方法，该方法应用于终端，该方法包括：接收服务器发送的动画视频数据，其中，所述动画视频数据的每个视频帧包括动画区域图像和背景区域图像；基于canvas(画布)对象，提取所述动画视频数据的视频帧中的多个图像；将提取的图像中的背景区域图像调整为透明；对调整后的图像进行顺序显示。可选的，所述动画视频数据包括第一子视频数据和第二子视频数据，所述第一子视频数据用于指示动画对应的RGB(RedGreenBlue，红绿蓝)三通道数据，所述第二子视频数据用于指示动画对应的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通道数据导出第二子本文档来自技高网...

【技术保护点】
1.一种显示动画的方法，其特征在于，所述方法应用于终端，所述方法包括：接收服务器发送的动画视频数据，其中，所述动画视频数据的每个视频帧包括动画区域图像和背景区域图像；基于画布canvas对象，提取所述动画视频数据的视频帧中的多个图像；将提取的图像中的背景区域图像调整为透明；对调整后的图像进行顺序显示。

【技术特征摘要】
1.一种显示动画的方法，其特征在于，所述方法应用于终端，所述方法包括：接收服务器发送的动画视频数据，其中，所述动画视频数据的每个视频帧包括动画区域图像和背景区域图像；基于画布canvas对象，提取所述动画视频数据的视频帧中的多个图像；将提取的图像中的背景区域图像调整为透明；对调整后的图像进行顺序显示。2.根据权利要求1所述的方法，其特征在于，所述动画视频数据包括第一子视频数据和第二子视频数据，所述第一子视频数据用于指示动画对应的红绿蓝RGB三通道数据，所述第二子视频数据用于指示动画对应的阿尔法Alpha通道数据；所述基于canvas对象，提取所述动画视频数据的视频帧中的多个图像，包括：获取所述动画视频数据中的所述第一子视频数据和所述第二子视频数据，后台播放所述第一子视频数据对应的视频和所述第二子视频数据对应的视频；基于所述canvas对象的图像绘制功能，在后台播放的所述第一子视频数据对应的视频和所述第二子视频数据对应的视频中，周期性提取所述第一子视频数据的第一子图像和所述第二子视频数据的第二子图像，得到所述动画视频数据的视频帧中的多个图像。3.根据权利要求2所述的方法，其特征在于，所述将提取的图像中的背景区域图像调整为透明，包括：基于所述canvas对象的图像获取功能，获取所述多个图像的图像数据，所述图像数据包括各个像素点的红色数值、绿色数值、蓝色数值和Alpha数值，所述Alpha数值用于指示像素点的透明度；基于所述第二子图像的图像数据，将所述第一子图像的背景区域图像的Alpha数值调整为所指示的透明度为透明的Alpha数值。4.根据权利要求3所述的方法，其特征在于，在所述第二子图像中，动画区域图像的像素点之间数据相同，背景区域图像的像素点之间数据相同，动画区域图像和背景区域图像的像素点之间数据不同；每个第一子图像具有相对应的第二子图像，每个第一子图像的动画区域图像与对应的第二子图像的动画区域图像的像素点的位置相同，每个第一子图像的背景区域图像与对应的第二子图像的背景区域图像的像素点的位置相同；所述基于所述第二子图像的图像数据，将所述第一子图像的背景区域图像的Alpha数值调整为所指示的透明度为透明的Alpha数值，包括：对于每个第一子图像与对应的第二子图像，将所述第一子图像中，与所述第二子图像的背景区域图像相对应的像素点的Alpha数值，调整为所指示的透明度为透明的Alpha数值。5.根据权利要求4所述的方法，其特征在于，所述第二子图像的动画区域图像中每个像素点的蓝色数值，与所指示的透明度为不透明的Alpha数值相等；所述第二子图像的背景区域图像中每个像素点的蓝色数值，与所指示的透明度为透明的Alpha数值相等；所述将所述第一子图像中，与所述第二子图像的背景区域图像相对应的像素点的Alpha数值，调整为所指示的透明度为透明的Alpha数值，包括：获取所述第二子图像中每个像素点的蓝色数值；将所述第一子图像中每个像素点的Alpha数值，调整为所述第二子图像中对应像素点的蓝色数值。6.根据权利要求...

【专利技术属性】
技术研发人员：白伟民，
申请(专利权)人：广州酷狗计算机科技有限公司，
类型：发明
国别省市：广东,44