[发明专利]显示动画的方法及装置

说明书

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

技术领域

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

背景技术

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

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

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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