CN110297996B - 基于h5页面的动画显示方法、装置、设备及存储介质 - Google Patents

Abstract

本发明公开一种基于H5页面的动画显示方法、装置、设备及存储介质，包括：获取显示终端的设备信息，以及对待显示应用程序进行显示的H5页面显示信息；根据目标页面调整策略对H5页面显示信息进行调整获取目标显示信息；检测待显示应用程序对应的页面元素中是否含有动画元素，若含有则获取动画元素对应的动画序列；然后根据目标显示信息和动画序列对动画元素进行动画显示，由于是对H5页面显示信息进行调整，以获取到符合当前终端页面的目标显示信息，同时在检测到待显示应用程序页面中存在动画元素时，根据调整好的目标显示信息以及动画元素的动画序列对动画进行显示，既保证了页面元素的显示效果，也能避免动画元素执行时卡顿、丢帧的情况。

Description

基于H5页面的动画显示方法、装置、设备及存储介质

技术领域

本发明涉及软件应用技术领域，尤其涉及一种基于H5页面的动画显示方法、装置、设备及存储介质。

背景技术

随着计算机软件技术的快速发展，各式各样的应用程序(Application，App)已经成为了大众生活中不可或缺的一部分，这些App在日常生活中为大众的衣食住行都提供了便利。由于App的种类繁多，且功能不一，出于网络流量以及设备内存的考虑，用户不可能将所有的功能的App都下载到手机上进行使用，因此很多App服务商都采用将自身提供的App通过HTML5页面(简称H5页面)的方式提供给用户使用，以免去用户下载App耗费网络流量的顾虑。但目前市场类似应用程序功能的H5页面大都是简单的模仿，且模仿效果不佳，并存在打开速度慢，动画执行卡顿，页面在不同机型上显示效果有差异等诸多缺陷。

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

发明内容

本发明的主要目的在于提供了一种基于H5页面的动画显示方法、装置、设备及存储介质，旨在解决现有的基于H5页面开发的应用程序，开启速度慢、动画执行卡顿、页面元素显示效果不佳的技术问题。

为实现上述目的，本发明提供了一种基于H5页面的动画显示方法，所述方法包括以下步骤：

获取显示终端的设备信息，以及对待显示应用程序进行显示的H5页面显示信息；

根据所述设备信息对应的目标页面调整策略对所述H5页面显示信息进行调整，以获取目标显示信息；

检测待显示应用程序对应的页面元素中是否含有动画元素，若含有则获取所述动画元素对应的动画序列；

根据所述目标显示信息和所述动画序列对所述动画元素进行动画显示。

优选地，所述根据所述设备信息对应的目标页面调整策略对所述H5页面显示信息进行调整，以获取目标显示信息的步骤，包括：

从所述设备信息中提取所述显示终端对应的终端标识；

将所述终端标识作为键对象在预先构建的终端标识和页面调整策略的键值对中查找所述键对象对应的目标页面调整策略；

根据所述目标页面调整策略对所述H5页面显示信息进行调整，以获取目标显示信息。

优选地，所述将所述终端标识作为键对象在预先构建的终端标识和页面调整策略的键值对中查找所述键对象对应的目标页面调整策略的步骤之后，所述方法还包括：

在未查找到所述键对象对应的目标页面调整策略时，从所述设备信息中读取所述显示设备对应的显示参数；

根据所述显示参数确定H5页面对应的实际页面宽高比，并基于所述实际页面宽高比对所述H5页面显示信息中的预设页面宽高比进行调整，以获取目标显示信息。

优选地，所述检测待显示应用程序对应的页面元素中是否含有动画元素，若含有则获取所述动画元素对应的动画序列的步骤，包括：

获取待显示应用程序对应的所有页面元素的元素属性，检测所述元素属性中是否存在动画标签；

若存在，则判定所述页面元素中含有动画元素，对所述动画元素进行预加载，并根据加载结果确定所述动画元素对应的动画序列。

优选地，所述对所述动画元素进行预加载，并根据加载结果确定所述动画元素对应的动画序列的步骤，包括：

对所述动画元素进行预加载，调用预设RequestAnimationFrame函数对所述动画元素预加载过程中的执行情况进行监听，以获取加载结果；

读取所述加载结果中包含的动画帧序列，根据所述动画帧序列确定所述动画元素对应的动画序列。

