CN107967344B - 网页动画效果的实现方法、系统、设备及存储介质 - Google Patents

Abstract

本发明提供了一种网页动画效果的实现方法、系统、设备及存储介质，该方法包括将待处理的多个静态图片生成动态图片；创建包括网页信息的超文本标记语言文件，并在所述超文本标记语言文件中插入所述动态图片；利用层叠样式表定义所述动态图片的初始位置；利用所述层叠样式表定义基于所述动态图片的动画的显示样式。本发明解决了配置不高的终端(例如电视盒子、手机)上运行动画卡顿、闪退的问题；能够在配置不高的电视盒子、手机上运行动画效果，增加了交互性，给用户更好的体验。

Description

网页动画效果的实现方法、系统、设备及存储介质

技术领域

本发明涉及网页处理技术领域，尤其涉及一种网页动画效果的实现方法、系统、设备及存储介质。

背景技术

随着互联网的蓬勃发展和Html5(超文本标记语言(HTML)的第五次重大修改)技术的兴起，Html5技术为网页提供了音频、视频、动画等各种多媒体表现手段，网页不再是单纯的静态的网页，里面还包含有音频、视频、动画等多媒体，给用户带来更好的体验，但与此同时也带来了一些问题，如资源越来越大、消耗的带宽越来越多、客户端浏览器上消耗的内存越来越多，特别是在硬件配置不高的电视盒子、手机在加载动画的时候，可能出现卡顿、甚至闪退，这个时候就需要考虑消耗硬件资源低的动画实现方案。

现有技术有三种

1、Canvas：Canvas是使用JavaScript程序绘图(动态生成)

1)在部分Android机器上则出现了很奇葩的闪烁；

2)依赖分辨率；

3)不支持事件处理器。

2、SVG：SVG是使用XML文档描述来绘图。

1)DOM比正常的图形慢，而且如果其结点多而杂，就更慢；

2)不能与HTML内容集成；

3)整个SVG作为一个动画；

4)浏览器兼容性问题，IE8-以及Android2.3默认浏览器是不支持SVG。

3、Javascript：Javascript脚本语言编写动画。动画由多个帧图片组成，由Javascript语言控制帧图片的展示

1)JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况；

2)代码的复杂度高；

3)Javascript在播放帧动画的时候，会消耗较多的硬件资源，需要硬件配置较高；

4)需要很多的帧图片，对网络带宽有很高的要求。

发明内容

针对现有技术中的问题，本发明的目的在于提供一种网页动画效果的实现方法、系统、设备及存储介质，解决配置不高的终端(电视盒子、手机)上运行动画卡顿、闪退的问题。

本发明实施例提供一种网页动画效果的实现方法，包括如下步骤：

将待处理的多个静态图片生成动态图片；

创建包括网页信息的超文本标记语言文件，并在所述超文本标记语言文件中插入所述动态图片；

于所述超文本标记语言文件中，利用层叠样式表定义所述动态图片的初始位置；

于所述超文本标记语言文件中，利用所述层叠样式表定义基于所述动态图片的动画的显示样式。

可选地，在所述超文本标记语言文件中以div标签插入所述动态图片。

可选地，利用层叠样式表的position属性定义所述动态图片的初始位置。

可选地，定义所述动态图片的初始位置，包括如下步骤：

定义div标签的相对定位；

定义img标签中所述动态图片的绝对定位；

定义img标签中所述动态图片的初始位置。

可选地，定义基于所述动态图片的动画的显示样式，包括如下步骤：

以img标签定义动画名称和动画时长；

创建@keyframes规则，在该规则中定义动画的显示样式。

可选地，还包括如下步骤：

显示网页时，从所述超文本标记语言文件中获取动画的配置数据，所述动画的配置数据包括所述动态图片的信息和动画的显示样式；

根据所述动画的配置数据显示动画效果。

可选地，还包括如下步骤：

于所述超文本标记语言文件中，给基于动态图片形成的动画的配置数据增加第一标签；

于所述超文本标记语言文件中，插入所述多个静态图片；

于所述超文本标记语言文件中，利用层叠样式表定义所述多个静态图片的初始位置和基于所述静态图片的动画的显示样式；

