网页动画适配屏幕的方法和装置制造方法及图纸

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

Methods and devices for web animation adaptable screen

The invention discloses a method and device for a web animation adaptation screen. The method includes: obtaining the animated data to be displayed, identifying the core content area and elements in the animation data, drawing the core content area and element by frame by frame, adjusting the size of the core content area according to the size of the terminal screen. Inch, and draw the core content area according to the size of the core content area after adjustment, and draw the elements according to the preset size. According to the adaptation of the invention to the web animation, the core content area in the animation is adjusted according to the screen size, so that the animation is suitable to be displayed on the screen, and the elements are drawn according to the fixed size, so that the elements in the animation will not be deformed, so that the user can accurately identify and use the elements in the animation. The result shows that the webpage animation adaptation effect of the invention is relatively high, and the other resources are not needed in the adaptation process, and the corresponding development project is smaller.

【技术实现步骤摘要】
网页动画适配屏幕的方法和装置
本专利技术涉及互联网
，尤其涉及一种网页动画适配屏幕的方法和装置。
技术介绍
在浏览器中展现网页时，根据屏幕尺寸对页面中的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，逐帧绘制核心内容区和元素，其中获取所述元素的中心位置，计算所述核心内容区调整前的尺寸与调整后的尺寸的比值本文档来自技高网...

【技术保护点】
1.一种网页动画适配屏幕的方法，其特征在于，该方法包括：获取待展示的动画数据；识别所述动画数据中的核心内容区和元素；逐帧绘制所述核心内容区和所述元素，其中根据终端的屏幕的尺寸调整所述核心内容区的尺寸得到调整后的尺寸，并按所述调整后的尺寸绘制所述核心内容区，以及根据预设的尺寸绘制所述元素。

【技术特征摘要】
1.一种网页动画适配屏幕的方法，其特征在于，该方法包括：获取待展示的动画数据；识别所述动画数据中的核心内容区和元素；逐帧绘制所述核心内容区和所述元素，其中根据终端的屏幕的尺寸调整所述核心内容区的尺寸得到调整后的尺寸，并按所述调整后的尺寸绘制所述核心内容区，以及根据预设的尺寸绘制所述元素。2.根据权利要求1所述的网页动画适配屏幕的方法，其特征在于，根据当前的屏幕的尺寸调整所述核心内容区在每一帧中的尺寸，具体包括：对所述核心内容区进行缩放且保持所述核心内容区的宽高比不变，直至所述核心内容区的宽度与所述屏幕的宽度相匹配。3.根据权利要求1所述的网页动画适配屏幕的方法，其特征在于，根据预设的尺寸绘制所述元素，具体包括：获取所述元素的中心位置，计算所述核心内容区调整前的尺寸与调整后的尺寸的比值，根据所述比值调整所述元素的中心位置得到调整后的中心位置，并根据调整后的中心位置按所述预设的尺寸绘制所述元素。4.根据权利要求1所述的网页动画适配屏幕的方法，其特征在于，在逐帧绘制所述核心内容区和所述元素之前，还包括：识别所述动画数据中的静态区；根据所述屏幕的尺寸调整所述静态区的尺寸并绘制所述静态区。5.根据权利要求1至4中任一项所述的网页动画适配屏幕的方法，其特征在于，识别所述动画数据中的核心内容区和元素，具体包括：根据所述动画的图像内容，和/或所述网页数据中所述动画对应的动画...

【专利技术属性】
技术研发人员：刘希呈，
申请(专利权)人：腾讯科技深圳有限公司，
类型：发明
国别省市：广东,44