优选地，所述读取所述加载结果中包含的动画帧序列，根据所述动画帧序列确定所述动画元素对应的动画序列的步骤，包括：

读取所述加载结果中包含的动画帧序列以及所述显示终端对应的屏幕刷新率；

根据所述屏幕刷新率确定所述RequestAnimationFrame函数的执行周期；

获取所述动画帧序列中每一帧动画被执行时对应的时间节点，根据所述执行周期以及所述执行时间节点确定每一执行周期对应的动画帧集；

获取各动画帧集对应的执行时段，并根据所述执行时段确定所述动画元素对应的动画序列。

优选地，所述根据所述目标显示信息和所述动画序列对所述动画元素进行动画显示的步骤，包括：

根据所述目标显示信息对所述页面元素进行显示；

调用所述RequestAnimationFrame函数对所述动画元素的显示过程进行监听，以使得所述动画元素按照所述动画序列逐一进行显示。

此外，为实现上述目的，本发明还提出一种基于H5页面的动画显示装置，所述装置包括：

信息获取模块，用于获取显示终端的设备信息，以及对待显示应用程序进行显示的H5页面显示信息；

规则调整模块，用于根据所述设备信息对应的目标页面调整策略对所述H5页面显示信息进行调整，以获取目标显示信息；

动画获取模块，用于检测待显示应用程序对应的页面元素中是否含有动画元素，若含有则获取所述动画元素对应的动画序列；

动画执行模块，用于根据所述目标显示信息和所述动画序列对所述动画元素进行动画显示。

此外，为实现上述目的，本发明还提出一种基于H5页面的动画显示设备，所述设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的基于H5页面的动画显示程序，所述基于H5页面的动画显示程序配置为实现如上文所述的基于H5页面的动画显示方法的步骤。

此外，为实现上述目的，本发明还提出一种存储介质，所述存储介质上存储有基于H5页面的动画显示程序，所述基于H5页面的动画显示程序被处理器执行时实现如上文所述的基于H5页面的动画显示方法的步骤。

本发明通过获取显示终端的设备信息，以及对待显示应用程序进行显示的H5页面显示信息；根据设备信息对应的目标页面调整策略对H5页面显示信息进行调整，以获取目标显示信息；检测待显示应用程序对应的页面元素中是否含有动画元素，若含有则获取动画元素对应的动画序列；然后根据目标显示信息和动画序列对动画元素进行动画显示，由于是根据设备信息对H5页面显示信息进行调整，以获取到符合当前终端页面的目标显示信息，同时在检测到待显示应用程序页面中存在动画元素时，根据调整好的目标显示信息以及动画元素的动画序列对动画进行显示，既保证了页面元素的显示效果，也能避免动画元素执行时卡顿、丢帧的情况。

附图说明

图1是本发明实施例方案涉及的硬件运行环境的基于H5页面的动画显示设备的结构示意图；

图2为本发明基于H5页面的动画显示方法第一实施例的流程示意图；

图3为本发明基于H5页面的动画显示方法第二实施例的流程示意图；

图4为本发明基于H5页面的动画显示方法第三实施例的流程示意图；

图5为本发明基于H5页面的动画显示装置第一实施例的结构框图。

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

具体实施方式

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

参照图1，图1为本发明实施例方案涉及的硬件运行环境的基于H5页面的动画显示设备结构示意图。

如图1所示，该基于H5页面的动画显示设备可以包括：处理器1001，例如中央处理器(Central Processing Unit，CPU)，通信总线1002、用户接口1003，网络接口1004，存储器1005。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如无线保真(WIreless-FIdelity，WI-FI)接口)。存储器1005可以是高速的随机存取存储器(RandomAccess Memory，RAM)存储器，也可以是稳定的非易失性存储器(Non-Volatile Memory，NVM)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。

本领域技术人员可以理解，图1中示出的结构并不构成对基于H5页面的动画显示设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

如图1所示，作为一种存储介质的存储器1005中可以包括操作系统、数据存储模块、网络通信模块、用户接口模块以及基于H5页面的动画显示程序。

