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

说明书

本发明公开了一种网页动画适配屏幕的方法和装置，该方法包括：获取待展示的动画数据；识别动画数据中的核心内容区和元素；逐帧绘制核心内容区和元素，其中根据终端的屏幕的尺寸调整核心内容区的尺寸得到调整后的尺寸，并按调整后核心内容区的尺寸绘制核心内容区，以及根据预设的尺寸绘制元素。根据本发明在对网页动画进行适配时，对动画中的核心内容区根据屏幕尺寸进行调整，使得动画适于在屏幕上展示，并按固定尺寸对元素进行绘制，使得动画中的元素不会发生形变，使得用户能够准确识别以及使用动画中的元素，可见本发明的网页动画适配效果较高，且适配过程中不需要占用其他资源，相应的开发工程较小。

技术领域

本发明涉及互联网技术领域，尤其涉及一种网页动画适配屏幕的方法和装置。

背景技术

在浏览器中展现网页时，根据屏幕尺寸对页面中的canvas(作为图形容器，用来装载动画数据)动画进行适配是一个关键点。现有技术中，常见的canvas动画的页面适配方案有两种：

一：拉伸适配，即将动画的每一帧的图像拉伸至全屏或等比缩放至全屏。这种适配方式的效果较差，因为简单拉伸易造成动画发生形变，导致体验效果失真，动画特征消失，例如，动画中的文字无法阅读、动画中的特征屏摄无法识别等。

二：类hack适配：首先辨别显示器长宽比特征，然后针对这种特征进行针对性适配，如：小范围变化拉伸，拉伸过于失真则采用更适合该长宽比的素材。而类hack适配的缺点在于，通过屏幕的长宽比特征值去适配的类hack适配方法开发成本过高，且很难兼容至全部类型，如常见逻辑为：动画中默认采用素材M，如果屏幕宽高比1.5，则将素材M替换为素材N；如果屏幕宽高比2，则将素材M替换为素材P；如果屏幕宽高比2.5，则将素材M替换为素材Q。

因此，常见的canvas动画在一些特殊终端下表现糟糕，如平板，电视等(其长宽比相比于常规显示屏更大)，而且canvas动画的适配方案普遍存在开发工程量较大，消耗资源较多的问题。

发明内容

有鉴于此，本发明的目的在于提供一种网页动画适配屏幕的方法和装置,以在降低动画适配占用资源的同时，提升动画的适配效果。

本发明解决上述技术问题所采用的技术方案如下：

根据本发明的一个方面，提供的一种网页动画适配屏幕的方法，该方法包括：

获取待展示的动画数据；

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

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

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

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

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

根据本发明的另一个方面，提供一种网页动画适配屏幕的装置，包括：

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

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