CN107862729B - 层级动画生成方法、终端及可读存储介质 - Google Patents

Abstract

本发明公开了一种层级动画生成方法、终端及可读存储介质，所述层级动画生成方法包括以下步骤：获取离线H5页面中各个文档对象的层级属性值；根据所述层级属性值生成所述离线H5页面的层级分布；根据所述层级分布中每一层级的文档对象的位置信息计算每一层级的重叠区域；根据所述重叠区域和所述层级分布生成所述离线H5页面的层级动画。本发明通过生成离线H5页面的层级动画，便于测试开发人员在测试时，查看层级动画，可以直观的排查因层级导致的问题，提高测试开发效率。

Description

层级动画生成方法、终端及可读存储介质

技术领域

本发明涉及测试的技术领域，尤其涉及一种层级动画生成方法、终端及可读存储介质。

背景技术

离线H5页面具有多个层级，通过在每个区域设置不同的层级，可以渲染出各种华丽的离线H5页面。为实现离线H5页面的各种渲染效果，需要将有的层级区域设置为无边框或对有的层级区域做透明化处理。

测试开发人员对离线H5页面进行调试和测试，排查离线H5页面问题，如测试开发人员点击按钮，却没有响应(该按钮上面覆盖有透明化的层级区域)，此时，测试开发人员无法查看离线H5页面的层级分布情况，直观的从离线H5页面中获取问题，不便于测试开发人员排查问题，测试开发效率较低。

上述内容仅用于辅助理解本发明的技术方案，并不代表承认上述内容是现有技术。

发明内容

本发明的主要目的在于提供一种层级动画生成方法、终端及可读存储介质，旨在解决不便于测试开发人员排查问题，测试开发效率较低的技术问题。

为实现上述目的，本发明提供一种层级动画生成方法，所述层级动画生成方法包括以下步骤：

获取离线H5页面中各个文档对象的层级属性值；

根据所述层级属性值生成所述离线H5页面的层级分布；

根据所述层级分布中每一层级的文档对象的位置信息计算每一层级的重叠区域；

根据所述重叠区域和所述层级分布生成所述离线H5页面的层级动画。

可选地，所述根据所述层级属性值生成所述离线H5页面的层级分布的步骤包括：

将所述层级属性值相同的文档对象排列在同一层，以生成层级属性层；

按照所述层级属性值的大小顺序依次对所述层级属性层进行排列，以生成所述离线H5页面的层级分布。

可选地，所述根据所述层级分布中每一层级的文档对象的位置信息计算每一层级的重叠区域的步骤包括：

获取所述层级分布中每一层级的文档对象的位置信息；

计算所述文档对象所在区域的大小，以获取文档对象区域；

根据所述文档对象区域和所述位置信息计算每一层级的重叠区域。

可选地，所述根据所述重叠区域和所述层级分布生成所述离线H5页面的层级动画的步骤之后，所述层级动画生成方法还包括：

接收外部触发的层级动画显示指令，并根据所述显示指令显示所述层级动画。

可选地，所述接收外部触发的层级动画显示指令，并根据所述显示指令显示所述层级动画的步骤之后，所述层级动画生成方法还包括：

接收外部触发的层级动画标注指令，并根据所述层级动画标注指令对所述层级动画进行标注。

可选地，所述根据所述重叠区域和所述层级分布生成所述离线H5页面的层级动画的步骤之后，所述层级动画生成方法还包括：

记录每一层级中的重叠区域数量，并判断所述重叠区域数量是否超过预设阈值；

当所述重叠区域数量超过预设阈值时，控制移动终端输出提醒信息。

可选地，所述根据所述重叠区域和所述层级分布生成所述离线H5页面的层级动画的步骤之后，所述层级动画生成方法还包括：

将所述层级动画上传至服务器，以供所述服务器存储所述层级动画。

可选地，所述服务器在接收到外部触发的层级动画显示请求时，获取所述层级动画显示请求中的层级动画显示方式，并根据所述显示方式显示层级动画。

此外，为实现上述目的，本发明还提供一种层级动画生成终端，所述层级动画生成终端包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的层级动画生成程序，所述层级动画生成程序被所述处理器执行时实现以下步骤：

获取离线H5页面中各个文档对象的层级属性值；

根据所述层级属性值生成所述离线H5页面的层级分布；