在图1所示的基于H5页面的动画显示设备中，网络接口1004主要用于与网络服务器进行数据通信；用户接口1003主要用于与用户进行数据交互；本发明基于H5页面的动画显示设备中的处理器1001、存储器1005可以设置在基于H5页面的动画显示设备中，所述基于H5页面的动画显示设备通过处理器1001调用存储器1005中存储的基于H5页面的动画显示程序，并执行本发明实施例提供的基于H5页面的动画显示方法。

本发明实施例提供了一种基于H5页面的动画显示方法，参照图2，图2为本发明基于H5页面的动画显示方法第一实施例的流程示意图。

本实施例中，所述基于H5页面的动画显示方法包括以下步骤：

步骤S10：获取显示终端的设备信息，以及对待显示应用程序进行显示的H5页面显示信息；

需要说明的是，本实施例方法的执行主体可以是装载在显示终端(例如智能手机、平板电脑、个人电脑)上的浏览器客户端(以下简称浏览器)。所述设备信息可以是显示终端的设备属性信息或参数，例如操作系统类型(IOS或Android)、屏幕分辨率、终端标识(如硬件识别号、国际移动设备识别码)等。所述H5页面显示信息，即用于对应用程序进行应用页面显示的显示标准参数，例如显示区域的宽高比、页面宽高比，字体格式、字体大小等。

在具体实现中，浏览器在接收到用户输入的应用程序开启指令时，响应于该开启指令获取待显示应用程序所在显示终端的设备信息，以及对所述待显示应用程序进行显示的H5页面的显示信息。

步骤S20：根据所述设备信息对应的目标页面调整策略对所述H5页面显示信息进行调整，以获取目标显示信息；

应理解的是，不同类型的显示终端由于机型的不同，对应的设备硬件参数或属性也不相同。若浏览器在将App对应的应用页面直接加载在H5页面，而不根据显示终端的设备属性进行适应性调整，将会导致通过H5页面展示出的页面出现卡顿、不流畅甚至显示不对称的情况。

为了避免上述情况，本实施例中浏览器可将获取到的设备信息和H5页面显示信息进行比较，获取两者之间存在差异的显示参数以确定对应的目标页面调整策略，然后根据所述对应的目标页面调整策略对所述H5页面显示信息中的显示参数进行调整，以获取适配当前H5页面的目标显示信息。例如，应用程序H5页面的显示参数中，研发人员可能给页面的html和body增加了height:100％，而这一参数设定将会导致IOS上页面滑动的卡顿问题，而这类问题对应的目标页面调整策略配置可以是通过将body和html的height:100％去除掉，又或是在滚动的canvas容器中增加：-webkit-overflow-scrolling:touch或者给body增加：body{overflow-x:hidden}，进而克服上述缺陷。

步骤S30：检测待显示应用程序对应的页面元素中是否含有动画元素，若含有则获取所述动画元素对应的动画序列；

应理解的是，大多数的应用程序页面元素中都会内置动画元素，以提高用户使用感。本实施例中，浏览器可先检测待显示应用程序对应的页面元素中是否含有动画元素，若含有则获取所述动画元素对应的动画序列，然后根据所述动画序列来执行动画元素，以避免所述动画元素被执行过程中出现卡顿、丢帧的情况。

具体的，浏览器可获取待显示应用程序对应的所有页面元素的元素属性，检测所述元素属性中是否存在动画标签(例如video标签、flash标签、gif标签)；若存在，则判定所述页面元素中含有动画元素，对所述动画元素进行预加载，并根据加载结果确定所述动画元素对应的动画序列。

应理解的是，所谓动画其实是由一帧一帧的图片拼接而成，这些图片在被连续播放时即形成了动画效果。在JS(JavaScript)语言中，通过给image对象的源文件(src)属性赋值一个图片的统一资源定位符(URL)，就可以启动图片的加载。

进一步地，本方案中为了能够实现对动画元素动画序列的准确获取，浏览器可先任意选取一个canvas容器，对所述动画元素进行预加载，并通过调用预设RequestAnimationFrame函数对所述动画元素预加载过程中的执行情况进行监听，以获取加载结果；然后再读取所述加载结果中包含的动画帧序列，根据所述动画帧序列确定所述动画元素对应的动画序列。其中，所述预加载可以是将动画元素中的每一帧图片按动画执行顺序一张一张的加载到选取的canvas容器中。

步骤S40：根据所述目标显示信息和所述动画序列对所述动画元素进行动画显示。

