CN107451163A - 一种动画显示方法和装置 - Google Patents

Abstract

本申请公开了动画显示方法和装置。所述方法的一具体实施方式包括：接收目标浏览器发送的动画显示请求；对所述动画显示请求进行解析，确定所述动画显示请求所指定的原始动画脚本文件；判断目标浏览器是否支持层叠样式表版本3CSS3；响应于所述目标浏览器支持CSS3，确定所述目标浏览器支持的CSS3代码描述方式，对所述原始动画脚本进行解析，生成新动画脚本；向所述目标浏览器发送所述新动画脚本以供所述目标浏览器根据所述新动画脚本进行动画显示。该实施方式解决了不同浏览器不能根据一份动画脚本文件兼容显示动画的问题。

Description

一种动画显示方法和装置

技术领域

本申请涉及计算机技术领域，具体涉及互联网技术领域，尤其涉及涉动画显示方法和装置。

背景技术

随着互联网技术的发展，很多网页开发者为了使网页更生动，内容更丰富，将动画在网页中显示。在网页制作时采用CSS(Cascading Style Sheets，层叠样式表)技术，可以有效的控制网页的样式和布局。CSS3(层叠样式表版本3)是目前最新的CSS标准，通过CSS3，可以创建动画脚本文件。

目前在动画脚本文件中，在定义动画时需要设置属性、周期时长、动画样式的开始时间百分比。当程序员增加或删除若干动画样式时，程序员需要计算并更改其它动画样式的开始时间百分比和周期时长；当程序员更改某一动画样式的开始时间或结束时间时，程序员还需要重新计算并更改该动画样式之后的所有动画样式的开始时间百分比和周期时长；不同浏览器支持CSS3属性的不同的描述方式，为使动画在不同浏览器中显示，需要为不同的浏览器写不同的动画脚本文件，不同浏览器不能根据同一份动画脚本文件兼容显示动画。

发明内容

本申请的目的在于供了一种动画显示方法和装置，来解决以上背景技术部分提到的技术问题。

第一方面，本申请提供了一种动画显示方法，所述方法包括：接收目标浏览器发送的动画显示请求；对所述动画显示请求进行解析，确定所述动画显示请求所指定的原始动画脚本文件；判断目标浏览器是否支持层叠样式表版本3CSS3；响应于所述目标浏览器支持CSS3，确定所述目标浏览器支持的CSS3代码描述方式，并且执行如下解析步骤：从所述原始动画脚本文件逐行提取代码；对所提取的代码进行识别，根据所述目标浏览器支持的CSS3代码描述方式，将识别出来的代码转换成所述目标浏览器支持的代码；用转换后的代码替换原始动画脚本文件中的相应代码，生成新动画脚本；向所述目标浏览器发送所述新动画脚本以供所述目标浏览器根据所述新动画脚本进行动画显示。

在一些实施例中，所述识别出来的代码包括：所述目标浏览器不支持的属性代码、预置周期时长、动画样式的过渡时长，其中，周期时长等于动画完成一个周期需要的时间，动画样式的过渡时长等于上一个动画样式过渡到当前动画样式需要的时间。

在一些实施例中，所述对所提取的代码进行识别，根据所述目标浏览器支持的CSS3代码描述方式，将识别出来的代码转换成所述目标浏览器支持的代码，包括：对所提取的代码进行识别，根据所述目标浏览器支持的CSS3代码描述方式，将识别出的所述目标浏览器不支持的属性代码转换成所述目标浏览器支持的属性代码；对所提取的代码进行识别，根据所述目标浏览器支持的CSS3代码描述方式，将识别出的所述预置周期时长转换成实际周期时长；对所提取的代码进行识别，根据所述目标浏览器支持的CSS3代码描述方式，将识别出的所述动画样式过渡时长转换成所述样式的开始时间百分比。

在一些实施例中，计算实际周期时长，其中，所述实际周期时长为所述动画样式的过渡时长之和。

在一些实施例中，所述动画显示方法还包括：将所述动画样式的开始时间除以所述实际周期时长乘以100％，得到所述动画样式的开始时间百分比，其中，所述动画样式的开始时间等于所述动画样式的过渡时长与所述动画样式之前的动画样式的过渡时长的和。

