[发明专利]网页动画适配屏幕的方法和装置

权利要求书

1.一种网页动画适配屏幕的方法，其特征在于，该方法包括：

获取待展示的动画数据；

从所述动画数据的每帧图像中分别识别出核心内容区、元素和静态区；

其中，所述核心内容区包括所述动画数据中的特定内容，所述静态区包括所述动画数据中内容不发生变化的背景区域，所述元素包括所述动画数据中的一个或多个图形元素；

将所述静态区的尺寸缩放至终端屏幕尺寸，并一次性绘制所述静态区；

对所述每帧图像的核心内容区进行缩放且保持所述核心内容区的宽高比不变，直至所述核心内容区的宽度与所述屏幕的宽度相匹配，以得到所述每帧图像中的核心内容区调整后的尺寸；

根据所述每帧图像中的核心内容区调整后的尺寸，从所述动画数据的首帧开始逐帧绘制所述核心内容区，并获取所述元素的中心位置，计算所述核心内容区调整前的尺寸与调整后的尺寸的比值，根据所述比值调整所述元素的中心位置得到调整后的中心位置，并根据调整后的中心位置按预设的固定像素大小逐帧绘制所述元素，直至绘制完成末帧。

2.根据权利要求1所述的网页动画适配屏幕的方法，其特征在于，所述根据所述比值调整所述元素的中心位置得到调整后的中心位置采用的公式为：

canvas.width/center.width=target.x/X=target.y/Y；

canvas.width为所述核心内容区调整后的宽度，center.width为所述核心内容区调整前的宽度，target.x为所述元素调整后的中心位置的X坐标值，target.y为所述元素调整后的中心位置的Y坐标值，X，Y为所述元素原始的中心位置的坐标值。

3.根据权利要求1和2中任一项所述的网页动画适配屏幕的方法，其特征在于，从所述动画数据的每帧图像中分别识别出核心内容区、元素和静态区，具体包括：

根据所述动画的图像内容，和/或网页数据中所述动画对应的动画数据，从所述动画数据的每帧图像中分别识别出所述核心内容区、所述元素和所述静态区。

4.一种网页动画适配屏幕的装置，其特征在于，包括：

动画获取模块，用于获取待展示的动画数据；

识别模块，用于从所述动画数据的每帧图像中分别识别出核心内容区、元素和静态区；其中，所述核心内容区包括所述动画数据中的特定内容，所述静态区包括所述动画数据中内容不发生变化的背景区域，所述元素包括所述动画数据中的一个或多个图形元素；

绘制模块，用于将所述静态区的尺寸缩放至终端屏幕尺寸，并一次性绘制所述静态区；对所述每帧图像的核心内容区进行缩放且保持所述核心内容区的宽高比不变，直至所述核心内容区的宽度与所述屏幕的宽度相匹配，以得到所述每帧图像中的核心内容区调整后的尺寸；根据所述每帧图像中的核心内容区调整后的尺寸，从所述动画数据的首帧开始逐帧绘制所述核心内容区，并获取所述元素的中心位置，计算所述核心内容区调整前的尺寸与调整后的尺寸的比值，根据所述比值调整所述元素的中心位置得到调整后的中心位置，并根据调整后的中心位置按预设的固定像素大小逐帧绘制所述元素，直至绘制完成末帧。

5.根据权利要求4所述的网页动画适配屏幕的装置，其特征在于，

所述绘制模块根据所述比值调整所述元素的中心位置得到调整后的中心位置采用的公式为：

canvas.width/center.width=target.x/X=target.y/Y；

canvas.width为所述核心内容区调整后的宽度，center.width为所述核心内容区调整前的宽度，target.x为所述元素调整后的中心位置的X坐标值，target.y为所述元素调整后的中心位置的Y坐标值，X，Y为所述元素原始的中心位置的坐标值。

6.根据权利要求4和5中任一项所述的网页动画适配屏幕的装置，其特征在于，

所述识别模块，具体用于根据所述动画的图像内容，和/或网页数据中所述动画对应的动画数据，从所述动画数据的每帧图像中分别识别出所述核心内容区、所述元素和所述静态区。