需要说明的是，通常情况下H5页面中需要展示的动画元素可能有多个(如JS动画、CSS动画)，所述JS动画，即JavaScript动画，JavaScript动画可以在动画播放过程中对动画进行控制，如“开始、暂停、回放、终止、取消”等操作都可实现，但其缺点在于JavaScript在浏览器的主线程中运行，而当主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等任务时，将会对动画的执行过程形成干扰从而导致线程可能出现阻塞，造成丢帧、动画卡顿的情况。同样的，CSS(Cascading Style Sheets，指层叠样式表)动画的优点在于浏览器可以对动画进行优化，但其缺点在于CSS动画只能暂停，不能在动画中寻找一个特定的时间点，不能在半路反转动画，也不能变换时间尺度，以及在特定的位置添加回调函数或是绑定回放事件，且无进度报告。

为了克服上述缺陷，本实施例中浏览器在对H5页面显示信息进行适应性调整获取到所述目标显示信息后，即可根据所述目标显示信息对待显示应用程序应用页面中的页面元素进行显示，同时为保证动画元素的执行效果，本实施例浏览器还将调用RequestAnimationFrame函数对所述动画元素的显示过程进行监听，以使得所述动画元素按照事先获取到的动画序列逐一进行显示，防止动画画面卡顿、丢帧的情况发生。

本实施例通过获取显示终端的设备信息，以及对待显示应用程序进行显示的H5页面显示信息；根据设备信息对应的目标页面调整策略对H5页面显示信息进行调整，以获取目标显示信息；检测待显示应用程序对应的页面元素中是否含有动画元素，若含有则获取动画元素对应的动画序列；然后根据目标显示信息和动画序列对动画元素进行动画显示，由于是根据设备信息对H5页面显示信息进行调整，以获取到符合当前终端页面的目标显示信息，同时在检测到待显示应用程序页面中存在动画元素时，根据调整好的目标显示信息以及动画元素的动画序列对动画进行显示，既保证了页面元素的显示效果，也能避免动画元素执行时卡顿、丢帧的情况。

参考图3，图3为本发明基于H5页面的动画显示方法第二实施例的流程示意图。

基于上述第一实施例，在本实施例中，所述步骤S20包括：

步骤S201：从所述设备信息中提取所述显示终端对应的终端标识；

应理解的是，所述终端标识可以是能够表征终端设备唯一性的字符，例如设备硬件识别码、出厂序列号等，当然也可以是设备型号。

需要说明的是，由于显示终端的机型不同，它们各自对应的显示参数也不同，为提高应用页面的显示效率，研发人员可预先为不同设备的不同机型(例如华为-12345、小米-12345、iPhone-12345等)配置相应的H5页面的页面调整策略，然后建立一个终端标识和页面调整策略之间的映射关系，以使得浏览器在从设备信息中提取到显示终端对应的终端标识后，根据该映射关系迅速的获取对应的页面调整策略。

步骤S202：将所述终端标识作为键对象在预先构建的终端标识和页面调整策略的键值对中查找所述键对象对应的目标页面调整策略；

需要说明的是，考虑到键值对便于维护，且易于研发人员修改配置，本实施例中，所述映射关系优选通过键值对的方式来实现，例如“key＝value”，其中“key”即键对象，可以是所述终端标识；“value”即值对象，则可以是所述终端标识对应的页面调整策略。

在具体实现中，浏览器可将获取到的所述终端标识作为键对象在预先构建的终端标识和页面调整策略的键值对中查找所述键对象对应的目标页面调整策略，已实现对目标页面调整策略的快速查找。

步骤S203：根据所述目标页面调整策略对所述H5页面显示信息进行调整，以获取目标显示信息。

在具体实现中，浏览器在获取到所述目标页面调整策略后，即可根据目标页面调整策略对H5页面显示信息进行调整，以获取目标显示信息。例如目标页面调整策略中，显示页面的实际页面宽高比是2:3，而H5页面显示信息中的预设页面宽高比是2.5:3，此时浏览器则可以将所述预设页面宽高比的数值修改为所述实际页面宽高比对应的数值，已完成信息调整。

步骤S204：在未查找到所述键对象对应的目标页面调整策略时，从所述设备信息中读取所述显示设备对应的显示参数；

