CN108205398A - 网页动画适配屏幕的方法和装置 - Google Patents

Abstract

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

Description

网页动画适配屏幕的方法和装置

技术领域

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

背景技术

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

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

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

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

发明内容

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

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

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

获取待展示的动画数据；

识别所述动画数据中的核心内容区和元素；

逐帧绘制所述核心内容区和所述元素，其中根据终端的屏幕的尺寸调整所述核心内容区的尺寸得到调整后的尺寸，并按所述调整后的尺寸绘制所述核心内容区，以及根据预设的尺寸绘制所述元素。

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

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

识别模块，识别所述动画数据中的核心内容区和元素；

绘制模块，逐帧绘制所述核心内容区和所述元素，其中根据终端的屏幕的尺寸调整所述核心内容区的尺寸得到调整后的尺寸，并按所述调整后的尺寸绘制所述核心内容区，以及根据预设的尺寸绘制所述元素。

根据以上技术方案，可知本发明的网页动画适配屏幕的方法和装置至少具有以下有益效果：

根据本发明的技术方案，在对网页动画进行适配时，对动画中的核心内容区根据屏幕尺寸进行调整，使得动画适于在屏幕上展示，并按固定尺寸对元素进行绘制，使得动画中的元素不会发生形变，使得用户能够准确识别以及使用动画中的元素，可见本发明的网页动画适配效果较高，且适配过程中不需要占用其他资源，相应的开发工程较小。

附图说明

图1为本发明实施例提供的一种网页动画适配屏幕的方法的流程图；

图2为本发明实施例提供的一种网页动画适配屏幕的方法的动画示意图；

图3为本发明实施例提供的一种网页动画适配屏幕的方法的流程图；

图4为本发明实施例提供的一种网页动画适配屏幕的方法的流程图；

图5为本发明实施例提供的一种网页动画适配屏幕的方法的示意图；

图6为本发明实施例提供的一种网页动画适配屏幕的方法的流程图；

图7为本发明实施例提供的一种网页动画适配屏幕的装置的框图；

图8为本发明实施例的终端结构示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

为了使本发明所要解决的技术问题、技术方案及有益效果更加清楚、明白，以下结合附图和实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

如图1所示，本发明的一个实施例中提供了一种网页动画适配屏幕的方法，本实施例的方法可应用于手机、平板及个人电脑等终端，适用于用户通过浏览器观看网页动画的情况。本实施例的方法包括：

步骤S110，获取待展示的动画数据。

在本实施例中，动画包括但不限于前述的canvas动画；本领域技术人员应当理解，动画逐帧进行播放。

步骤S120，识别动画数据中的核心内容区和元素。

在本实施例中，对核心内容区和元素的类型不进行限制；具体地，核心内容区和元素可以是通过canvas动画对应的标签定义的核心内容区和元素(例如，可以在canvas动画的HMTL数据中添加标签：<核心内容区>、<元素>来对核心内容区和元素进行定义)，元素也可以是动画中包含的一个或多个图形元素，而核心内容区可以是动画中记录特定内容的区域。图2示出了canvas动画中的某一帧图像，其中，A表示元素，每个元素可以逐帧变化，也可以保持不变，B表示核心内容区，本实施例中取记录有文字信息的部分为核心内容区，C为A、B之外的静态区，静态区可以是不发生变化的背景区域。

因此，在本实施例中，识别动画的核心内容区和元素的具体方式包括但不限于以下：

(1)根据动画的图像内容，从动画数据中识别核心内容区和元素。可以基于图像识别技术，从动画的每帧图像中识别出核心内容区和元素。

(2)和/或根据网页数据中动画对应的动画数据，从动画数据中识别核心内容区和元素。在本实施例中，可以对canvas动画的标签数据进行分析，根据分析结果识别核心内容区和元素,例如，当发现存在如下格式的标签时：<核心内容区>、<元素>，则判断<核心内容区>标签下的图像为核心内容区，而判断<元素>标签下的图像为元素。

步骤S130，逐帧绘制核心内容区和元素，其中根据当前的屏幕的尺寸调整核心内容区的尺寸得到调整后的尺寸，并按所述调整后的尺寸绘制核心内容区，以及根据预设的尺寸绘制元素。

在本实施例中，对核心内容区根据屏幕尺寸进行缩放，并在每一帧中进行重绘，核心内容区的尺寸随屏幕的尺寸发生变化，即实现了对屏幕的适配，而元素常被用于展示重要信息，例如，用于识别屏幕特征等等，因此为保证展示效果，在本实施例的技术方案中元素的尺寸固定，其可以是固定像素大小。