于所述超文本标记语言文件中，给基于静态图片形成的动画的配置数据增加第二标签。

可选地，还包括如下步骤：

显示网页时，从所述超文本标记语言文件中获取动画的配置数据，所述动画的配置数据包括基于动态图片形成的动画的配置数据和基于静态图片形成的动画的配置数据；

判断当前显示网页的终端的资源利用率是否大于预设利用率阈值，如果是，则根据所述基于动态图片形成的动画的配置数据显示动画效果，否则根据所述基于静态图片形成的动画的配置数据显示动画效果。

可选地，还包括如下步骤：

将所述多个静态图片分为多个组，从每组静态图片中随机抽取一静态图片作为样本图片；

从各个所述样本图片中抽取多个样本像素点，如果一样本像素点与周围至少一个像素点的RGB差值至少大于预设像素阈值，则定义该样本像素点为突出像素点；

如果一样本图片中突出像素点占该样本图片中所有样本像素点的数量比例大于第一比例值，则定义该样本图片为突出图片；

如果所述突出图片占所有样本图片的数量比例大于第一比例值，则定义所述基于动态图片形成的动画为低质量动画。

可选地，当前显示网页的终端的资源利用率大于预设利用率阈值时，根据所述基于动态图片形成的动画的配置数据显示动画效果，并判断所述基于动态图片形成的动画是否为低质量动画；

如果是，则在所述动画的表面形成可关闭的具有预设透明度的浮层，检测到用户在浮层的点击操作时，加载所述基于静态图片形成的动画；

如果否，则继续显示所述基于动态图片形成的动画。

可选地，当前显示网页的终端的资源利用率大于预设利用率阈值时，根据所述基于动态图片形成的动画的配置数据显示动画效果，并判断所述基于动态图片形成的动画是否为低质量动画；

如果是，则在所述动画的周围形成标记图形，检测到用户在标记图形的点击操作时，加载所述基于静态图片形成的动画；

如果否，则继续显示所述基于动态图片形成的动画。

可选地，在网页中的动画显示位置检测到有用户的鼠标滚轮操作时；

当鼠标滚轮沿第一方向滚动时，如果当前显示的是基于动态图片形成的动画，则关闭该基于动态图片形成的动画，并加载基于静态图片形成的动画，如果当前显示的是基于静态图片形成的动画，则不执行任何操作；

当鼠标滚轮沿第二方向滚动时，如果当前显示的是基于静态图片形成的动画，则关闭该基于静态图片形成的动画，并加载基于动态图片形成的动画，如果当前显示的是基于动态图片形成的动画，则不执行任何操作。

可选地，从每组静态图片中随机抽取一静态图片作为样本图片，或选择每组静态图片中的第一幅作为样本图片，或选择每组静态图片中的最后一幅作为样本图片，或选择每组静态图片中的中间一幅作为样本图片。

可选地，定义各个所述样本图片中样本像素点的数量为预设样本数，计算各个样本图片中总像素点数与预设样本数的比值，选择该比值的整数n作为样本选择步长；

在各个所述样本图片中，每隔n个像素点选择一像素点作为样本像素点。

本发明实施例还提供一种网页动画效果的实现系统，用于实现所述的网页动画效果的实现方法，所述系统包括：

动态图片生成模块，用于将待处理的多个静态图片生成动态图片；

超文本标记语言文件生成模块，用于创建包括网页信息的超文本标记语言文件，并在所述超文本标记语言文件中插入所述动态图片；

动画样式定义模块，用于在所述超文本标记语言文件中，利用层叠样式表定义所述动态图片的初始位置；以及利用所述层叠样式表定义基于所述动态图片的动画的显示样式。

本发明实施例还提供一种网页动画效果的实现设备，包括：

处理器；

存储器，其中存储有所述处理器的可执行指令；

其中，所述处理器配置为经由执行所述可执行指令来执行所述的网页动画效果的实现方法的步骤。

本发明实施例还提供一种计算机可读存储介质，用于存储程序，所述程序被执行时实现所述的网页动画效果的实现方法的步骤。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