应理解的是，若浏览器在预先构建的键值对中未查找到键对象对应的目标页面调整策略时，表明研发人员事先可能未为该显示终端配置相应的页面调整策略，此时浏览器则可从所述设备信息中读取所述显示设备对应的显示参数，然后根据读取到的显示参数对H5页面显示信息进行即时调整。

步骤S205：根据所述显示参数确定H5页面对应的实际页面宽高比，并基于所述实际页面宽高比对所述H5页面显示信息中的预设页面宽高比进行调整，以获取目标显示信息。

在具体实现中，浏览器在获取到显示设备对应的显示参数后，即可根据显示参数中的数据确定当前H5页面对应的实际页面宽高比，然后基于所述实际页面宽高比对所述H5页面显示信息中的预设页面宽高比进行调整。

当然，上述页面宽高比只是本实施例H5页面显示信息中较为重要的参数之一，本实施例中浏览器还可以根据所述显示参数对H5页面对应的其它页面元素，例如字体格式、字体大小进行适应性调整，其调整原理与上述页面宽高比的调整方式类型，此处不再赘述。

本实施例通过从设备信息中提取显示终端对应的终端标识；将终端标识作为键对象在预先构建的终端标识和页面调整策略的键值对中查找键对象对应的目标页面调整策略；根据目标页面调整策略对H5页面显示信息进行调整，以获取目标显示信息；在未查找到键对象对应的目标页面调整策略时，从设备信息中读取显示设备对应的显示参数；根据显示参数确定H5页面对应的实际页面宽高比，并基于实际页面宽高比对H5页面显示信息中的预设页面宽高比进行调整，以获取目标显示信息，从而能够实现对目标显示信息的顺利获取，保证页面元素的显示效果。

参考图4，图4为本发明基于H5页面的动画显示方法第三实施例的流程示意图。

基于上述各实施例，在本实施例中所述读取所述加载结果中包含的动画帧序列，根据所述动画帧序列确定所述动画元素对应的动画序列的步骤，包括：

步骤S301：读取所述加载结果中包含的动画帧序列以及所述显示终端对应的屏幕刷新率；

应理解的是，帧率(Frame rate)是以帧为单位的图像连续出现在显示器上的频率(速率)，以Hz(赫兹)为单位。而屏幕刷新率也叫屏幕刷新频率，比如120Hz的高刷新率显示屏，就是指显示器的物理刷新速度上限为1秒钟120张，刷新频率越低，图像闪烁、停顿、和抖动的就越厉害，眼镜疲劳得越快；刷新率越高，所显示的图像(画面)稳定性就越好。

通常情况下，显示终端的屏幕刷新率都默认为60Hz，为保证画面流畅，这类显示终端中页面显示的回调函数需要每16.7ms就被执行一次，而实际情况下并非所有的显示终端对应的屏幕刷新率都为60Hz，若不考虑显示终端屏幕刷新率的差异，仍旧按照16.7ms的时间周期来执行回调函数，就可能造成动画效果卡顿、丢帧的情况，影响用户体验。

考虑到上述情形，本实施例中浏览器在读取到加载结果中包含的动画帧序列后，还将获取显示终端对应的屏幕刷新率从而确定回调函数被执行时的时间周期。

步骤S302：根据所述屏幕刷新率确定所述RequestAnimationFrame函数的执行周期；

应理解的是，通常情况下RequestAnimationFrame函数可用来决定回调函数的执行时机。例如，若屏幕刷新率是60Hz，那么回调函数就每16.7ms被执行一次，若屏幕果刷新率是75Hz，那么回调函数被执行时的时间周期就为1000/75＝13.3ms。换言之，RequestAnimationFrame函数能够使得回调函数执行的步调跟着系统的刷新步调一致，从而保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。

在具体实现中，浏览器可根据获取到的屏幕刷新率确定所述RequestAnimationFrame函数执行回调函数时的执行周期。其中，所述执行周期＝1000/屏幕刷新率。

步骤S303：获取所述动画帧序列中每一帧动画被执行时对应的时间节点，根据所述执行周期以及所述执行时间节点确定每一执行周期对应的动画帧集；