第二方面，本申请提供了一种动画显示装置，所述装置包括：接收单元，用于接收目标浏览器发送的动画显示请求；请求解析单元，用于对所述动画显示请求进行解析，确定所述动画显示请求所指定的原始动画脚本文件；判断单元，用于判断目标浏览器是否支持CSS3；脚本解析单元，响应于所述目标浏览器支持CSS3，用于确定所述目标浏览器支持的CSS3代码描述方式，并且执行如下解析步骤：从所述原始动画脚本文件逐行提取代码；对所提取的代码进行识别，根据所述目标浏览器支持的CSS3代码描述方式，将识别出来的代码转换成所述目标浏览器支持的代码；用转换后的代码替换原始动画脚本文件中的相应代码，生成新动画脚本；发送单元，用于向所述目标浏览器发送所述新动画脚本以供所述目标浏览器根据所述新动画脚本进行动画显示。

在一些实施例中，所述脚本解析单元配置用于：识别所述目标浏览器不支持的属性代码、预置周期时长、动画样式的过渡时长，其中，周期时长等于动画完成一个周期需要的时间，动画样式的过渡时长等于上一个动画样式过渡到当前动画样式需要的时间。

在一些实施例中，所述脚本解析单元进一步配置用于：对所提取的代码进行识别，根据所述目标浏览器支持的CSS3代码描述方式，将识别出的所述目标浏览器不支持的属性代码转换成所述目标浏览器支持的属性代码；对所提取的代码进行识别，根据所述目标浏览器支持的CSS3代码描述方式，将识别出的所述预置周期时长转换成实际周期时长；对所提取的代码进行识别，根据所述目标浏览器支持的CSS3代码描述方式，将识别出的所述动画样式过渡时长转换成所述样式的开始时间百分比。

在一些实施例中，所述脚本解析单元还配置用于：计算实际周期时长，其中，实际周期时长为所述动画样式的过渡时长之和。

在一些实施例中，所述脚本解析单元还配置用于：将所述动画样式的开始时间除以所述实际周期时长乘以100％，得到所述动画样式的开始时间百分比，其中，所述动画样式的开始时间等于所述动画样式的过渡时长与所述动画样式之前的动画样式的过渡时长的和。

本申请提供的动画显示方法和装置，通过接收用户浏览器发送的动画显示请求，而后解析动画显示请求，确定动画显示请求所指定的原始动画脚本文件，判断用户浏览器是否支持CSS3，如果用户浏览器支持CSS3，需要确定用户浏览器支持的CSS3代码描述方式，对原始动画脚本文件中的代码逐行解析，生成用户浏览器支持的新动画脚本，最后向用户浏览器发送新动画脚本，用户浏览器接收到新动画脚本，并根据新动画脚本显示动画，从而解决了不同浏览器根据一份动画脚本不能兼容显示动画的问题。

附图说明

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

图1是本申请可以应用于其中的示例性***架构图；

图2是根据本申请的动画显示方法的一个实施例的流程图；

图3是对图2的流程图中的解析步骤的分解流程图；

图4是根据本申请的动画显示方法的一个应用场景的示意图；

图5是根据本申请的动画显示装置的一个实施例的结构示意图；

图6是适于用来实现本申请实施例的终端设备或服务器的计算机***的结构示意图。

具体实施方式

下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释相关发明，而非对该发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与有关发明相关的部分。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

图1示出了可以应用本申请的动画显示方法或动画显示装置的实施例的示例性***架构100。