根据本实施例的技术方案，用户通过浏览器浏览网页时，浏览器与服务器交互的示意图如图3所示，在图3中，服务器获取页面数据后，当用户发起对访问页面的请求时，浏览器响应请求并将页面数据回吐给用户，用户的浏览器获取服务器发送的页面数据后进行检测，检测到其中的动画时则按本实施例的技术方案进行适配：对动画中的核心内容区根据屏幕尺寸进行调整，使得动画适于在屏幕上展示，并按固定尺寸对元素进行绘制，使得动画中的元素不会发生形变，使得用户能够准确识别以及使用动画中的元素。

如图4所示，本发明的一个实施例中提供了一种网页动画适配屏幕的方法，本实施例的方法包括：

步骤S410，获取待展示的动画数据。

步骤S420，识别动画数据中的核心内容区和元素、静态区。

步骤S430，根据屏幕的尺寸调整静态区的尺寸并绘制静态区。

在本实施例中，静态区起到背景作用，其内容不变化，因此没有必要对静态区进行逐帧重绘，只需将其尺寸一次性缩放至屏幕尺寸大小即可。

步骤S440，逐帧绘制核心内容区和元素，其中获取所述元素的中心位置，计算所述核心内容区调整前的尺寸与调整后的尺寸的比值，根据所述比值调整所述元素的中心位置得到调整后的中心位置，并根据调整后的中心位置按所述预设的尺寸绘制所述元素。

在本实施例中，在终端屏幕的宽超过动画中核心内容区原始的宽时，对核心内容区进行缩放，使得核心内容区的宽度与屏幕宽度匹配，完成核心内容区的适配，具体如图5所示；在本实施例中，元素的中心坐标可以按如下公式计算：

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

canvas.width：核心内容区调整后的宽度；

center.width：核心内容区调整前的宽度；

Target.x：所求元素中心的X坐标值；

target.y：所求元素中西的Y坐标值；

(X,Y):元素的原始中心坐标值(如果动画数据中未记录该坐标值，则根据元素一个或多个端点的坐标进行计算)；

在本实施例中，页面元素部分针对核心内容区的缩放进行相应的元素位置适配，为保证显示效果及机器识别效果，页面元素采用固定尺寸方式展示。

本实施例的技术方案整体流程如图6所示，可以发现，对于网页动画而言，首先一次性绘制其中的背景，即静态区；而后从动画的首帧起逐帧进行绘制：包括绘制核心内容区和元素，直至绘制完末帧，可见图6中静态区没有逐帧进行重绘，这是因为canvas页面重绘区域的大小将非常明显的影响性能，因此仅对静态区一次性缩放至屏幕大小而不重绘，有利于节约性能。

本实施例的技术方案，相比于现有技术具有以下优点：1)开发代价减小：hack适配需要考虑更多的情况并引入更多的资源，而本实施例的技术方案则不需要额外的资源，大大减小了开发代价；2)浏览器执行效率提高:hack适配需要更多的资源及更大的重绘区域，拉伸适配也需要更大的重绘区域，而本实施例中重绘区域的减小及资源消耗的减小可以大大提升canvas的渲染执行效率；3)全适配且重要特征元素清晰不发生形变，与视觉设计吻合：本实施例中，元素图形中心位置随核心内容区的缩放改变，元素尺寸固定保证特征清晰明显。

如图7所示，本发明的一个实施例中提供了一种网页动画适配屏幕的装置，本实施例的装置可应用于手机、平板及个人电脑等终端，适用于用户通过浏览器观看网页动画的情况。本实施例的装置包括：

动画获取模块710，获取待展示的动画数据。

在本实施例中，动画包括但不限于前述的canvas动画；本领域技术人员应当理解，动画逐帧进行播放。

动画获取模块720，识别动画数据中的核心内容区和元素。

在本实施例中，对核心内容区和元素的类型不进行限制；具体地，核心内容区和元素可以是通过canvas动画对应的标签定义的核心内容区和元素(例如，可以在canvas动画的HMTL数据中添加标签：<核心内容区>、<元素>来对核心内容区和元素进行定义)，元素也可以是动画中包含的一个或多个图形元素，而核心内容区可以是动画中记录特定内容的区域。图2示出了canvas动画中的某一帧图像，其中，A表示元素，每个元素可以逐帧变化，也可以保持不变，B表示核心内容区，本实施例中取记录有文字信息的部分为核心内容区，C为A、B之外的静态区，静态区可以是不发生变化的背景区域。

因此，在本实施例中，识别动画的核心内容区和元素的具体方式包括但不限于以下：