应理解的是，所述动画帧序列，即每一帧动画被执行时对应的执行顺序。在获取到一段动画后，浏览器即可根据这段动画的总时长来分别确定每一帧动画被执行时对应的时间节点，例如动画a包括三帧图片“图片1、图片2和图片3”，且动画a的总时长为3秒钟，若帧率为1Hz，则执行周期为1000/1＝1000ms＝1秒，那么“图片1、图片2和图片3”被执行时对应的时间节点分别为“00:00:01、00:00:02和00:00:03”。

进一步地，浏览器在获取到动画帧序列中每一帧动画被执行时对应的时间节点后，即可根据当前确定的执行周期以及所述执行时间节点确定每一执行周期对应的动画帧集。例如，浏览器当前确定出的执行周期为3秒，则“图片1、图片2和图片3”将在同一执行周期内被执行，即所述动画帧集包括图片1、图片2和图片3”三个集合元素。又例如，动画帧序列b中包含图片1～48，在屏幕刷新率为60Hz时，动画帧序列b每一执行周期(16.7ms)对应的动画帧集为四个：图片0～12、图片13～24、图片25～36和图片37～48，当执行周期为13.3ms时，则对应的动画帧集可能就减少为三个：图片0～16、图片16～32和图片33～48。

步骤S304：获取各动画帧集对应的执行时段，并根据所述执行时段确定所述动画元素对应的动画序列。

在具体实现中，在获取到每一执行周期对应的动画帧集后，即可根据动画的总时长来确定各动画帧集对应的执行时段，然后根据所述执行时段确定所述动画元素对应的动画序列。

进一步地，为保证流畅的动画效果，本实施例中浏览器也可调用RequestAnimationFrame函数使得动画元素中包含的JS动画和CSS动画同步执行，即将能够合并的动画动作合并在同一渲染周期内进行画面渲染并显示。

进一步地，考虑到现有的H5页面在模拟App的产品页面时，用户无法通过在显示屏上左右滑动来实现页面切换，因此本实施例也可通过使用Vue插件中的transition&组件来实现路由类Tab左右滑动切换的效果。具体的，可通过transition&组件给页面元素加上v-enter，v-enter-active两个类(class)，当页面切换到下一帧时，删掉v-enter这个class.在过渡结束之后，再删掉v-enter-active，从而实现页面的左右滑动切换，且无卡顿现象。

本实施例读取加载结果中包含的动画帧序列以及显示终端对应的屏幕刷新率；根据屏幕刷新率确定RequestAnimationFrame函数的执行周期；获取动画帧序列中每一帧动画被执行时对应的时间节点，根据执行周期以及执行时间节点确定每一执行周期对应的动画帧集；获取各动画帧集对应的执行时段，并根据执行时段确定动画元素对应的动画序列，有效的避免了动画元素被执行时卡顿、丢帧的情况，提高了用户体验。

此外，本发明实施例还提出一种存储介质，所述存储介质上存储有基于H5页面的动画显示程序，所述基于H5页面的动画显示程序被处理器执行时实现如上文所述的基于H5页面的动画显示方法的步骤。

参照图5，图5为本发明基于H5页面的动画显示装置第一实施例的结构框图。

如图5所示，本发明实施例提出的基于H5页面的动画显示装置包括：

信息获取模块501，用于获取显示终端的设备信息，以及对待显示应用程序进行显示的H5页面显示信息；

规则调整模块502，用于根据所述设备信息对应的目标页面调整策略对所述H5页面显示信息进行调整，以获取目标显示信息；

动画获取模块503，用于检测待显示应用程序对应的页面元素中是否含有动画元素，若含有则获取所述动画元素对应的动画序列；

动画执行模块504，用于根据所述目标显示信息和所述动画序列对所述动画元素进行动画显示。

本实施例通过获取显示终端的设备信息，以及对待显示应用程序进行显示的H5页面显示信息；根据设备信息对应的目标页面调整策略对H5页面显示信息进行调整，以获取目标显示信息；检测待显示应用程序对应的页面元素中是否含有动画元素，若含有则获取动画元素对应的动画序列；然后根据目标显示信息和动画序列对动画元素进行动画显示，由于是根据设备信息对H5页面显示信息进行调整，以获取到符合当前终端页面的目标显示信息，同时在检测到待显示应用程序页面中存在动画元素时，根据调整好的目标显示信息以及动画元素的动画序列对动画进行显示，既保证了页面元素的显示效果，也能避免动画元素执行时卡顿、丢帧的情况。