根据所述层级分布中每一层级的文档对象的位置信息计算每一层级的重叠区域；

根据所述重叠区域和所述层级分布生成所述离线H5页面的层级动画。

本发明还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有层级动画生成程序，所述层级动画生成程序被处理器执行时实现以下步骤：

获取离线H5页面中各个文档对象的层级属性值；

根据所述层级属性值生成所述离线H5页面的层级分布；

根据所述层级分布中每一层级的文档对象的位置信息计算每一层级的重叠区域；

根据所述重叠区域和所述层级分布生成所述离线H5页面的层级动画。

本发明获取离线H5页面中各个文档对象的层级属性值，并根据该层级属性值生成该离线H5页面的层级分布，然后根据该层级分布中每一层级的文档对象的位置信息计算每一层级的重叠区域，最后根据该重叠区域和该层级分布生成该离线H5页面的层级动画，本方案通过生成离线H5页面的层级动画，便于测试开发人员在测试时，查看层级动画，可以直观的排查因层级导致的问题，提高测试开发效率。

附图说明

图1是本发明实施例方案涉及的硬件运行环境的终端结构示意图；

图2为本发明层级动画生成方法第一实施例的流程示意图；

图3为图2中所述根据所述层级属性值生成所述离线H5页面的层级分布步骤的细化流程示意图；

图4为图2中所述根据所述层级分布中每一层级的文档对象的位置信息计算每一层级的重叠区域步骤的细化流程示意图；

图5为本发明层级动画生成方法第二实施例的流程示意图；

图6为本发明层级动画生成方法第三实施例的流程示意图；

图7为本发明层级动画生成方法第四实施例的流程示意图；

图8为本发明层级动画生成方法第五实施例的流程示意图。

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

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明实施例的主要解决方案是：获取离线H5页面中各个文档对象的层级属性值，并根据该层级属性值生成该离线H5页面的层级分布，然后根据该层级分布中每一层级的文档对象的位置信息计算每一层级的重叠区域，最后根据该重叠区域和该层级分布生成该离线H5页面的层级动画。

由于现有的测试方式，测试开发人员无法查看网页的层级分布情况，无法直观的从网页中获取问题，不便于测试开发人员排查问题，测试开发效率较低。

本发明提供一种解决方案，本方案通过生成离线H5页面的层级动画，便于测试开发人员在测试时，查看层级动画，可以直观的排查因层级导致的问题，提高测试开发效率。

如图1所示，图1是本发明实施例方案涉及的硬件运行环境的终端结构示意图。

本发明实施例终端可以是PC，也可以是智能手机、平板电脑、便携计算机等具有显示功能的可移动式终端设备。

如图1所示，该终端可以包括：处理器1001，例如CPU，通信总线1002，用户接口1003，网络接口1004，存储器1005。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard)，可选的用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。存储器1005可以是高速RAM存储器，也可以是稳定的存储器(non-volatile memory)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。

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

本领域技术人员可以理解，图1中示出的终端结构并不构成对终端的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

如图1所示，作为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及层级动画生成程序。

在图1所示的终端中，网络接口1004主要用于连接后台服务器，与后台服务器进行数据通信；用户接口1003主要用于连接客户端(用户端)，与客户端进行数据通信；而处理器1001可以用于调用存储器1005中存储的层级动画生成程序，并执行以下步骤：

获取离线H5页面中各个文档对象的层级属性值；

根据所述层级属性值生成所述离线H5页面的层级分布；

根据所述层级分布中每一层级的文档对象的位置信息计算每一层级的重叠区域；

根据所述重叠区域和所述层级分布生成所述离线H5页面的层级动画。

进一步地，所述根据所述层级属性值生成所述离线H5页面的层级分布的步骤包括：

将所述层级属性值相同的文档对象排列在同一层，以生成层级属性层；

按照所述层级属性值的大小顺序依次对所述层级属性层进行排列，以生成所述离线H5页面的层级分布。

进一步地，所述根据所述层级分布中每一层级的文档对象的位置信息计算每一层级的重叠区域的步骤包括：

获取所述层级分布中每一层级的文档对象的位置信息；

计算所述文档对象所在区域的大小，以获取文档对象区域；

根据所述文档对象区域和所述位置信息计算每一层级的重叠区域。

进一步地，处理器1001可以调用存储器1005中存储的层级动画生成程序，还执行以下步骤：