本发明所提供的网页动画效果的实现方法、系统、设备及存储介质，解决了配置不高的终端(例如电视盒子、手机)上运行动画卡顿、闪退的问题。本发明的方法能够在配置不高的电视盒子、手机上运行动画效果，增加了交互性，给用户更好的体验。

附图说明

通过阅读参照以下附图对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显。

图1是本发明一实施例的网页动画效果的实现方法的流程图；

图2是本发明一实施例的选择采用静态图片的动画和采用动态图片的动画的流程图；

图3是本发明一实施例的判断动画质量的流程图；

图4是本发明一实施例的根据不同动画质量进行显示的流程图；

图5是本发明一实施例的网页动画效果的实现系统的结构示意图；

图6是本发明一实施例的网页动画效果的实现设备的结构示意图；

图7是本发明一实施例的计算机可读存储介质的结构示意图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。

此外，附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

如图1所示，本发明实施例提供一种网页动画效果的实现方法，包括如下步骤：

S100：将待处理的多个静态图片生成动态图片，例如生成GIF图片；

S200：创建包括网页信息的超文本标记语言文件(Html文件)，并在所述超文本标记语言文件中插入所述动态图片；

S300：于所述超文本标记语言文件中，利用层叠样式表CSS定义所述动态图片的初始位置；

S400：于所述超文本标记语言文件中，利用所述层叠样式表定义基于所述动态图片的动画的显示样式。

在该实施例中，步骤S200中，以div标签插入所述动态图片，实现方式可以如下：

<！DOCTYPE html>

<html>

<head>

<title>一种基于图片节省网络资源的动画方法及装置</title>

</head>

<body>

<div><img scr＝”img/动态图片.gif”></div>

</body>

</html>

在该实施例中，利用层叠样式表的position属性定义所述动态图片的初始位置。并且步骤S300进一步包括如下步骤：

定义div标签的相对定位position:relative；

定义img标签中所述动态图片的绝对定位position:absolute；

定义img标签中所述动态图片的初始位置，例如定义动态图片初始状态左下对齐left:0；bottom:0。

步骤S400，定义基于所述动态图片的动画的显示样式，包括如下步骤：

以img标签定义动画名称和动画时长，例如把myfirst(动画名称)动画捆绑到div元素，时长：5s，animation:myfirst 5s；

创建@keyframes规则，在该规则中定义动画的显示样式，例如：@keyframesmyfirst{from{left:0；}to{left:100px；}}；显示样式即为从左0px到左100px平移。

具体地，定义动态图片的初始位置和动画的显示样式实现如下：

在完成动画的定义后，该网页动画效果的实现还包括如下步骤：

显示网页时，从所述超文本标记语言文件中获取动画的配置数据，所述动画的配置数据包括所述动态图片的信息和动画的显示样式；

根据所述动画的配置数据显示动画效果。

本发明通过将静态图片转换为动态图片，减小了图片的大小，在后续显示动画时，对资源的消耗也大大减小，从而可以很好地应用于配置不高的电视盒子、手机等终端设备，给用户提供更好的体验。

在实际应用中，考虑到静态图片转换为动态图片时，进行了有损压缩，会对形成的动画的质量造成不利影响。有些情况下，应用在性能比较好的终端中，或终端当前无很多其他任务运行时，其实也是可以显示完整的动画的，而不必采用基于动态图片形成的动画进行显示。为了进一步解决该问题，该实施例进一步对上述方法进行了改进，在不同的情况下可以显示不同的动画效果。

如图2所示，该网页动画效果的实现方法还包括如下步骤：

S501：于所述超文本标记语言文件中，给基于动态图片形成的动画的配置数据增加第一标签；

S502：于所述超文本标记语言文件中，插入所述多个静态图片；

S503：于所述超文本标记语言文件中，利用层叠样式表定义所述多个静态图片的初始位置和基于所述静态图片的动画的显示样式；

S504：于所述超文本标记语言文件中，给基于静态图片形成的动画的配置数据增加第二标签，通过第一标签和第二标签来区分基于动态图片形成的动画和基于静态图片形成的动画。

因此形成的超文本标记语言文件中，同时存在有基于动态图片形成的动画的配置数据和基于静态图片形成的动画的配置数据，后续终端在加载网页时，可以通过第一标签和第二标签进行分别识别。

