网页动画渲染方法及装置的制造方法
【技术领域】
[0001]本发明涉及WEB平台技术领域，特别是涉及一种网页动画渲染方法、网页动画渲染装置。
【背景技术】
[0002]Web (互联网)网页是万维网上的一个按照HTML (HyperText Mark-up Language，超文本标记语言)格式组织起来的文件，在通过万维网进行信息查询时，以信息页面的形式出现。Web网页可包括图形、文字、声音和视像等信息，这些信息统称为网页元素。
[0003]Web桌面应用化指的是web网页在操作和体验上与普通电脑桌面应用程序一致。在html5 (超文本标记语言第5次修改)、css3 (层叠样式表)等技术出现后，人性化、灵动化的网页交互体验将会慢慢渗入主流。但是目前主流的网站，例如微博、云盘或搜索引擎等，网页元素的加载渲染都不会过度设计网页元素的动画效果，当必要时会以单个元素加载动画效果，无法很好的与桌面应用动画渲染媲美，从而无法很好的实现产品的web桌面应用化。另外，目前技术方案在网页上进行动画效果渲染时，采取相同的动画效果渲染，没有考虑网页实际情况，这会导致在普通配置的电脑上因为性能瓶颈，而无法完美的渲染设计师的设计意图，网页交互体验较差。
【发明内容】
[0004]基于此，有必要针对上述问题，提供一种网页动画渲染方法及装置，能够在保证用户最基本的功能需求上提高用户的网页使用体验。
[0005]—种网页动画渲染方法，包括步骤:
[0006]检测网页待加载元素数量与预设数量阈值的大小；
[0007]若所述元素数量大于预设数量阈值且所述元素的容器包含动画属性，将所述动画属性删除，得到新的容器；若所述元素数量大于预设数量阈值且所述元素的容器不包含动画属性，将所述容器作为新的容器；若所述元素数量小于等于预设数量阈值，将待渲染的动画属性添加到所述元素的容器中，得到新的容器；
[0008]根据预设的数据加载方式，将所述元素加载到网页，并在所述新的容器包含动画属性时进行相应的动画渲染。
[0009]—种网页动画渲染装置，包括依次相连的元素数量检测模块、动画属性处理模块和数据加载模块；
[0010]元素数量检测模块，用于检测网页待加载元素数量与预设数量阈值的大小；
[0011]动画属性处理模块，用于在所述元素数量大于预设数量阈值且所述元素的容器包含动画属性时，将所述动画属性删除，得到新的容器；在所述元素数量大于预设数量阈值且所述元素的容器不包含动画属性时，将所述容器作为新的容器；在所述元素数量小于等于预设数量阈值时，将待渲染的动画属性添加到所述元素的容器中，得到新的容器；
[0012]数据加载模块，用于根据预设的数据加载方式，将所述元素加载到网页，并在所述新的容器包含动画属性时进行相应的动画渲染。
[0013]本发明网页动画渲染方法及装置，根据网页待加载元素数量与预设数量阈值的大小，当统一加载或编辑时，自动采取合适的动画清染，即在待加载元素数量大于预设数量阈值时不进行动画清染，在待加载元素数量不大于预设数量阈值时，进行相应的动画清染。本发明实现了网页动画渲染的自适应，在保证用户在web应用上完成所有操作的前提下，自动适应并合理的加载相应的动画效果，提高了用户的网页使用体验。
【附图说明】
[0014]图1为本发明方法实施例的流程示意图；
[0015]图2为本发明装置实施例的结构示意图。
【具体实施方式】
[0016]下面结合附图对本发明网页动画渲染方法的【具体实施方式】做详细描述。
[0017]如图1所示，一种网页动画渲染方法，包括步骤:
[0018]S110、检测网页待加载元素数量与预设数量阈值的大小，若所述元素数量大于预设数量阈值且所述元素的容器包含动画属性，进入步骤S120，若所述元素数量大于预设数量阈值且所述元素的容器不包含动画属性，进入步骤S130，若所述元素数量小于等于预设数量阈值，进入步骤S140 ;
[0019]S120、将所述动画属性删除，得到新的容器，进入步骤S150 ;
[0020]S130、将所述容器作为新的容器，进入步骤S150 ；
[0021]S140、将待渲染的动画属性添加到所述元素的容器中，得到新的容器，进入步骤S150 ；
[0022]S150、根据预设的数据加载方式，将所述元素加载到网页，并在所述新的容器包含动画属性时进行相应的动画渲染。
[0023]网页待加载元素数量指的是网页模仿桌面应用动画效果时，网页上需要执行该动画效果的元素数量，待加载元素存储在容器内。衡量要加载的动画效果所能支持的元素的数量，当待加载元素数量大于预设数量阈值时，关闭动画效果，即不进行动画渲染，当待加载元素数量不大于预设数量阈值时，加载相应的动画效果。
[0024]容器上可能标注有历史的动画属性，在待加载元素数量大于预设数量阈值且容器包含动画属性时，需要先将容器上的动画属性进行删除，然后再进行后续的步骤。在待加载元素数量大于预设数量阈值且容器不包含动画属性时，直接进行后续的步骤。在待加载元素数量不大于预设数量阈值时，需要将待渲染的动画属性标注在容器上，然后进行后续的步骤。动画属性也可以标注在容器内的各元素上，但是在后续加载时网页会出现较多内容，所以一般实施过程中不采取这种方式。
[0025]在进行网页元素加载和动画渲染之前，用户可以根据实际需要选择数据加载方式。异步数据加载和直出数据加载是当下主流的网页加载数据的方式，本发明针对这两种方式给出相应的加载方案。异步数据加载指的是打开网页时，在加载了例如页面框架等页面基础内容后，通过网页脚本javascript (直译式脚本语言)向服务器再次发起数据请求，再而将请求返回的数据以这种“异步”的形式加载到网页内。直出数据加载指的是页面打开瞬间，网页的所有数据已经加载完毕，一次性渲染到用户的浏览器上。需要说明的是，本发明并不仅仅限制于这两种加载方式的实施，只要通过设置判断条件确定是否加载动画以及后续实施例中进一步设置条件确定以何种维度加载动画效果的方式均在本发明的保护范围之内。
[0026]确定好是否进行动画渲染后，根据采取的数据加载方式的不同采取不用的处理措施。若采用异步数据加载，将所述元素通过模板工具，例如网页脚本javascript的handlerbars(结合数据+模板可生成相应的html)等，直接加载到网页，并根据最终容器所标注的动画属性，例如摇摆、翻转、淡入淡出、放大缩小等动画效果，通过css3或html5等技术进行动画渲染，若最终容器不包含动画属性，则不进行动画渲染。当采用直出数据加载时，需要先修改所述新的容器的动画属性，例如通过在所述新的容器上添加class样式属性等修改所述新的容器的动画属性，然后根据最终容器所标注的动画属性通过css3或html5等技术进行动画渲染，若最终容器不包含动画属性，则不进行动画渲染。
[0027]为了进一步提高用户的使用体验，在确定进行动画渲染时，根据待加载元素数量，以某种维度加载相应的动画效果，例如，在一个实施例中，在所述新的容器包含动画属性时进行相应的动画渲染的步骤包括:
[0028](I)完全加载:若所述元素数量小于第一预设阈值，例如所述第一预设阈值为100，根据所述新的容器或所述元素容器包含的动画属性直接进行动画渲染，该加载方式保持了完整的动画效果。
[0029](2)不同步加载:若所述元素数量大于等于第一预设阈值并小于等于第二预设阈值，设置每个元素动画渲染的时间，在所述时间到达时，根据所述动画属性对相应的元素进行动画渲染，其中所述时间中至少有一个时间与其它时间不相同，第一预设阈值小于第二预设阈值，第二预设阈值小于预设数量阈值。
[0030]第一预设阈值和第二预设阈值可以根据实际需求设置，例如第一预设阈值设置为100，第二预设阈值设置为1000。每个元素动画清染的时间可以通过网页脚本javascript的定时器设置，设置每个元素动画渲染的时间主要是为了将每个元素动画执行时间差错开，以缓解一瞬间执行所有动画给浏览器带来的压力。作为一个较好实施例，可以将每个元素的动画渲染时间以I毫秒或其它时间差错开，即每个元素动画渲染时间均不相同，间隔I毫秒或其它时间。该加载方式仅是将渲染时间差错开，也保持了完整的动画效果。
[0031](3)不同步加载+弱化动画效果:若所述元素数量大于第二预设阈值，先按照步骤
(2)的方式设置每个元素动画渲染的所述时间，以缓解浏览器压力，接着降低所述动画属性的执行频率，例如将swing (摇摆)一秒钟摇摆5次降低为2次等，弱化动画效果，得到新的动画属性，在所述时间到达时，根据所述新的动画属性对相应的元素进行动画渲染。该加载方式不仅将渲染时间差错开，还弱化了动画效果，从而在不影响性能的情况下提高了用户的网页交互体验。
[0032]本发明方法先根据待加载元素数量确定是否进行动画渲染，在不需要进行动画渲染时，关闭动画效果，以保证用户最基本的功能需求。在进行动画渲染时再根据待加载元素数量确定以何种维度加载相应的动画效果，从而在保证用户在web应用上完成所有操作的前提下，自动适应并合理的加载相应的动画效果，提高用户的网页交互体验。
[0033]为了更好的理解本发明的【具体实施方式】，下面结合一个具体应用实例对本发明的实施过程详细描述。
[0034]假设使用web网页模仿1s(苹果公司的移动操作系统)编辑、删除桌面应用时的swing效果；预设数量阈值设置为3000，第一预设阈值设置为100，第二预设阈值设置为1000 ;采用异步数据加载方式。当200个元素需要进行编辑或操作时，根据本发明方案可知网页可以进行动画渲染，此时将swing —秒钟摇摆5次的动画属性添加到元素容器中。将200个元素加载到网页，由于此时待加载元素数量在第一预设阈值和第二预设阈值之间，网页交互操作会出现卡顿，所以通过网页脚本的定时器将200个元素的动画渲染时