[发明专利]一种网页上的节省网络资源的动画效果的实现方法

说明书

一种网页上的节省网络资源的动画效果的实现方法，包括：把网页动画的画面分为若干个静止部分和若干个动态部分；用若干个矩形框框住动态部分；把用矩形框框住的部分分别做成gif格式的动态图片；利用网页的布局css的position属性，把gif格式的动态图片精准的放到对应的矩形框内，形成若干个新的动态部分；将若干个新的动态部分与若干个静止部分组合，完成网页的动画效果。本发明的一种网页上的节省网络资源的动画效果的实现方法，解决了配置不高的终端(电视盒子、手机)上运行动画卡顿、闪退的问题。本发明的方法能够在配置不高的电视盒子、手机上运行动画效果，增加了交互性，给用户更好地体验。

技术领域

本发明涉及一种动画效果的实现方法。特别是涉及一种网页上的节省网络资源的动画效果的实现方法。

背景技术

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

现有技术是采用javascript脚本语言编写动画。动画由多个帧图片组成，由javascript语言控制帧图片的展示，从而实现动画的播放。其存在如下不足：

1、需要很多的帧图片，对网络带宽有很高的要求；

2、javascript在播放帧动画的时候，会消耗较多的硬件资源，需要硬件配置较高。

发明内容

本发明所要解决的技术问题是，提供一种应用效果好的网页上的节省网络资源的动画效果的实现方法。

本发明所采用的技术方案是：一种网页上的节省网络资源的动画效果的实现方法，包括如下步骤：

1)把网页动画的画面分为若干个静止部分和若干个动态部分；

2)用若干个矩形框框住动态部分；

3)把用矩形框框住的部分分别做成gif格式的动态图片；

4)利用网页的布局css的position属性，把gif格式的动态图片精准的放到对应的矩形框内，形成若干个新的动态部分；

5)将若干个新的动态部分与步骤1)中的若干个静止部分组合，完成网页的动画效果。

步骤1)所述的静止的部分就是画面固定不变的部分；动态的部分就是画面动态改变的部分。

步骤3)在做成gif格式的动态图片过程中，要把框里的所有内容都做成gif格式的动态图片。

本发明的一种网页上的节省网络资源的动画效果的实现方法，解决了配置不高的终端(电视盒子、手机)上运行动画卡顿、闪退的问题。本发明的方法能够在配置不高的电视盒子、手机上运行动画效果，增加了交互性，给用户更好地体验。

具体实施方式

下面结合实施例对本发明的一种网页上的节省网络资源的动画效果的实现方法做出详细说明。

本发明的一种网页上的节省网络资源的动画效果的实现方法，包括如下步骤：

1)把网页动画的画面分为若干个静止部分和若干个动态部分；所述的静止的部分就是画面固定不变的部分例如远山；动态的部分就是画面动态改变的部分，如人物的胡须随风飘动。