S505：显示网页时，从所述超文本标记语言文件中获取动画的配置数据，所述动画的配置数据包括基于动态图片形成的动画的配置数据和基于静态图片形成的动画的配置数据；

S506：判断当前显示网页的终端的资源利用率是否大于预设利用率阈值，如果是，则继续步骤S507，否则继续步骤S508；

此处资源利用率可以是内存利用率、CPU占用率、显卡利用率等等任一资源当前的利用率，也可以是多个资源利用率结合起来综合进行判断当前终端的状态。如果资源利用率较大，则说明当前终端不适用于显示资源消耗较大的基于静态图片形成的动画，如果资源利用率较小，则为了提高用户观看动画效果的体验，则可以选择基于静态图片形成的动画。

S507：根据所述基于动态图片形成的动画的配置数据显示动画效果，用户观看网页可以十分流畅；

S508：根据所述基于静态图片形成的动画的配置数据显示动画效果，用户可以获得更好的动画的观看效果，由于当前资源利用率比较低，也不会造成系统卡顿，网页浏览仍然可以顺畅进行。

进一步地，在实际应用中，还存在着一些其他问题。例如，有一些图片本身包含的元素非常多，里面包含的信息较多，如果对该种图片进行有损压缩，可能会因为信息的缺失而无法实现显示效果。例如，包含很多文字的图片，进行压缩后，可能会因为文字过于模糊，而无法正常显示，或者包含风景和人物的清晰图片，在压缩后，可能无法很好地展现美景和人物的细节。基于此，该实施例进一步对该网页动画效果的实现方法进行了改进。

如图3所示，该网页动画效果的实现方法还包括如下步骤：

S601：将所述多个静态图片分为多个组，从每组静态图片中随机抽取一静态图片作为样本图片；

S602：从各个所述样本图片中抽取多个样本像素点，如果一样本像素点与周围至少一个像素点的RGB差值至少大于预设像素阈值，则定义该样本像素点为突出像素点；

S603：如果一样本图片中突出像素点占该样本图片中所有样本像素点的数量比例大于第一比例值，则定义该样本图片为突出图片；

S604：如果所述突出图片占所有样本图片的数量比例大于第一比例值，则定义所述基于动态图片形成的动画为低质量动画。

即当突出图片占所有样本图片的数量比例大于第一比例值时，说明该组静态图片包含的信息量比较多，如果直接采用基于动态图片形成的动画进行显示，会造成大量信息的缺失，失去了动画显示的意义。然而，如果当认定基于动态图片形成的动画为低质量动画时，即更改为基于静态图片形成的动画进行显示，可能会对终端系统造成较大的负担和影响，造成系统卡顿。因此，该实施例进一步提供了选择的路径，供用户选择是否由低质量动画改为高质量动画显示。

如图4所示，该网页动画效果的实现方法还包括如下步骤：

S507作为前提条件，即当前显示网页的终端的资源利用率大于预设利用率阈值时，根据所述基于动态图片形成的动画的配置数据显示动画效果；

S605：判断所述基于动态图片形成的动画是否为低质量动画；

S606：如果是，则在所述动画的表面形成可关闭的具有预设透明度的浮层，检测到用户在浮层的点击操作时，加载所述基于静态图片形成的动画；该浮层的透明度可以根据需要进行设置，以能够发现但并不遮挡动画为宜。浮层上可以增加提示文字，例如提示用户，请用户选择是否由低质量动画转为高质量动画。

用户在看到动画以及动画上的浮层后可以根据自身需要进行选择，如果认为当前动图已经可以满足使用需要，则可以直接将浮层关闭，例如点击浮层一角的关闭按钮，如果认为当前动图并不足以显示图片的内容，则可以点击浮层本身，浮层可以链接到高质量动画，即加载所述基于静态图片形成的动画。

S607：如果否，则继续显示所述基于动态图片形成的动画。

另外，该方法在应用中，不限于采用浮层的方式，也可以增加提示图形，例如当前显示网页的终端的资源利用率大于预设利用率阈值时，根据所述基于动态图片形成的动画的配置数据显示动画效果，并判断所述基于动态图片形成的动画是否为低质量动画；