接收外部触发的层级动画显示指令，并根据所述显示指令显示所述层级动画。

进一步地，处理器1001可以调用存储器1005中存储的层级动画生成程序，还执行以下步骤：

接收外部触发的层级动画标注指令，并根据所述层级动画标注指令对所述层级动画进行标注。

进一步地，处理器1001可以调用存储器1005中存储的层级动画生成程序，还执行以下步骤：

记录每一层级中的重叠区域数量，并判断所述重叠区域数量是否超过预设阈值；

当所述重叠区域数量超过预设阈值时，控制移动终端输出提醒信息。

进一步地，处理器1001可以调用存储器1005中存储的层级动画生成程序，还执行以下步骤：

将所述层级动画上传至服务器，以供所述服务器存储所述层级动画。

进一步地，所述服务器在接收到外部触发的层级动画显示请求时，获取所述层级动画显示请求中的层级动画显示方式，并根据所述显示方式显示层级动画。

本发明层级动画生成终端的具体实施例与下述层级动画生成方法的各具体实施例基本相同，在此不作赘述。

本发明提供一种层级动画生成方法。

参照图2，图2为本发明层级动画生成方法第一实施例的流程示意图。

在本实施例中，该层级动画生成方法包括：

步骤S101，获取离线H5页面中各个文档对象的层级属性值；

该层级动画生成方法应用于移动终端，该移动终端包括智能手机和平板电脑等。该文档对象模型(Document Object Model，简称DOM)是W3C(World Wide Web Consortium，万维网联盟)组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口，它可以动态地访问程序和脚本，更新其内容和结构等，文档对象模型是一种基于树的应用程序接口文档，它要求在处理过程中整个文档都表示在存储器中。文档对象模型分包括HTML文档对象模型和XML文档对象模型两种，HTML文档对象模型为访问HTML文档的标准方法，并将HTML文档呈现为带有元素、属性和文本的树结构(节点树)；XML文档对象模型为访问XML文档的标准方法，并将XML文档呈现为带有元素、属性和文本的树结构(节点树)。在文档对象模型中包括一个根节点，其它所有节点为该根节点的后代。

该层级属性值为z-index值，即表示一个元素在叠加顺序上下立体关系，该层级属性值可以为正数，也可以为负数，层级属性值较大的对象将叠加在层级属性值较小的对象之上，对于未指定此层级属性值的定位对象，层级属性值为正数的对象会在未指定此层级属性值的定位对象之上，而层级属性值为负数的对象在未指定此层级属性值的定位对象之下。

离线H5页面在初始化时，移动终端中的浏览器将HTML文档对象模型暴露给移动终端，移动终端通过JavaScript语言(或其它编程语言)获取暴露的离线H5页面中各个文档对象的层级属性值，具体为从文档对象树中获取根节点，并获取该根节点的层级属性值，同时从该根节点开始对该文档对象树进行遍历，从而获取该文档对象树中每一节点(文档对象)的层级属性值。

步骤S102，根据所述层级属性值生成所述离线H5页面的层级分布；

该移动终端在获得层级属性值后，根据该层级属性值生成该离线H5页面的层级分布。

具体地，参照图3，图3为图2中所述步骤S102的细化流程示意图，该步骤S102包括：

步骤S1021，将所述层级属性值相同的文档对象排列在同一层，以生成层级属性层；

步骤S1022，按照所述层级属性值的大小顺序依次对所述层级属性层进行排列，以生成所述离线H5页面的层级分布。

该移动终端在获得该离线H5页面中各个文档对象的层级属性值后，统计该层级属性值，将层级属性值相同的文档对象排列在同一层，从而生成层级属性层，然后按照该层级属性值的大小顺序依次对该层级属性层进行排列，以生成该离线H5页面的层级分布。

步骤S103，根据所述层级分布中每一层级的文档对象的位置信息计算每一层级的重叠区域；

该移动终端根据层级属性值生成离线H5页面的层级分布后，根据该层级分布中每一层级的文档对象的位置信息计算每一层级的重叠区域，具体地，该文档对象包括offsetTop和offsetLeft两个属性，该offsetTop和offsetLeft两个属性表示该文档对象的位置信息，该offsetTop表示该文档对象距离显示屏顶部的距离，该offsetLeft表示该文档对象距离显示屏左侧的距离。

具体地，参照图4，图4为图2中所述步骤S103的细化流程示意图，该步骤S103包括：