(1)根据动画的图像内容，从动画数据中识别核心内容区和元素。可以基于图像识别技术，从动画的每帧图像中识别出核心内容区和元素。

(2)和/或根据网页数据中动画对应的动画数据，从动画数据中识别核心内容区和元素。在本实施例中，可以对canvas动画的标签数据进行分析，根据分析结果识别核心内容区和元素,例如，当发现存在如下格式的标签时：<核心内容区>、<元素>，则判断<核心内容区>标签下的图像为核心内容区，而判断<元素>标签下的图像为元素。

绘制模块730，逐帧绘制核心内容区和元素，其中根据终端的屏幕的尺寸调整核心内容区的尺寸得到调整后的尺寸，并按调整后核心内容区的尺寸绘制核心内容区，以及根据预设的尺寸绘制元素。

在本实施例中，对核心内容区根据屏幕尺寸进行缩放，并在每一帧中进行重绘，核心内容区的尺寸随屏幕的尺寸发生变化，即实现了对屏幕的适配，而元素常被用于展示重要信息，例如，用于识别屏幕特征等等，因此为保证展示效果，在本实施例的技术方案中元素的尺寸固定，其可以是固定像素大小。

根据本实施例的技术方案，用户通过浏览器浏览网页时，浏览器与服务器交互的示意图如图3所示，在图3中，服务器获取页面数据后，当用户发起对访问页面的请求时，浏览器响应请求并将页面数据回吐给用户，用户的浏览器获取服务器发送的页面数据后进行检测，检测到其中的动画时则按本实施例的技术方案进行适配：对动画中的核心内容区根据屏幕尺寸进行调整，使得动画适于在屏幕上展示，并按固定尺寸对元素进行绘制，使得动画中的元素不会发生形变，使得用户能够准确识别以及使用动画中的元素。

如图7所示，本发明的一个实施例中提供了一种网页动画适配屏幕的装置，本实施例的装置包括：

动画获取模块710，获取待展示的动画数据。

识别模块720，识别动画中的核心内容区和元素、静态区。

绘制模块730，根据屏幕的尺寸调整静态区的尺寸并绘制静态区。

在本实施例中，静态区起到背景作用，其内容不变化，因此没有必要对静态区进行逐帧重绘，只需将其尺寸一次性缩放至屏幕尺寸大小即可。

绘制模块730，逐帧绘制核心内容区和元素，其中获取所述元素的中心位置，计算所述核心内容区调整前的尺寸与调整后的尺寸的比值，根据所述比值调整所述元素的中心位置得到调整后的中心位置，并根据调整后的中心位置按所述预设的尺寸绘制所述元素。

在本实施例中，在终端屏幕的宽超过动画中核心内容区原始的宽时，对核心内容区进行缩放，使得核心内容区的宽度与屏幕宽度匹配，完成核心内容区的适配，具体如图5所示；在本实施例中，元素的中心坐标可以按如下公式计算：

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

canvas.width：核心内容区调整后的宽度；

center.width：核心内容区调整前的宽度；

Target.x：所求元素中心的X坐标值；

target.y：所求元素中西的Y坐标值；

(X,Y):元素的原始中心坐标值；(如果动画数据中未记录该坐标值，则根据元素一个或多个端点的坐标进行计算)

在本实施例中，页面元素部分针对核心内容区的缩放进行相应的元素位置适配，为保证显示效果及机器识别效果，页面元素采用固定尺寸方式展示。

本实施例的技术方案整体流程如图6所示，可以发现，对于网页动画而言，首先一次性绘制其中的背景，即静态区；而后从动画的首帧起逐帧进行绘制：包括绘制核心内容区和元素，直至绘制完末帧，可见图6中静态区没有逐帧进行重绘，这是因为canvas页面重绘区域的大小将非常明显的影响性能，因此仅对静态区进行铺设而不重绘，有利于节约性能。

本实施例的技术方案，相比于现有技术具有以下优点：1)开发代价减小：hack适配需要考虑更多的情况并引入更多的资源，而本实施例的技术方案则不需要额外的资源，大大减小了开发代价；2)浏览器执行效率提高:hack适配需要更多的资源及更大的重绘区域，拉伸适配也需要更大的重绘区域，而本实施例中重绘区域的减小及资源消耗的减小可以大大提升canvas的渲染执行效率；3)全适配且重要特征元素清晰不发生形变，与视觉设计吻合：本实施例中，元素图形中心位置随核心内容区的缩放改变，元素尺寸固定保证特征清晰明显。