基于本发明上述基于H5页面的动画显示装置第一实施例，提出本发明基于H5页面的动画显示装置的第二实施例。

在本实施例中，所述规则调整模块502，还用于从所述设备信息中提取所述显示终端对应的终端标识；将所述终端标识作为键对象在预先构建的终端标识和页面调整策略的键值对中查找所述键对象对应的目标页面调整策略；根据所述目标页面调整策略对所述H5页面显示信息进行调整，以获取目标显示信息。

进一步地，所述规则调整模块502，还用于在未查找到所述键对象对应的目标页面调整策略时，从所述设备信息中读取所述显示设备对应的显示参数；根据所述显示参数确定H5页面对应的实际页面宽高比，并基于所述实际页面宽高比对所述H5页面显示信息中的预设页面宽高比进行调整，以获取目标显示信息。

进一步地，所述动画获取模块503，用于获取待显示应用程序对应的所有页面元素的元素属性，检测所述元素属性中是否存在动画标签；若存在，则判定所述页面元素中含有动画元素，对所述动画元素进行预加载，并根据加载结果确定所述动画元素对应的动画序列。

进一步地，所述动画获取模块503，用于对所述动画元素进行预加载，调用预设RequestAnimationFrame函数对所述动画元素预加载过程中的执行情况进行监听，以获取加载结果；读取所述加载结果中包含的动画帧序列，根据所述动画帧序列确定所述动画元素对应的动画序列。

进一步地，所述动画获取模块503，用于读取所述加载结果中包含的动画帧序列以及所述显示终端对应的屏幕刷新率；根据所述屏幕刷新率确定所述RequestAnimationFrame函数的执行周期；获取所述动画帧序列中每一帧动画被执行时对应的时间节点，根据所述执行周期以及所述执行时间节点确定每一执行周期对应的动画帧集；获取各动画帧集对应的执行时段，并根据所述执行时段确定所述动画元素对应的动画序列。

进一步地，所述动画执行模块504，用于根据所述目标显示信息对所述页面元素进行显示；调用所述RequestAnimationFrame函数对所述动画元素的显示过程进行监听，以使得所述动画元素按照所述动画序列逐一进行显示。

本发明基于H5页面的动画显示装置的其他实施例或具体实现方式可参照上述各方法实施例，此处不再赘述。

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

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

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

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

Claims (6)

1.一种基于H5页面的动画显示方法，其特征在于，所述方法包括：

获取显示终端的设备信息，以及对待显示应用程序进行显示的H5页面显示信息，所述设备信息包括：操作系统类型、屏幕分辨率和终端标识，所述H5页面显示信息包括：显示区域的宽高比、页面宽高比、页面字体格式和页面字体大小；

根据所述设备信息对应的目标页面调整策略对所述H5页面显示信息进行调整，以获取目标显示信息；

检测待显示应用程序对应的页面元素中是否含有动画元素，若含有则获取所述动画元素对应的动画序列，所述动画序列是所述动画元素的显示执行顺序；

根据所述目标显示信息和所述动画序列对所述动画元素进行动画显示；

其中，所述检测待显示应用程序对应的页面元素中是否含有动画元素，若含有则获取所述动画元素对应的动画序列的步骤，包括：

获取待显示应用程序对应的所有页面元素的元素属性，检测所述元素属性中是否存在动画标签；

若存在，则判定所述页面元素中含有动画元素，对所述动画元素进行预加载，调用预设RequestAnimationFrame函数对所述动画元素预加载过程中的执行情况进行监听，以获取加载结果；

读取所述加载结果中包含的动画帧序列，根据所述动画帧序列确定所述动画元素对应的动画序列；

所述根据所述设备信息对应的目标页面调整策略对所述H5页面显示信息进行调整，以获取目标显示信息的步骤，包括：

从所述设备信息中提取所述显示终端对应的终端标识；

将所述终端标识作为键对象在预先构建的终端标识和页面调整策略的键值对中查找所述键对象对应的目标页面调整策略；

根据所述目标页面调整策略对所述H5页面显示信息进行调整，以获取目标显示信息；

所述将所述终端标识作为键对象在预先构建的终端标识和页面调整策略的键值对中查找所述键对象对应的目标页面调整策略的步骤之后，所述方法还包括：