步骤S1031，获取所述层级分布中每一层级的文档对象的位置信息；

步骤S1032，计算所述文档对象所在区域的大小，以获取文档对象区域；

步骤S1033，根据所述文档对象区域和所述位置信息计算每一层级的重叠区域。

该移动终端获取该层级分布中每一层级的文档对象的位置信息，并获取该每一文档对象所在区域的大小，以获取文档对象区域，然后根据该文档对象区域和该位置信息计算每一层级的重叠区域。该位置信息包括文档对象距离移动终端屏幕顶部的距离和文档对象距离移动终端屏幕左侧的距离，移动终端通过遍历文档对象树中的每一节点，从而获取每一节点(文档对象)的位置信息，该文档对象区域为文档对象的层级区域。在具体实施中，移动终端通过遍历文档对象树中的每一节点，获取层级属性值的同时，获取每一节点的位置信息，并缓存该位置信息，然后在生成层级分布之后，获取缓存的位置信息，进行重叠区域的计算。

步骤S104，根据所述重叠区域和所述层级分布生成所述离线H5页面的层级动画。

移动终端在获得重叠区域和层级分布后，根据该重叠区域和该层级分布生成该离线H5页面的层级动画，具体地，移动终端以不同的颜色填充重叠区域，同时为该层级分布中的每一层级设置填充颜色，且每一层级标记有对应的层级属性值，并对填充后的重叠区域和层级分布进行平面视角处理和侧面视角处理，以生成离线H5页面的层级动画，在播放该层级动画时，该层级动画可以自动的从平面视角切换到侧面视角，同时也可以从侧面视角切换到平面视角，此外，测试人员还可以手动控制平面视角与侧面视角之间的切换，即以滚动旋转的方式来回切换平面视角和侧面视角，层级属性值大的，层级越高，越浮在上层，层级属性值小的，层级越低，越沉在下层。该层级动画包括立体角度和平面角度，立体角度主要用于查看离线H5页面的层级关系，而平面角度主要用于查看离线H5页面中各个文档对象的位置信息和重叠关系。

在本实施例中，本发明获取离线H5页面中各个文档对象的层级属性值，并根据该层级属性值生成该离线H5页面的层级分布，然后根据该层级分布中每一层级的文档对象的位置信息计算每一层级的重叠区域，最后根据该重叠区域和该层级分布生成该离线H5页面的层级动画，本方案通过生成离线H5页面的层级动画，该层级动画显示重叠区域和层级分布，便于测试开发人员在测试时，查看重叠区域和层级分布，可以直观的排查因重叠区域或层级分布导致的问题，提高测试开发效率，例如测试开发人员点击控件按钮，却没有响应，通过查看显示的重叠区域和层级分布，可以发现没有响应的原因是按钮所在的区域覆盖有透明化的层级区域。

进一步的，参照图5，基于上述第一实施例提出本发明层级动画生成方法的第二实施例，与前述实施例的区别在于，该步骤S104之后，该层级动画生成方法还包括：

步骤S105，接收外部触发的层级动画显示指令，并根据所述显示指令显示所述层级动画。

该移动终端在接收到外部触发的层级动画显示指令时，根据该显示指令显示该层级动画，该层级动画显示指令的触发方式包括：用户可通过离线H5页面中显示的层级动画显示按钮触发层级动画显示指令，或者用户长按离线H5页面以触发层级动画显示指令，又或者根据用户长按离线H5页面和长按压力结合以触发层级动画显示指令。该移动终端首先从立体角度播放该层级动画，查看离线H5页面的层级关系，然后从平面角度播放该层级动画查看离线H5页面中各个文档对象的位置信息和重叠关系。

在本实施例中，本发明通过显示层级动画，便于测试开发人员直观的查看因层级引起的问题，提高测试开发效率。

进一步地，参照图6，基于上述第二实施例提出本发明层级动画生成方法的第三实施例，与前述实施例的区别在于，该步骤S105之后，该层级动画生成方法还包括：

步骤S106，接收外部触发的层级动画标注指令，并根据所述层级动画标注指令对所述层级动画进行标注。

该移动终端显示层级动画后，测试开发人员查看该层级动画，发现因层级关系导致的问题时，测试开发人员触发层级动画标注指令，移动终端在接收到外部触发的层级动画标注指令时，根据该标注指令对该层级动画进行标注，实现问题的标注。