本发明实施例还提供了另一种用于实现本发明实施例快的网页动画适配装置的终端，如图8所示，为了便于说明，仅示出了与本发明实施例相关的部分，具体技术细节未揭示的，请参照本发明实施例方法部分。该终端可以为包括手机、平板电脑、PDA(PersonalDigital Assistant，个人数字助理)、POS(Point of Sales，销售终端)、车载电脑等任意终端设备，以终端为手机为例：

图8示出的是与本发明实施例提供的终端相关的手机的部分结构的框图。参考图8，手机包括：射频(Radio Frequency，RF)电路810、存储器820、输入单元830、显示单元840、传感器850、音频电路860、无线保真(wirelessfidelity，WiFi)模块870、处理器880、以及电源890等部件。本领域技术人员可以理解，图8中示出的手机结构并不构成对手机的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

下面结合图8对手机的各个构成部件进行具体的介绍：

RF电路810可用于收发信息或通话过程中，信号的接收和发送，特别地，将基站的下行信息接收后，给处理器880处理；另外，将设计上行的数据发送给基站。通常，RF电路包括但不限于天线、至少一个放大器、收发信机、耦合器、低噪声放大器(Low NoiseAmplifier，LNA)、双工器等。此外，RF电路810还可以通过无线通信与网络和其他设备通信。上述无线通信可以使用任一通信标准或协议，包括但不限于全球移动通讯***(GlobalSystem of Mobile communication，GSM)、通用分组无线服务(General Packet RadioService，GPRS)、码分多址(Code Division Multiple Access，CDMA)、宽带码分多址(Wideband Code Division Multiple Access,WCDMA)、长期演进(Long Term Evolution，LTE)、电子邮件、短消息服务(Short Messaging Service，SMS)等。

存储器820可用于存储软件程序以及模块，处理器880通过运行存储在存储器820的软件程序以及模块，从而执行手机的各种功能应用以及数据处理。存储器820可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作***、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据手机的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器820可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

输入单元830可用于接收输入的数字或字符信息，以及产生与手机800的用户设置以及功能控制有关的键信号输入。具体地，输入单元830可包括触控面板831以及其他输入设备832。触控面板831，也称为触摸屏，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板831上或在触控面板831附近的操作)，并根据预先设定的程式驱动相应的连接装置。可选的，触控面板831可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器880，并能接收处理器880发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触控面板831。除了触控面板831，输入单元830还可以包括其他输入设备832。具体地，其他输入设备832可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。

显示单元840可用于显示由用户输入的信息或提供给用户的信息以及手机的各种菜单。显示单元840可包括显示面板841，可选的，可以采用液晶显示器(Liquid CrystalDisplay，LCD)、有机发光二极管(Organic Light-Emitting Diode,OLED)等形式来配置显示面板841。进一步的，触控面板831可覆盖显示面板841，当触控面板831检测到在其上或附近的触摸操作后，传送给处理器880以确定触摸事件的类型，随后处理器880根据触摸事件的类型在显示面板841上提供相应的视觉输出。虽然在图8中，触控面板831与显示面板841是作为两个独立的部件来实现手机的输入和输入功能，但是在某些实施例中，可以将触控面板831与显示面板841集成而实现手机的输入和输出功能。

手机800还可包括至少一种传感器850，比如光传感器、运动传感器以及其他传感器。具体地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板841的亮度，接近传感器可在手机移动到耳边时，关闭显示面板841和/或背光。作为运动传感器的一种，加速计传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别手机姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；至于手机还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。

音频电路860、扬声器861，传声器862可提供用户与手机之间的音频接口。音频电路860可将接收到的音频数据转换后的电信号，传输到扬声器861，由扬声器861转换为声音信号输出；另一方面，传声器862将收集的声音信号转换为电信号，由音频电路860接收后转换为音频数据，再将音频数据输出处理器880处理后，经RF电路810以发送给比如另一手机，或者将音频数据输出至存储器820以便进一步处理。

WiFi属于短距离无线传输技术，手机通过WiFi模块870可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图8示出了WiFi模块870，但是可以理解的是，其并不属于手机800的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。

处理器880是手机的控制中心，利用各种接口和线路连接整个手机的各个部分，通过运行或执行存储在存储器820内的软件程序和/或模块，以及调用存储在存储器820内的数据，执行手机的各种功能和处理数据，从而对手机进行整体监控。可选的，处理器880可包括一个或多个处理单元；优选的，处理器880可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作***、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器880中。

手机800还包括给各个部件供电的电源890(比如电池)，优选的，电源可以通过电源管理***与处理器880逻辑相连，从而通过电源管理***实现管理充电、放电、以及功耗管理等功能。