在未查找到所述键对象对应的目标页面调整策略时，从所述设备信息中读取显示设备对应的显示参数；

根据所述显示参数确定H5页面对应的实际页面宽高比，并基于所述实际页面宽高比对所述H5页面显示信息中的预设页面宽高比进行调整，以获取目标显示信息；

或根据所述显示参数确定H5页面对应的实际页面字体参数，并基于所述实际页面字体参数对所述H5页面显示信息中的预设页面字体参数进行调整，以获取目标显示信息，所述页面字体参数包括：页面字体格式或字体大小。

2.如权利要求1所述的方法，其特征在于，所述读取所述加载结果中包含的动画帧序列，根据所述动画帧序列确定所述动画元素对应的动画序列的步骤，包括：

读取所述加载结果中包含的动画帧序列以及所述显示终端对应的屏幕刷新率；

根据所述屏幕刷新率确定所述RequestAnimationFrame函数的执行周期；

获取所述动画帧序列中每一帧动画被执行时对应的时间节点，根据所述执行周期以及执行时间节点确定每一执行周期对应的动画帧集；

获取各动画帧集对应的执行时段，并根据所述执行时段确定所述动画元素对应的动画序列。

3.如权利要求1所述的方法，其特征在于，所述根据所述目标显示信息和所述动画序列对所述动画元素进行动画显示的步骤，包括：

根据所述目标显示信息对所述页面元素进行显示；

调用所述RequestAnimationFrame函数对所述动画元素的显示过程进行监听，以使得所述动画元素按照所述动画序列逐一进行显示。

4.一种基于H5页面的动画显示装置，其特征在于，所述装置包括：

信息获取模块，用于获取显示终端的设备信息，以及对待显示应用程序进行显示的H5页面显示信息；

规则调整模块，用于根据所述设备信息对应的目标页面调整策略对所述H5页面显示信息进行调整，以获取目标显示信息，所述设备信息包括：操作系统类型、屏幕分辨率和终端标识，所述H5页面显示信息包括：显示区域的宽高比、页面宽高比、页面字体格式和页面字体大小；

动画获取模块，用于检测待显示应用程序对应的页面元素中是否含有动画元素，若含有则获取所述动画元素对应的动画序列，所述动画序列是所述动画元素的显示执行顺序；

动画执行模块，用于根据所述目标显示信息和所述动画序列对所述动画元素进行动画显示；

其中，所述动画获取模块，还用于获取待显示应用程序对应的所有页面元素的元素属性，检测所述元素属性中是否存在动画标签；若存在，则判定所述页面元素中含有动画元素，对所述动画元素进行预加载，调用预设RequestAnimationFrame函数对所述动画元素预加载过程中的执行情况进行监听，以获取加载结果；读取所述加载结果中包含的动画帧序列，根据所述动画帧序列确定所述动画元素对应的动画序列；

所述规则调整模块，还用于从所述设备信息中提取所述显示终端对应的终端标识；将所述终端标识作为键对象在预先构建的终端标识和页面调整策略的键值对中查找所述键对象对应的目标页面调整策略；根据所述目标页面调整策略对所述H5页面显示信息进行调整，以获取目标显示信息；

所述规则调整模块，还用于在未查找到所述键对象对应的目标页面调整策略时，从所述设备信息中读取显示设备对应的显示参数；根据所述显示参数确定H5页面对应的实际页面宽高比，并基于所述实际页面宽高比对所述H5页面显示信息中的预设页面宽高比进行调整，以获取目标显示信息；或根据所述显示参数确定H5页面对应的实际页面字体参数，并基于所述实际页面字体参数对所述H5页面显示信息中的预设页面字体参数进行调整，以获取目标显示信息，所述页面字体参数包括：页面字体格式或字体大小。

5.一种基于H5页面的动画显示设备，其特征在于，所述设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的基于H5页面的动画显示程序，所述基于H5页面的动画显示程序配置为实现如权利要求1至3中任一项所述的基于H5页面的动画显示方法的步骤。

6.一种存储介质，其特征在于，所述存储介质上存储有基于H5页面的动画显示程序，所述基于H5页面的动画显示程序被处理器执行时实现如权利要求1至3任一项所述的基于H5页面的动画显示方法的步骤。