在本实施例中，本发明通过对层级动画的标注，便于测试开发人员记录因层级关系导致的问题，提高测试开发效率。

进一步地，参照图7，基于上述第一、第二或第三实施例提出本发明层级动画生成方法的第四实施例，与前述实施例的区别在于，该步骤S104之后，该层级动画生成方法还包括：

步骤S107，记录每一层级中的重叠区域数量，并判断所述重叠区域数量是否超过预设阈值；

步骤S108，当所述重叠区域数量超过预设阈值时，控制移动终端输出提醒信息。

该移动终端在生成层级动画后，记录每一层级中的重叠区域数量，并判断该重叠区域数量是否超过预设阈值，当该重叠区域数量超过预设阈值时，控制移动终端输出提醒信息。在具体实施中，获取每一文档对象的重叠区域数量，当文档对象的重叠区域数量超过预设阈值时，控制移动终端输出提醒信息。

在本实施例中，本发明在层级动画的每一层级中的重叠区域数量超过预设阈值时，控制移动终端输出提醒信息，便于测试开发人员快速知晓因层级关系导致的问题，及时进行处理。

进一步地，参照图8，基于上述第一、第二、第三或第四实施例提出本发明层级动画生成方法的第五实施例，与前述实施例的区别在于，该步骤S104之后，该层级动画生成方法还包括：

步骤S109，将所述层级动画上传至服务器，以供所述服务器存储所述层级动画。

该移动终端在生成层级动画后，将该层级动画和该移动终端的设备标识信息上传至服务器，该服务器接收该层级动画和该设备标识信息，并将该层级动画和该设备标识信息进行关联，然后存储关联后的层级动画。该服务器在接收到外部触发的层级动画显示请求时，获取该层级动画显示请求中的层级动画显示方式，并根据该显示方式显示层级动画，具体地，该层级动画显示方式包括单窗口显示和多窗口显示，单窗口显示为只显示一个层级动画，而多窗口显示为服务器显示多个窗口，每一窗口中显示时间相同，但设备标识信息不同的层级动画，或每一窗口中显示时间不同，但设备标识信息相同的层级动画，再或者每一窗口中显示时间不同，且设备标识信息也不同的层级动画。

在本实施例中，本发明通过将层级动画上传至服务器，使得服务器存储层级动画，便于测试开发人员能够在服务器中查询多个设备中的层级动画，无需测试开发人员逐个获取层级动画，提高测试开发效率。

此外，本发明实施例还提出一种计算机可读存储介质，所述计算机可读存储介质上存储有层级动画生成程序，所述层级动画生成程序被处理器执行时实现以下步骤：

获取离线H5页面中各个文档对象的层级属性值；

根据所述层级属性值生成所述离线H5页面的层级分布；

根据所述层级分布中每一层级的文档对象的位置信息计算每一层级的重叠区域；

根据所述重叠区域和所述层级分布生成所述离线H5页面的层级动画。

进一步地，所述根据所述层级属性值生成所述离线H5页面的层级分布的步骤包括：

将所述层级属性值相同的文档对象排列在同一层，以生成层级属性层；

按照所述层级属性值的大小顺序依次对所述层级属性层进行排列，以生成所述离线H5页面的层级分布。

进一步地，所述根据所述层级分布中每一层级的文档对象的位置信息计算每一层级的重叠区域的步骤包括：

获取所述层级分布中每一层级的文档对象的位置信息；

计算所述文档对象所在区域的大小，以获取文档对象区域；

根据所述文档对象区域和所述位置信息计算每一层级的重叠区域。

进一步地，所述层级动画生成程序被处理器执行时还实现以下步骤：

接收外部触发的层级动画显示指令，并根据所述显示指令显示所述层级动画。

进一步地，所述层级动画生成程序被处理器执行时还实现以下步骤：

接收外部触发的层级动画标注指令，并根据所述层级动画标注指令对所述层级动画进行标注。

进一步地，所述层级动画生成程序被处理器执行时还实现以下步骤：

记录每一层级中的重叠区域数量，并判断所述重叠区域数量是否超过预设阈值；

当所述重叠区域数量超过预设阈值时，控制移动终端输出提醒信息。

进一步地，所述层级动画生成程序被处理器执行时还实现以下步骤：

将所述层级动画上传至服务器，以供所述服务器存储所述层级动画。