如果是，则在所述动画的周围形成标记图形，检测到用户在标记图形的点击操作时，加载所述基于静态图片形成的动画；标记图形可以为多种多样，例如在动画的一侧边设置的长条，长条中写有点击转入高质量动画的提示语言，或者在动画的一侧设置圆形或其他形状的按钮等等，均属于本发明的保护范围之内。

如果否，则继续显示所述基于动态图片形成的动画。

进一步地，还可以采用其他方式在低质量动画和高质量动画之间进行切换，例如通过鼠标滚轮的上滑和下滑来进行切换。具体包括如下步骤：

在网页中的动画显示位置检测到有用户的鼠标滚轮操作时；

当鼠标滚轮沿第一方向滚动时，如果当前显示的是基于动态图片形成的动画，则关闭该基于动态图片形成的动画，并加载基于静态图片形成的动画，相当于将基于动态图片形成的动画“放大”至基于静态图片形成的动画；如果当前显示的是基于静态图片形成的动画，则不执行任何操作；

当鼠标滚轮沿第二方向滚动时，如果当前显示的是基于静态图片形成的动画，则关闭该基于静态图片形成的动画，并加载基于动态图片形成的动画，相当于将基于静态图片的动画“缩小”至基于动态图片形成的动画；如果当前显示的是基于动态图片形成的动画，则不执行任何操作。

进一步地，在选择样本图片时，可以采用多种不同的方法，从每组静态图片中随机抽取一静态图片作为样本图片，或选择每组静态图片中的第一幅作为样本图片，或选择每组静态图片中的最后一幅作为样本图片，或选择每组静态图片中的中间一幅作为样本图片。

进一步地，在选择样本像素点时，也可以采用多种不同的方法。在该实施例中，定义各个所述样本图片中样本像素点的数量为预设样本数，计算各个样本图片中总像素点数与预设样本数的比值，选择该比值的整数n作为样本选择步长；

在各个所述样本图片中，每隔n个像素点选择一像素点作为样本像素点。以n为步长进行平均选取样本像素点，可以提高图片评估的准确性。

通过定义预设样本数，可以控制终端的计算量。例如，对于高清图片和普通图片都选择同样的预设样本数1000，即可以实现同样的计算量，避免对终端的资源造成过多的负担。由于后期实际上还是需要用户进行选择是否切换到高质量图片的，因此预设样本数可以适当选择的少一些，以降低对终端资源的负担，仅提供一个参考性的判断结果。

如图5所示，本发明实施例还提供一种网页动画效果的实现系统，用于实现所述的网页动画效果的实现方法，所述系统包括：

动态图片生成模块100，用于将待处理的多个静态图片生成动态图片；

超文本标记语言文件生成模块200，用于创建包括网页信息的超文本标记语言文件，并在所述超文本标记语言文件中插入所述动态图片；

动画样式定义模块300，用于在所述超文本标记语言文件中，利用层叠样式表定义所述动态图片的初始位置；以及利用所述层叠样式表定义基于所述动态图片的动画的显示样式。

进一步地，该网页动画效果的实现系统还包括动画显示模块400，用于显示网页时，从所述超文本标记语言文件中获取动画的配置数据；根据所述动画的配置数据显示动画效果。

进一步地，该网页动画效果的实现系统还包括动画质量判断模块，用于执行上述步骤S601～S604，与之相对应的，超文本标记语言文件生成模块200还可以用于在所述超文本标记语言文件中插入所述静态图片，并分别在基于动态图片形成的动画和基于静态图片形成的动画上增加第一标签和第二标签；动画样式模块300还用于定义基于静态图片形成的动画的样式，动画显示模块400执行上述步骤S506～S508，并在执行上述S507时，进一步执行上述步骤S606～S607，以实现根据不同需要提供不同的动画效果，增强与用户的交互体验。

因此，本发明通过动态图片生成模块100将静态图片转换为动态图片，减小了图片的大小，在后续动画显示模块400显示动画时，对资源的消耗也大大减小，从而可以很好地应用于配置不高的电视盒子、手机等终端设备，给用户提供更好的体验。