尽管未示出，手机800还可以包括摄像头、蓝牙模块等，在此不再赘述。

在本发明实施例中，该终端所包括的处理器880还具有以下功能：

获取待展示的动画数据；

识别所述动画中的核心内容区和元素；

逐帧绘制所述核心内容区和所述元素，其中根据当前的屏幕的尺寸调整所述核心内容区的尺寸，并按调整后所述核心内容区的尺寸绘制所述核心内容区，以及根据预设的尺寸绘制所述元素。

上述处理器880还对所述核心内容区进行缩放且保持所述核心内容区的宽高比不变，直至所述核心内容区的宽度与所述屏幕的宽度相匹配，直至所述核心内容区的宽度与所述屏幕的宽度相匹配。

上述处理器880还获取所述元素的中心位置，计算所述核心内容区调整前的尺寸与调整后的尺寸的比值，根据所述比值调整所述元素的中心位置，并根据调整后的中心位置按所述预设的尺寸绘制所述元素。

上述处理器880还识别所述动画中的静态区；根据所述屏幕的尺寸调整所述静态区的尺寸并绘制所述静态区。

上述处理器880还根据所述动画的图像内容，和/或所述网页数据中所述动画对应的动画数据，从所述动画中识别所述核心内容区和所述元素。

值得注意的是，上述终端实施例中，所包括的各个单元只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。

本发明实施例提供的终端，通过根据计算的热度值大小，可以将用户更加期望分享的场景截图排列在多张图片中的靠前位置，有利于用户快速选择其期望分享的场景截图，并通过社交应用进行分享。

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

以上参照附图说明了本发明的优选实施例，并非因此局限本发明的权利范围。本领域技术人员不脱离本发明的范围和实质，可以有多种变型方案实现本发明，比如作为一个实施例的特征可用于另一实施例而得到又一实施例。凡在运用本发明的技术构思之内所作的任何修改、等同替换和改进，均应在本发明的权利范围之内。

Claims (10)

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

获取待展示的动画数据；

识别所述动画数据中的核心内容区和元素；

逐帧绘制所述核心内容区和所述元素，其中根据终端的屏幕的尺寸调整所述核心内容区的尺寸得到调整后的尺寸，并按所述调整后的尺寸绘制所述核心内容区，以及根据预设的尺寸绘制所述元素。

2.根据权利要求1所述的网页动画适配屏幕的方法，其特征在于，根据当前的屏幕的尺寸调整所述核心内容区在每一帧中的尺寸，具体包括：

对所述核心内容区进行缩放且保持所述核心内容区的宽高比不变，直至所述核心内容区的宽度与所述屏幕的宽度相匹配。

3.根据权利要求1所述的网页动画适配屏幕的方法，其特征在于，根据预设的尺寸绘制所述元素，具体包括：

获取所述元素的中心位置，计算所述核心内容区调整前的尺寸与调整后的尺寸的比值，根据所述比值调整所述元素的中心位置得到调整后的中心位置，并根据调整后的中心位置按所述预设的尺寸绘制所述元素。

4.根据权利要求1所述的网页动画适配屏幕的方法，其特征在于，在逐帧绘制所述核心内容区和所述元素之前，还包括：

识别所述动画数据中的静态区；

根据所述屏幕的尺寸调整所述静态区的尺寸并绘制所述静态区。

5.根据权利要求1至4中任一项所述的网页动画适配屏幕的方法，其特征在于，识别所述动画数据中的核心内容区和元素，具体包括：

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

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

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

识别模块，识别所述动画数据中的核心内容区和元素；

绘制模块，逐帧绘制所述核心内容区和所述元素，其中根据终端的屏幕的尺寸调整所述核心内容区的尺寸得到调整后的尺寸，并按所述调整后的尺寸绘制所述核心内容区，以及根据预设的尺寸绘制所述元素。

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

所述绘制模块对所述核心内容区进行缩放且保持所述核心内容区的宽高比不变，直至所述核心内容区的宽度与所述屏幕的宽度相匹配。

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

所述绘制模块获取所述元素的中心位置，计算所述核心内容区调整前的尺寸与调整后的尺寸的比值，根据所述比值调整所述元素的中心位置得到调整后的中心位置，并根据调整后的中心位置按所述预设的尺寸绘制所述元素。

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

所述识别模块还识别所述动画数据中的静态区；

所述绘制模块还根据所述屏幕的尺寸调整所述静态区的尺寸并绘制所述静态区。

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

所述识别模块根据所述动画的图像内容，和/或所述网页数据中所述动画对应的动画数据，从所述动画数据中识别所述核心内容区和所述元素。