进一步地，所述服务器在接收到外部触发的层级动画显示请求时，获取所述层级动画显示请求中的层级动画显示方式，并根据所述显示方式显示层级动画。

本发明计算机可读存储介质的具体实施例与上述层级动画生成方法的各具体实施例基本相同，在此不作赘述。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (9)

1.一种层级动画生成方法，其特征在于，所述层级动画生成方法包括以下步骤：

获取离线H5页面中各个文档对象的层级属性值；

根据所述层级属性值生成所述离线H5页面的层级分布；

根据所述层级分布中每一层级的文档对象的位置信息计算每一层级的重叠区域；

根据所述重叠区域和所述层级分布生成所述离线H5页面的层级动画；

所述根据所述层级属性值生成所述离线H5页面的层级分布的步骤包括：

将所述层级属性值相同的文档对象排列在同一层，以生成层级属性层；

按照所述层级属性值的大小顺序依次对所述层级属性层进行排列，以生成所述离线H5页面的层级分布。

2.如权利要求1所述的层级动画生成方法，其特征在于，所述根据所述层级分布中每一层级的文档对象的位置信息计算每一层级的重叠区域的步骤包括：

获取所述层级分布中每一层级的文档对象的位置信息；

计算所述文档对象所在区域的大小，以获取文档对象区域；

根据所述文档对象区域和所述位置信息计算每一层级的重叠区域。

3.如权利要求1所述的层级动画生成方法，其特征在于，所述根据所述重叠区域和所述层级分布生成所述离线H5页面的层级动画的步骤之后，所述层级动画生成方法还包括：

接收外部触发的层级动画显示指令，并根据所述显示指令显示所述层级动画。

4.如权利要求3所述的层级动画生成方法，其特征在于，所述接收外部触发的层级动画显示指令，并根据所述显示指令显示所述层级动画的步骤之后，所述层级动画生成方法还包括：

接收外部触发的层级动画标注指令，并根据所述层级动画标注指令对所述层级动画进行标注。

5.如权利要求1-4中任一项所述的层级动画生成方法，所述根据所述重叠区域和所述层级分布生成所述离线H5页面的层级动画的步骤之后，所述层级动画生成方法还包括：

记录每一层级中的重叠区域数量，并判断所述重叠区域数量是否超过预设阈值；

当所述重叠区域数量超过预设阈值时，控制移动终端输出提醒信息。

6.如权利要求1-4中任一项所述的层级动画生成方法，其特征在于，所述根据所述重叠区域和所述层级分布生成所述离线H5页面的层级动画的步骤之后，所述层级动画生成方法还包括：

将所述层级动画上传至服务器，以供所述服务器存储所述层级动画。

7.如权利要求6所述的层级动画生成方法，其特征在于，所述服务器在接收到外部触发的层级动画显示请求时，获取所述层级动画显示请求中的层级动画显示方式，并根据所述显示方式显示层级动画。

8.一种层级动画生成终端，其特征在于，所述层级动画生成终端包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的层级动画生成程序，所述层级动画生成程序被所述处理器执行时实现以下步骤：

获取离线H5页面中各个文档对象的层级属性值；

根据所述层级属性值生成所述离线H5页面的层级分布；

根据所述层级分布中每一层级的文档对象的位置信息计算每一层级的重叠区域；

根据所述重叠区域和所述层级分布生成所述离线H5页面的层级动画；

所述根据所述层级属性值生成所述离线H5页面的层级分布的步骤包括：

将所述层级属性值相同的文档对象排列在同一层，以生成层级属性层；

按照所述层级属性值的大小顺序依次对所述层级属性层进行排列，以生成所述离线H5页面的层级分布。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有层级动画生成程序，所述层级动画生成程序被处理器执行时实现以下步骤：

获取离线H5页面中各个文档对象的层级属性值；

根据所述层级属性值生成所述离线H5页面的层级分布；

根据所述层级分布中每一层级的文档对象的位置信息计算每一层级的重叠区域；

根据所述重叠区域和所述层级分布生成所述离线H5页面的层级动画；

所述根据所述层级属性值生成所述离线H5页面的层级分布的步骤包括：

将所述层级属性值相同的文档对象排列在同一层，以生成层级属性层；

按照所述层级属性值的大小顺序依次对所述层级属性层进行排列，以生成所述离线H5页面的层级分布。

Images