下面参照图6来描述根据本发明的这种实施方式的电子设备600。图6显示的电子设备600仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图6所示，电子设备600以通用计算设备的形式表现。电子设备600的组件可以包括但不限于：至少一个处理单元610、至少一个存储单元620、连接不同系统组件(包括存储单元620和处理单元610)的总线630、显示单元640等。

其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元610执行，使得所述处理单元610执行本说明书上述电子处方流转处理方法部分中描述的根据本发明各种示例性实施方式的步骤。例如，所述处理单元610可以执行如图1中所示的步骤。

所述存储单元620可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)6201和/或高速缓存存储单元6202，还可以进一步包括只读存储单元(ROM)6203。

所述存储单元620还可以包括具有一组(至少一个)程序模块6205的程序/实用工具6204，这样的程序模块6205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线630可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备600也可以与一个或多个外部设备700(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备600交互的设备通信，和/或与使得该电子设备600能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口650进行。并且，电子设备600还可以通过网络适配器660与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。网络适配器660可以通过总线630与电子设备600的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备600使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

本发明实施例还提供一种计算机可读存储介质，用于存储程序，所述程序被执行时实现所述的网页动画效果的实现方法的步骤。在一些可能的实施方式中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行本说明书上述电子处方流转处理方法部分中描述的根据本发明各种示例性实施方式的步骤。

参考图7所示，描述了根据本发明的实施方式的用于实现上述方法的程序产品800，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

所述计算机可读存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读存储介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

本发明所提供的网页动画效果的实现方法、系统、设备及存储介质，解决了配置不高的终端(例如电视盒子、手机)上运行动画卡顿、闪退的问题。本发明的方法能够在配置不高的电视盒子、手机上运行动画效果，增加了交互性，给用户更好的体验。

以上内容是结合具体的优选实施方式对本发明所作的进一步详细说明，不能认定本发明的具体实施只局限于这些说明。对于本发明所属技术领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干简单推演或替换，都应当视为属于本发明的保护范围。

Claims (15)

1.一种网页动画效果的实现方法，其特征在于，包括如下步骤：

将待处理的多个静态图片生成动态图片；

创建包括网页信息的超文本标记语言文件，并在所述超文本标记语言文件中插入所述动态图片；

于所述超文本标记语言文件中，利用层叠样式表定义所述动态图片的初始位置；

于所述超文本标记语言文件中，利用所述层叠样式表定义基于所述动态图片的动画的显示样式；

所述方法还包括如下步骤：

于所述超文本标记语言文件中，给基于动态图片形成的动画的配置数据增加第一标签；

于所述超文本标记语言文件中，插入所述多个静态图片；

于所述超文本标记语言文件中，利用层叠样式表定义所述多个静态图片的初始位置和基于所述静态图片的动画的显示样式；

于所述超文本标记语言文件中，给基于静态图片形成的动画的配置数据增加第二标签；

所述方法还包括如下步骤：

显示网页时，从所述超文本标记语言文件中获取动画的配置数据，所述动画的配置数据包括基于动态图片形成的动画的配置数据和基于静态图片形成的动画的配置数据；

判断当前显示网页的终端的资源利用率是否大于预设利用率阈值，如果是，则根据所述基于动态图片形成的动画的配置数据显示动画效果，否则根据所述基于静态图片形成的动画的配置数据显示动画效果。

2.根据权利要求1所述的网页动画效果的实现方法，其特征在于，在所述超文本标记语言文件中以div标签插入所述动态图片。

3.根据权利要求1所述的网页动画效果的实现方法，其特征在于，利用层叠样式表的position属性定义所述动态图片的初始位置。

4.根据权利要求3所述的网页动画效果的实现方法，其特征在于，定义所述动态图片的初始位置，包括如下步骤：

定义div标签的相对定位；

定义img标签中所述动态图片的绝对定位；

定义img标签中所述动态图片的初始位置。

5.根据权利要求1所述的网页动画效果的实现方法，其特征在于，定义基于所述动态图片的动画的显示样式，包括如下步骤：

以img标签定义动画名称和动画时长；

创建@keyframes规则，在该规则中定义动画的显示样式。

6.根据权利要求1所述的网页动画效果的实现方法，其特征在于，还包括如下步骤：

显示网页时，从所述超文本标记语言文件中获取动画的配置数据，所述动画的配置数据包括所述动态图片的信息和动画的显示样式；

根据所述动画的配置数据显示动画效果。

7.根据权利要求1所述的网页动画效果的实现方法，其特征在于，还包括如下步骤：

将所述多个静态图片分为多个组，从每组静态图片中抽取一静态图片作为样本图片；

从各个所述样本图片中抽取多个样本像素点，如果一样本像素点与周围至少一个像素点的RGB差值至少大于预设像素阈值，则定义该样本像素点为突出像素点；

如果一样本图片中突出像素点占该样本图片中所有样本像素点的数量比例大于第一比例值，则定义该样本图片为突出图片；

如果所述突出图片占所有样本图片的数量比例大于第一比例值，则定义所述基于动态图片形成的动画为低质量动画。

8.根据权利要求7所述的网页动画效果的实现方法，其特征在于，当前显示网页的终端的资源利用率大于预设利用率阈值时，根据所述基于动态图片形成的动画的配置数据显示动画效果，并判断所述基于动态图片形成的动画是否为低质量动画；

如果是，则在所述动画的表面形成可关闭的具有预设透明度的浮层，检测到用户在浮层的点击操作时，加载所述基于静态图片形成的动画；

如果否，则继续显示所述基于动态图片形成的动画。

9.根据权利要求7所述的网页动画效果的实现方法，其特征在于，当前显示网页的终端的资源利用率大于预设利用率阈值时，根据所述基于动态图片形成的动画的配置数据显示动画效果，并判断所述基于动态图片形成的动画是否为低质量动画；

如果是，则在所述动画的周围形成标记图形，检测到用户在标记图形的点击操作时，加载所述基于静态图片形成的动画；

如果否，则继续显示所述基于动态图片形成的动画。

10.根据权利要求7所述的网页动画效果的实现方法，其特征在于，在网页中的动画显示位置检测到有用户的鼠标滚轮操作时；

当鼠标滚轮沿第一方向滚动时，如果当前显示的是基于动态图片形成的动画，则关闭该基于动态图片形成的动画，并加载基于静态图片形成的动画，如果当前显示的是基于静态图片形成的动画，则不执行任何操作；

当鼠标滚轮沿第二方向滚动时，如果当前显示的是基于静态图片形成的动画，则关闭该基于静态图片形成的动画，并加载基于动态图片形成的动画，如果当前显示的是基于动态图片形成的动画，则不执行任何操作。

11.根据权利要求7所述的网页动画效果的实现方法，其特征在于，从每组静态图片中随机抽取一静态图片作为样本图片，或选择每组静态图片中的第一幅作为样本图片，或选择每组静态图片中的最后一幅作为样本图片，或选择每组静态图片中的中间一幅作为样本图片。

12.根据权利要求7所述的网页动画效果的实现方法，其特征在于，定义各个所述样本图片中样本像素点的数量为预设样本数，计算各个样本图片中总像素点数与预设样本数的比值，选择该比值的整数n作为样本选择步长；

在各个所述样本图片中，每隔n个像素点选择一像素点作为样本像素点。

13.一种网页动画效果的实现系统，用于实现权利要求1至12中任一项所述的网页动画效果的实现方法，其特征在于，所述系统包括：

动态图片生成模块，用于将待处理的多个静态图片生成动态图片；

超文本标记语言文件生成模块，用于创建包括网页信息的超文本标记语言文件，并在所述超文本标记语言文件中插入所述动态图片；

动画样式定义模块，用于在所述超文本标记语言文件中，利用层叠样式表定义所述动态图片的初始位置；以及利用所述层叠样式表定义基于所述动态图片的动画的显示样式。

14.一种网页动画效果的实现设备，其特征在于，包括：

处理器；

存储器，其中存储有所述处理器的可执行指令；

其中，所述处理器配置为经由执行所述可执行指令来执行权利要求1至12中任一项所述的网页动画效果的实现方法的步骤。

15.一种计算机可读存储介质，用于存储程序，其特征在于，所述程序被执行时实现权利要求1至12中任一项所述的网页动画效果的实现方法的步骤。

Images