如图1所示，***架构100可以包括终端设备101、102、103，网络104和网页服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101、102、103通过网络104与网页服务器105交互，以从上述网页服务器105接收网页等，其中，网页中包含但不限于动画信息。为此，终端设备101、102、103上可以安装有各种浏览器，例如IE浏览器((Internet Explorer)，火狐浏览器，谷歌浏览器等。

终端设备101、102、103可以是具有显示屏并且支持安装浏览器的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

需要说明的是，本申请实施例所提供的动画显示方法一般由服务器105执行，相应地，动画显示装置一般设置于服务器105中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

继续参考图2，示出了根据本申请的动画显示方法的一个实施例的流程200。所述的动画显示方法，包括以下步骤：

步骤201，接收目标浏览器发送的动画显示请求。

在本实施例中，动画显示方法运行于其上的电子设备(例如图1所示的服务器)可以通过有线连接或者无线连接方式从目标浏览器接收动画显示请求。作为示例，目标浏览器可以包括不同类型的浏览器，例如，IE浏览器、火狐浏览器、谷歌浏览器。

通常，目标浏览器发送网页显示请求，网页中的内容包括但不限于CSS3动画。不同于逐帧播放的动画片，CSS3动画是CSS3创建的样式逐渐改变的动画，其中，样式可以是红色背景、黄色背景等。

步骤202，对动画显示请求进行解析，确定上述动画显示请求所指定的原始动画脚本文件。

在本实施例中，基于步骤201中接收到的动画显示请求，其中，上述动画显示请求可以是用户在浏览器中输入的网页地址，即网址。实践中，网址一般由统一资源定位符(Uniform Resource Locator，URL)来表示。网址中有上述需要显示的动画的动画脚本文件位置，上述电子设备(例如图1所示的服务器)根据动画脚本文件位置找到上述请求所指定的原始动画脚本文件。

步骤203，判断目标浏览器是否支持层叠样式表版本3CSS3。

在本实施例中，基于步骤201中，接收到的目标浏览器发送动画显示请求，上述电子设备分析上述请求中目标浏览器的信息，判断目标浏览器是否支持CSS3。如果目标浏览器是IE6浏览器，经判断该浏览器不支持CSS3，则上述电子设备可以向目标浏览器IE6发送不能显示动画的提示信息；而如果目标浏览器是IE10浏览器，经判断该浏览器支持CSS3，电子设备继续执行步骤204。

步骤204，响应于所述目标浏览器支持CSS3，确定所述目标浏览器支持的CSS3代码描述方式，并且执行如下解析步骤：从所述原始动画脚本文件逐行提取代码；对所提取的代码进行识别，根据所述目标浏览器支持的CSS3代码描述方式，将识别出来的代码转换成所述目标浏览器支持的代码；用转换后的代码替换原始动画脚本文件中的相应代码，生成新动画脚本。

在本实施例中，进一步参考图3，图3是对上述步骤204的分解流程图。在图3中，将步骤204具体分解成4个子步骤，即：步骤2041、步骤2042、步骤2043、步骤2044。步骤2041，响应于目标浏览器支持CSS3，确定目标浏览器支持的CSS3代码描述方式；步骤2042，从所述原始动画脚本文件逐行提取代码；步骤2043，对所提取的代码进行识别，根据目标浏览器支持的CSS3代码描述方式，并将识别出来的代码转换成目标浏览器支持的代码；步骤2044，用转换后的代码替换原始动画脚本文件中的相应代码，生成新动画脚本。

步骤2041，响应于目标浏览器支持CSS3，确定目标浏览器支持的CSS3代码描述方式。

在本实施例中，原始动画脚本中存在多个CSS3属性，例如动画(animation)属性和关键帧(keyframes)属性。同一个属性，不同浏览器支持上述属性的不同描述方式。例如，对于“animation”属性，火狐浏览器支持的上述属性的书写方式是“-moz-animation”；谷歌浏览器支持的上述属性的书写方式是“-webkit-animation”。例如，针对“keyframes”属性，火狐浏览器支持的上述属性的书写方式是“-moz-keyframes”，谷歌浏览器支持的上述属性的书写方式是“-webkit-keyframes”。

在本实施例中，预先设置多个集合，每个集合包含至少一个浏览器支持的在原始动画脚本中的属性的描述方式。例如集合1可以包括但不限于，“-moz-animation”、“-webkit-animation”、“-o-animation”。集合2可以包括但不限于“-moz-keyframes”、“-webkit-keyframes”、“-o-keyframes”。从上述集合中逐个取出不同描述方式的该属性，判断是否为目标浏览器支持的描述方式，如果支持，则记录上述目标浏览器支持的该属性的描述方式，如果不支持，则继续取出集合中下一个上述属性描述方式，继续判断。如果遍历完集合中的元素，没有找到目标浏览器支持的该属性的描述方式，则向目标浏览器发送提示信息。

步骤2042，从原始动画脚本文件逐行提取代码。

在本实施例中，上述电子设备可以从原始动画脚本文件逐行提取代码。

步骤2043，对所提取的代码进行识别，根据目标浏览器支持的CSS3代码描述方式，将识别出来的代码转换成目标浏览器支持的代码。

在本实施例中，上述电子设备对提取的代码进行识别，判断上述代码是否为定义“keyframes”属性的代码；如果是，则转换该属性的描述方式为步骤2041中记录的上述目标浏览器支持的描述方式，同时记录上述代码的代码行位置；如果否，则判断上述代码是否为定义动画样式的代码，如果是，则提取动画样式的过渡时长，记录上述动画样式属于的动画的动画名称，同时记录上述代码的代码行的位置，即定义上述动画样式的代码的代码行位置；如果否，则判断上述代码是否为定义“animation”属性的代码；如果是，则转换该属性的描述方式为步骤2041中记录的上述目标浏览器支持的描述方式，提取动画名称，同时记录上述代码的代码行位置，即定义“animation”属性的代码的代码行位置，同时也是定义周期时长的代码的代码行位置；如果否，则保存上述代码，并提取下一行代码，对上述下一行代码进行相同的上述3次判断，直到提取、判断上述原始动画脚本中的最后一行代码。在判断时可以采用正则表达式算法，但不限制于上述算法。

上述原始动画脚本中预置周期时长等于0。预置动画样式的过渡时长，其中预置第一个动画样式的过渡时长等于0。动画样式的过渡时长等于上一个动画样式经多长时间过渡到这个样式。

相加求和具有相同动画名称的动画样式的过渡时长，得到上述名称为动画名称的动画的实际周期时长。

根据具有相同动画名称的上述动画样式的过渡时长和上述实际周期时长，计算上述动画样式的开始时间百分比。

步骤2044，用转换后的代码替换原始动画脚本文件中相应的代码，生成新的动画脚本。

在本实施例中，基于步骤2043中已经识别出“animation”和“keyframes”属性，并转换成目标浏览器支持的描述方式。根据步骤2043中记录的代码行的位置，在上述原始动画脚本文件中找到相应的属性代码并进行替换。

用步骤2043中计算出的实际周期时长和动画样式的开始时间百分比，基于步骤2043中记录的动画名称和代码行位置找到上述动画的预置周期时长和上述动画样式的过渡时长进行替换，生成新的动画脚本。

步骤205，向目标浏览器发送新动画脚本以供目标浏览器根据所述新动画脚本进行动画显示。

在本实施例中，上述电子设备向目标浏览器发送新动画脚本，目标浏览器接收到上述新动画脚本，目标浏览解析上述动画脚本后，显示动画。

继续参见图4，图4是根据本实施例的动画显示方法的应用场景的一个示例图。在图4的应用场景中，用户首先通过浏览器发起一个知识类网页的浏览请求，其中，上述页面含有CSS3动画，该CSS3动画具体描述了一辆行驶的小轿车401；之后页面服务器接收到上述请求，并对请求进行解析，确定上述知识类网页的浏览请求所指定的原始动画脚本文件；判断上述浏览器是否支持CSS3；如果上述浏览器支持CSS3，确定上述浏览器支持的CSS3代码描述方式；从上述原始动画脚本文件中逐行提取代码；对所提取的代码进行识别，根据上述浏览器支持的CSS3代码描述方式，将识别出来的代码转换成上述浏览器支持的代码；用转换后的代码替换原始动画脚本文件中的相应代码，生成新动画脚本；向上述浏览器发送上述新动画脚本，上述浏览器接收上述新动画脚本，并显示动画，此时用户会看到网页上的小轿车401缓慢从A处行驶到B处，并最终停在B处。

本申请的上述实施例中显示了小轿车行驶的时长及行驶的轨迹的动画效果，上述动画可以在不同浏览器页面中显示。

进一步参考图5，作为对上述各图所述方法的实现，本申请提供了一种动画显示装置的一个实施例，该装置实施例与图2所示的方法相对应，该装置具体可以应用于各种电子设置中。

如图5所示，本实施例所述的动画显示装置500包括：接收单元501、请求解析单元502、判断单元503、脚本解析单元504、发送单元505。其中，接收单元501，用于接收目标浏览器发送的动画显示请求；请求解析单元502，用于对所述动画显示请求进行解析，确定所述动画显示请求所指定的原始动画脚本文件；判断单元503，用于判断目标浏览器是否支持CSS3；脚本解析单元504，响应于所述目标浏览器支持CSS3，用于确定所述目标浏览器支持的CSS3代码描述方式，并且执行如下解析步骤：从所述原始动画脚本文件逐行提取代码；对所提取的代码进行识别，根据所述目标浏览器支持的CSS3代码描述方式，将识别出来的代码转换成所述目标浏览器支持的代码；用转换后的代码替换原始动画脚本文件中的相应代码，生成新动画脚本；发送单元505，用于向所述目标浏览器发送所述新动画脚本以供所述目标浏览器根据所述新动画脚本进行动画显示。

在本实施例中，动画显示装置500的接收单元501可以通过有线连接或者无线连接方式从目标浏览器接收动画显示请求，其中，目标浏览器包括不同类型的浏览器，上述浏览器包括但不限于，IE浏览器、火狐浏览器、谷歌浏览器。

通常，目标浏览器发送网页显示请求，网页中的内容包括但不限于CSS3动画。不同于逐帧播放的动画片，CSS3动画是CSS3创建的样式逐渐改变的动画，其中，样式可以是红色背景、黄色背景等。

在本实施例中，动画显示装置500的请求解析单元502分析接收单元501接收的动画显示请求，上述动画显示请求可以是用户在浏览器中输入的网页地址，即网址。实践中，网址一般由统一资源定位符(Uniform Resource Locator，URL)来表示。网址中有上述需要显示的动画的动画脚本文件位置，解析单元502根据上述动画脚本文件位置找到上述请求所指定的原始动画脚本文件。

在本实施例中，动画显示装置500的判断单元503分析接收单元501接收的动画显示请求中目标浏览器的信息，判断目标浏览器是否支持CSS3。如果目标浏览器是IE6浏览器，经判断该浏览器不支持CSS3，则向目标浏览器IE6发送不能显示动画的提示信息；而如果目标浏览器是IE10浏览器，经判断该浏览器支持CSS3。

在本实施例中，基于判断单元503得出的目标浏览器支持CSS3，脚本解析单元504执行如下4步解析步骤。

步骤一，确定目标浏览器支持的CSS3代码描述方式。

在本实施例中，原始动画脚本中存在多个CSS3属性，例如动画(animation)属性和关键帧(keyframes)属性。同一个属性，不同浏览器支持上述属性的不同描述方式。例如，对于“animation”属性，火狐浏览器支持的上述属性的书写方式是“-moz-animation”；谷歌浏览器支持的上述属性的书写方式是“-webkit-animation”。例如，针对“keyframes”属性，火狐浏览器支持的上述属性的书写方式是“-moz-keyframes”，谷歌浏览器支持的上述属性的书写方式是“-webkit-keyframes”。预先设置多个集合，每个集合包含至少一个浏览器支持的在原始动画脚本中的属性的描述方式。例如集合1可以包括但不限于，“-moz-animation”、“-webkit-animation”、“-o-animation”。集合2可以包括但不限于“-moz-keyframes”、“-webkit-keyframes”、“-o-keyframes”。从上述集合中逐个取出不同描述方式的该属性，判断是否为目标浏览器支持的描述方式，如果支持，则记录上述目标浏览器支持的该属性的描述方式，如果不支持，则继续取出集合中下一个上述属性描述方式，继续判断。如果遍历完集合中的元素，没有找到目标浏览器支持的该属性的描述方式，则向目标浏览器发送提示信息。

步骤二，从原始动画脚本文件逐行提取代码。

在本实施例中，脚本解析单元504可以从原始动画脚本文件逐行提取代码。

步骤三，对所提取的代码进行识别，根据目标浏览器支持的CSS3代码描述方式，将识别出来的代码转换成目标浏览器支持的代码。

在本实施例中，脚本解析单元504对提取的代码进行识别，判断上述代码是否为定义“keyframes”属性的代码；如果是，则转换该属性的描述方式为步骤一中记录的上述目标浏览器支持的描述方式，同时记录上述代码的代码行位置；如果否，则判断上述代码是否为定义动画样式的代码，如果是，则提取动画样式的过渡时长，记录上述动画样式属于的动画的动画名称，同时记录上述代码的代码行的位置，即定义上述动画样式的代码的代码行位置；如果否，则判断上述代码是否为定义“animation”属性的代码；如果是，则转换该属性的描述方式为步骤一中记录的上述目标浏览器支持的描述方式，提取动画名称，同时记录上述代码的代码行位置，即定义“animation”属性的代码的代码行位置，同时也是定义周期时长的代码的代码行位置；如果否，则保存上述代码，并提取下一行代码，对上述下一行代码进行相同的上述3次判断，直到提取、判断上述原始动画脚本中的最后一行代码。在判断时可以采用正则表达式算法，但不限制于上述算法。

上述原始动画脚本中预置周期时长等于0。预置动画样式的过渡时长，其中预置第一个动画样式的过渡时长等于0。动画样式的过渡时长等于上一个动画样式经多长时间过渡到这个样式。

相加求和具有相同动画名称的动画样式的过渡时长，得到上述名称为动画名称的动画的实际周期时长。

根据具有相同动画名称的上述动画样式的过渡时长和上述实际周期时长，计算上述动画样式的开始时间百分比。

步骤四，用转换后的代码替换原始动画脚本文件中相应的代码，生成新的动画脚本。

在本实施例中，基于步骤三中已经识别出“animation”和“keyframes”属性，并转换成目标浏览器支持的描述方式。根据步骤三中记录的代码行的位置，在上述原始动画脚本文件中找到相应的属性代码并进行替换。

用步骤三中计算出的实际周期时长和动画样式的开始时间百分比，基于步骤三中记录的动画名称和代码行位置找到上述动画的预置周期时长和上述动画样式的过渡时长进行替换，生成新的动画脚本。

在本实施例中，动画显示装置500的发送单元505向目标浏览器发送新动画脚本，目标浏览器接收到上述新动画脚本，目标浏览解析上述动画脚本后，显示动画。

下面参见图6，其示出了适用于用来实现本申请实施例的服务器的计算机***600的结构示意图。

如图6所示，计算机***600包括中央处理单元(CPU)601，其可以根据存储在只读存储器(ROM)602中的程序或者从存储部分608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。在RAM 603中，还存储有***600操作所需的各种程序和数据。CPU 601、ROM 602以及RAM 603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。

以下部件连接至I/O接口605：包括键盘、鼠标等的输入部分606；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分607；包括硬盘等的存储部分608；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分609。通信部分609经由诸如因特网的网络执行通信处理。驱动器610也根据需要连接至I/O接口605。可拆卸介质611，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器610上，以便于从其上读出的计算机程序根据需要被安装入存储部分608。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括有形地包含在机器可读介质上的计算机程序，所述计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分609从网络上被下载和安装，和/或从可拆卸介质611被安装。在该计算机程序被中央处理单元(CPU)601执行时，执行本申请的方法中限定的上述功能。

附图中的流程图和框图，图示了按照本申请各种实施例的***、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，所述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的***来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本申请实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中，例如，可以描述为：一种处理器包括接收单元、请求解析单元、判断单元、脚本解析单元、发送单元。这些单元的名称在某种情况下并不构成对该单元本身的限定，例如接收单元可以被描述为“接收目标浏览器发送的动画显示请求”。

作为另一方面，本申请还提供了一种非易失性计算机存储介质，该非易失性计算机存储介质可以是上述实施例中所述装置中所包含的非易失性计算机存储介质；也可以是单独存在，未装配入终端中的非易失性计算机存储介质。上述非易失性计算机存储介质存储有一个或者多个程序，当所述一个或者多个程序被一个设备执行时，使得所述设备：接收目标浏览器发送的动画显示请求；对所述动画显示请求进行解析，确定所述动画显示请求所指定的原始动画脚本文件；判断目标浏览器是否支持层叠样式表版本3CSS3；响应于所述目标浏览器支持CSS3，确定所述目标浏览器支持的CSS3代码描述方式，并且执行如下解析步骤：从所述原始动画脚本文件逐行提取代码；对所提取的代码进行识别，根据所述目标浏览器支持的CSS3代码描述方式，将识别出来的代码转换成所述目标浏览器支持的代码；用转换后的代码替换原始动画脚本文件中的相应代码，生成新动画脚本；向所述目标浏览器发送所述新动画脚本以供所述目标浏览器根据所述新动画脚本进行动画显示。

以上描述仅为本申请的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本申请中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离所述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本申请中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (10)

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

接收目标浏览器发送的动画显示请求；

对所述动画显示请求进行解析，确定所述动画显示请求所指定的原始动画脚本文件；

判断目标浏览器是否支持层叠样式表版本3CSS3；

响应于所述目标浏览器支持CSS3，确定所述目标浏览器支持的CSS3代码描述方式，并且执行如下解析步骤：从所述原始动画脚本文件逐行提取代码；对所提取的代码进行识别，根据所述目标浏览器支持的CSS3代码描述方式，将识别出来的代码转换成所述目标浏览器支持的代码；用转换后的代码替换原始动画脚本文件中的相应代码，生成新动画脚本；

向所述目标浏览器发送所述新动画脚本以供所述目标浏览器根据所述新动画脚本进行动画显示。

2.根据权利要求1所述的动画显示方法，其特征在于，所述识别出来的代码包括：

所述目标浏览器不支持的属性代码、预置周期时长、动画样式的过渡时长，其中，周期时长等于动画完成一个周期需要的时间，动画样式的过渡时长等于上一个动画样式过渡到当前动画样式需要的时间。

3.根据权利要求1-2之一所述的动画显示方法，其特征在于，所述对所提取的代码进行识别，根据所述目标浏览器支持的CSS3代码描述方式，将识别出来的代码转换成所述目标浏览器支持的代码，包括：

对所提取的代码进行识别，根据所述目标浏览器支持的CSS3代码描述方式，将识别出的所述目标浏览器不支持的属性代码转换成所述目标浏览器支持的属性代码；

对所提取的代码进行识别，根据所述目标浏览器支持的CSS3代码描述方式，将识别出的所述预置周期时长转换成实际周期时长；

对所提取的代码进行识别，根据所述目标浏览器支持的CSS3代码描述方式，将识别出的所述动画样式过渡时长转换成所述样式的开始时间百分比。

4.根据权利要求3所述的动画显示方法，其特征在于，所述实际周期时长为所述动画样式的过渡时长之和。

5.根据权利要求3所述的动画显示方法，其特征在于，所述方法还包括：

将所述动画样式的开始时间除以所述实际周期时长乘以100％，得到所述动画样式的开始时间百分比，其中，所述动画样式的开始时间等于所述动画样式的过渡时长与所述动画样式之前的动画样式的过渡时长的和。

6.一种动画显示装置，其特征在于，所述装置包括：

接收单元，用于接收目标浏览器发送的动画显示请求；

请求解析单元，用于对所述动画显示请求进行解析，确定所述动画显示请求所指定的原始动画脚本文件；

判断单元，用于判断目标浏览器是否支持CSS3；

脚本解析单元，响应于所述目标浏览器支持CSS3，用于确定所述目标浏览器支持的CSS3代码描述方式，并且执行如下解析步骤：从所述原始动画脚本文件逐行提取代码；对所提取的代码进行识别，根据所述目标浏览器支持的CSS3代码描述方式，将识别出来的代码转换成所述目标浏览器支持的代码；用转换后的代码替换原始动画脚本文件中的相应代码，生成新动画脚本；

发送单元，用于向所述目标浏览器发送所述新动画脚本以供所述目标浏览器根据所述新动画脚本进行动画显示。

7.根据权利要求6所述的动画显示装置，其特征在于，所述脚本解析单元配置用于：

识别所述目标浏览器不支持的属性代码、预置周期时长、动画样式的过渡时长，其中，周期时长等于动画完成一个周期需要的时间，动画样式的过渡时长等于上一个动画样式过渡到当前动画样式需要的时间。

8.根据权利要求6-7之一所述的动画显示装置，其特征在于，所述脚本解析单元进一步配置用于：

对所提取的代码进行识别，根据所述目标浏览器支持的CSS3代码描述方式，将识别出的所述目标浏览器不支持的属性代码转换成所述目标浏览器支持的属性代码；

对所提取的代码进行识别，根据所述目标浏览器支持的CSS3代码描述方式，将识别出的所述预置周期时长转换成实际周期时长；

对所提取的代码进行识别，根据所述目标浏览器支持的CSS3代码描述方式，将识别出的所述动画样式过渡时长转换成所述样式的开始时间百分比。

9.根据权利要求8所述的动画显示装置，其特征在于，所述脚本解析单元还配置用于：

计算所述实际周期时长，其中，所述实际周期时长为所述动画样式的过渡时长之和。

10.根据权利要求8所述的动画显示装置，其特征在于，所述脚本解析还配置用于：

将所述动画样式的开始时间除以所述实际周期时长乘以100％，得到所述动画样式的开始时间百分比，其中，所述动画样式的开始时间等于所述动画样式的过渡时长与所述动画样式之前的动画样式的过渡时长的和。