CN108021366B - 界面动画实现方法、装置、电子设备、存储介质 - Google Patents

Abstract

本发明提供一种界面动画实现方法、装置、电子设备、存储介质，所述界面动画实现方法，包括：形成CSS动画样式表，所述CSS动画样式表包括至少一个第一动画类和多个第二动画类，所述第一动画类定义关键帧序列，各所述第二动画类调用一第一动画类，调用同一第一动画类的各第二动画类定义不同的动画属性；利用jquery对界面进行编码，并调用一个或多个第二动画类；对所述编码进行编译和运行，使得一个或多个第二动画类对应的动画显示在所述界面中，其中，所述第二动画类对应的动画具有其所调用的第一动画类定义关键帧序列及该第二动画类所定义的动画属性。本发明提供的方法及装置高效实现界面动画的显示。

Description

界面动画实现方法、装置、电子设备、存储介质

技术领域

本发明涉及计算机应用技术领域，尤其涉及一种界面动画实现方法、装置、电子设备、存储介质。

背景技术

在计算机应用领域中，通常利用CSS(Cascading Style Sheets，层叠样式表)或CSS3来在界面中创建动画。

在一些现有技术中，可以利用CSS或CSS3创建动画以在计算机界面中取代动画图片、Flash动画以及JavaScript。

CSS或CSS3中@keyframes规则用于创建动画。在@keyframes规则中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。

Internet Explorer 10、Firefox以及Opera等浏览器都支持CSS或CSS3中的@keyframes规则和animation属性。

对于不同的浏览器，在利用@keyframes规则创建动画时需要增加不同的前缀。

例如，对于如下@keyframes规则创建名称为myfirst的动画样式：

@keyframes myfirst

{

from{background:red；}

to{background:yellow；}

}

在适配Firefox浏览器时，增加前缀-moz-，其代码如下：

@-moz-keyframes myfirst/*Firefox*/

{

from{background:red；}

to{background:yellow；}

}

在适配Safari和Chrome浏览器时，增加前缀-webkit-，其代码如下：

@-webkit-keyframes myfirst/*Safari和Chrome*/

{

from{background:red；}

to{background:yellow；}

}

在适配Opera浏览器时，增加前缀-o-，其代码如下：

@-o-keyframes myfirst/*Opera*/

{

from{background:red；}

to{background:yellow；}

}

并通过如下代码定义不同浏览器中，动画的显示时间：

div

{

animation:myfirst 5s；

-moz-animation:myfirst 5s；/*Firefox*/

-webkit-animation:myfirst 5s；/*Safari和Chrome*/

-o-animation:myfirst 5s；/*Opera*/

}

在上述方式中，若要修改名称为myfirst的动画样式，则需要对适应不同浏览器的每个动画样式都进行更改，实际操作中将非常麻烦。同时，这样的方法会导致CSS文件内杂乱。

发明内容

本发明为了克服上述现有技术存在的缺陷，提供一种界面动画实现方法、装置、电子设备、存储介质，以高效实现界面动画的显示。

根据本发明的一个方面，提供一种界面动画实现方法，包括：形成CSS动画样式表，所述CSS动画样式表包括至少一个第一动画类和多个第二动画类，所述第一动画类定义关键帧序列，各所述第二动画类调用一第一动画类，调用同一第一动画类的各第二动画类定义不同的动画属性；利用jquery对界面进行编码，并调用一个或多个第二动画类；对所述编码进行编译和运行，使得一个或多个第二动画类对应的动画显示在所述界面中，其中，所述第二动画类对应的动画具有其所调用的第一动画类定义关键帧序列及该第二动画类所定义的动画属性。

可选地，所述CSS动画样式表还包括至少一个第三动画类，所述第三动画类调用所述第二动画类，所述利用jquery对界面进行编码，并调用一个或多个第二动画类还包括：调用所述第三动画类，并将所述界面显示所述动画的配置参数传递给所述第三动画类。

可选地，所述调用所述第三动画类，并将所述界面显示所述动画的配置参数传递给所述第三动画类还包括：接收所述界面的动画触发操作；获取所述动画触发操作对应的配置参数，其中，不同的动画触发操作对应不同的配置参数；调用所述动画触发操作对应的第三动画类，并将该动画触发操作对应的的配置参数传递给所述第三动画类，其中多个动画触发操作对应同一第三动画类。

可选地，所述配置参数包括所述动画在所述界面中的位置及所述动画的显示区域。

可选地，调用同一第一动画类的各第二动画类定义不同的动画类型，每一所述动画类型具有一个或多个所述动画属性。

可选地，所述配置参数还包括所述动画类型，所述第三动画类根据所述配置参数动态调用所述第二动画类中的一个。

可选地，所述动画类型包括移动类、闪动类、播放多帧图类、隐藏类中的一种或多种。

可选地，所述接收所述界面的动画触发操作之后，获取所述动画触发操作对应的配置参数还包括：确定所述界面所要显示的动画的位图，其中，所述配置参数还包括所述位图的位图信息。

可选地，所述配置参数还包括指示所述位图抖动的指示信息，所述指示信息指示：

将所要显示的动画的每一帧的显示时间作为一时间单元；

将所述时间单元由N个子时间单元，N为大于等于3小于等于9的整数；

在该N个子时间单元内，所要显示的动画的每一帧的位图的每一像素点分别位于该像素点当前位置及该像素点上、下、左、右、左上、左下、右上、右下八个方向中任N-1个方向的一个像素点的位置。

可选地，所述动画触发操作包括识别显示动画的设备的显示屏具有大于等于120赫兹的刷新率。

可选地，所述确定所述界面所要显示的动画的位图包括：获取一FLASH动画；提取所述FLASH动画的FLASH关键帧，并获取FLASH关键帧的序号；根据所述界面的动画触发操作，确定所述FLASH关键帧的序号；根据所述FLASH关键帧的序号将所述FLASH关键帧作为所述位图。

可选地，调用同一第一动画类的各第二动画类定义不同的浏览器适配类型。

根据本发明的又一方面，还提供一种界面动画实现装置，包括：形成模块，用于形成CSS动画样式表，所述CSS动画样式表包括至少一个第一动画类和多个第二动画类，所述第一动画类定义关键帧序列，各所述第二动画类调用一第一动画类，调用同一第一动画类的各第二动画类定义不同的动画属性；编码模块，用于利用jquery对界面进行编码，并调用一个或多个第二动画类；编译模块，用于对所述编码进行编译和运行，使得一个或多个第二动画类对应的动画显示在所述界面中，其中，所述第二动画类对应的动画具有其所调用的第一动画类定义关键帧序列及该第二动画类所定义的动画属性。

根据本发明的又一方面，还提供一种电子设备，所述电子设备包括：处理器；存储介质，其上存储有计算机程序，所述计算机程序被所述处理器运行时执行如上所述的步骤。

根据本发明的又一方面，还提供一种存储介质，所述存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如上所述的步骤。

相比现有技术，本发明通过形成具有第一动画类和第二动画类的CSS动画样式表，第一动画类为关键帧序列，多个第二动画类调用第一动画类以赋予关键帧序列不同的动画属性，由此，当界面编码时直接调用第二动画类即可在编译执行时在界面上显示第二动画类对应的动画。通过上述方式，本发明的动画类调用方式明确，且动画需修改时，可仅修改第一动画类即可更新至所有第二动画类，进而可高效实现界面动画的显示。

附图说明

通过参照附图详细描述其示例实施方式，本发明的上述和其它特征及优点将变得更加明显。

图1示出了根据本发明实施例的界面动画实现方法的流程图。

图2至图4示出了根据本发明实施例的CSS动画样式表的调用关系的示意图。

图5示出了根据本发明实施例的界面动画实现装置的示意图。

图6示出了根据本发明实施例的动画显示抖动的示意图。

图7示意性示出本公开示例性实施例中一种计算机可读存储介质示意图。

图8示意性示出本公开示例性实施例中一种电子设备示意图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。

此外，附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

为了解决现有技术的缺陷，高效实现界面动画的显示，本发明提供一种界面动画实现方法、装置、电子设备、存储介质。

图1示出了根据本发明实施例的界面动画实现方法的流程图。图1示出了3个步骤：

步骤S110：形成CSS动画样式表，所述CSS动画样式表包括至少一个第一动画类和多个第二动画类，所述第一动画类定义关键帧序列，各所述第二动画类调用一第一动画类，调用同一第一动画类的各第二动画类定义不同的动画属性。

具体而言，CSS(CascadingStyleSheets，层叠样式表)是一种用来表现HTML文件样式的计算机语言，CSS动画配置数据是指通过CSS实现的用来控制动画效果的数据，如控制动画的显示时长和显示方式的参数、控制动画主体形状的参数、控制动画主体位置的参数、控制动画主体个数的参数、控制动画主体在不同时间状态的参数等。同样的动画效果，可以通过不同的CSS动画配置数据(即动画属性)实现，如控制动画主体形状的参数可以由文本投影参数或内边距参数、边框参数、背景参数、图层投影参数等组成，通过各种参数的配合生成动画主体，控制动画主体位置的参数可以由字符间距控制参数组成，也可以由字符缩进参数组成，控制动画主体个数的参数可以由隐藏字符参数将字符隐藏从而改变动画主体的个数，也可以由透明度参数使动画主体透明从而改变动画主体的个数。由于CSS的灵活性，可通过CSS动画配置数据方便灵活的控制动画效果。

具体而言，当界面显示多个动画时，第一动画类定义的关键帧序列包括该多个动画相同的动画属性，而第二动画类定义该多个动画不同的动画属性。在一些实施例中，调用同一第一动画类的各第二动画类定义不同的动画类型，每一所述动画类型具有一个或多个所述动画属性。所述动画类型包括移动类、闪动类、播放多帧图类、隐藏类中的一种或多种。在又一些实施例中，调用同一第一动画类的各第二动画类定义不同的浏览器适配类型。由此，将多个动画相同的属性和不同的属性分离，便于动画类的调用和修改。

步骤S120：利用jquery对界面进行编码，并调用一个或多个第二动画类。

步骤S130：对所述编码进行编译和运行，使得一个或多个第二动画类对应的动画显示在所述界面中，其中，所述第二动画类对应的动画具有其所调用的第一动画类定义关键帧序列及该第二动画类所定义的动画属性。

下面参见图2，图2示出了根据本发明实施例的一种CSS动画样式表的调用关系的示意图。

CSS动画样式表包括多个第一动画类210和多个第二动画类220。第二动画类A1-A3调用第一动画类A；第二动画类B1-B3调用第一动画类B。图2中示出的第一动画类/210和第二动画类220的数量和调用关系仅仅是示意性的，本发明并非以此为限。调用第一动画类A的多个第二动画类A1-A3具有不同的动画属性。例如，第二动画类A1至第二动画类A3使得第一动画类A定义的关键帧序列具有不同的持续长度。又例如，第二动画类A1的动画属性使得第一动画类A定义的关键帧序列为移动类动画；第二动画类A2的动画属性使得第一动画类A定义的关键帧序列为闪动类动画；第二动画类A3的动画属性使得第一动画类A定义的关键帧序列为隐藏类动画。再例如，第二动画类A1至第二动画类A3使得第一动画类A定义的关键帧序列适配不同的浏览器。

在一些实施例中，第二动画类B1至B3可以具有与第二动画类A1至A3相同类型的动画属性(即第二动画类A1至A3使第一动画类A适配不同的浏览器，第二动画类B1至B3使第一动画类B适配不同的浏览器)。在又一些实施例中，第二动画类B1至B3可以具有与第二动画类A1至A3不同类型的动画属性(即第二动画类A1至A3使第一动画类A适配不同的浏览器，第二动画类B1至B3使第一动画类B具有不同的持续长度)。

下面参见图3，图3示出了根据本发明实施例的另一种CSS动画样式表的调用关系的示意图。

CSS动画样式表包括多个第一动画类210、多个第二动画类220和多个第三动画类230。第二动画类A1-A3调用第一动画类A；第二动画类B1-B3调用第一动画类B；第三动画类A11至A33分别调用第二动画类A1至A3；第三动画类B11至B33分别调用第二动画类B1至B3。图3中示出的第一动画类210、第二动画类220和第三动画类230的数量和调用关系仅仅是示意性的，本发明并非以此为限。第二动画类220和第一动画类210的实现可与图2所示的实施例类似。

在这样的实施例中，图1中的步骤S120还可以包括调用所述第三动画类230，并将所述界面显示所述动画的配置参数传递给所述第三动画类230。在本实施例中，可通过界面的触发操作实现配置参数的传递。具体而言，可包括如下步骤接收所述界面的动画触发操作，获取所述动画触发操作对应的配置参数(不同的动画触发操作对应不同的配置参数)，调用所述动画触发操作对应的第三动画类，并将该动画触发操作对应的的配置参数传递给所述第三动画类，其中多个动画触发操作对应同一第三动画类。在一些实施例中，配置参数包括所述动画在所述界面中的位置及所述动画的显示区域。可以理解，上述实施例实现了在用户对界面进行不同操作的时候触发不同配置参数的传递。例如，触发操作可以是用户双击界面某一图标以实现动画放大，则该触发操作对应配置参数增大所述动画的显示区域，并修正所述动画的显示位置，该配置参数传递至第三动画类230以实现不懂触发动作的不同动画的显示。在这样的实施例中，进一步将与界面交互配合的动画属性与第一动画类220和第一动画类210分离，进而增加动画编码修改的便利性和灵活性。

下面参见图4，图4示出了根据本发明实施例的又一种CSS动画样式表的调用关系的示意图。CSS动画样式表包括多个第一动画类210、多个第二动画类220和多个第三动画类230。第二动画类A1-A3调用第一动画类A；第二动画类B1-B3调用第一动画类B；第三动画类AA动态调用第二动画类A1至A3；第三动画类BB动态调用第二动画类B1至B3。图4中示出的第一动画类210、第二动画类220和第三动画类230的数量和调用关系仅仅是示意性的，本发明并非以此为限。第二动画类220和第一动画类210的实现可与图2所示的实施例类似。图4所示的实施例与图3所示的实施例不同的是，在图3中，第三动画类230和第二动画类220的调用关系是确定的，而在图4中，第三动画类230动态调用第二动画类220。

具体而言，可以通过配置参数的传递实现第三动画类230动态调用第二动画类220。换言之，在图4所示的实施例中，不同的动画触发操作对应不同的第二动画类220，且将其对应的第二动画类220的名称或标识以配置参数的形式传递给第三动画类230以实现第二动画类220的动态调用。由此，可减少第三动画类230的数量，并增加动画编码修改的便利性和灵活性。

在上述图3及图4所示实施例的一个变化例中，可选地，所述接收所述界面的动画触发操作之后，获取所述动画触发操作对应的配置参数还可以包括确定所述界面所要显示的动画的位图，其中，所述配置参数还包括所述位图的位图信息。

在上述实施例中，所述动画触发操作包括识别显示动画的设备的显示屏具有大于等于120赫兹的刷新率。配置参数还可以包括指示所述位图抖动的指示信息。由于界面动画(例如网页广告位)等动画由于嵌入在网页中其分辨率通常较低，在这样的情况下，本发明利用显示动画的设备的高刷新率的显示屏，在动画一帧的时间内，将动画位图进行抖动，以在一个像素点在一帧时间内包含更多的信息量，由此提高动画显示的分辨率。同时，考虑到动画的特性，由于其并非是静止的位图，在进行位图抖动时，也不会使用户产生明显的位图晃动感。具体而言，上述配置参数中包括的指示信息可以指示：将所要显示的动画的每一帧的显示时间作为一时间单元；将所述时间单元由N个子时间单元，N为大于等于3小于等于9的整数；在该N个子时间单元内，所要显示的动画的每一帧的位图的每一像素点分别位于该像素点当前位置及该像素点上、下、左、右、左上、左下、右上、右下八个方向中任N-1个方向的一个像素点的位置。例如，N为4，则在该4个子时间单元内，所要显示的动画的每一帧的位图的每一像素点分别位于该像素点当前位置及该像素点上、左、左上(或者上、右、右上；下、右、右下；下、左、左下)的一个像素点的位置。又例如，N为6，则在该6个子时间单元内，所要显示的动画的每一帧的位图的每一像素点分别位于该像素点当前位置及该像素点上、右、左、右上、左上(或者下、右、左、右下、左下)的一个像素点的位置。再例如，N为9(如图5所示)，则在该9个子时间单元内，所要显示的动画的每一帧的位图的每一像素点310分别位于该像素点当前位置A及该像素点上、下、左、右、左上、左下、右上、右下八个方向的一个像素点的位置A1-A8。可以理解，N越大，其分辨率增加的越多，同时对于显示动画的设备的刷新率越高。在一些实施例中，可根据显示动画的设备的设备号确定该设备显示屏的刷新率，针对不同的刷新率，提供不同的N的取值(如，刷新率为120赫兹，使N取值为4；刷新率为180赫兹，使N取值为6；刷新率为270赫兹，使N取值为9)。本发明并非以此为限，至少使得N的取值与刷新率正相关即可。

在上述实施例的一个变化例中，所述确定所述界面所要显示的动画的位图可以包括获取一FLASH动画；提取所述FLASH动画的FLASH关键帧，并获取FLASH关键帧的序号，根据所述界面的动画触发操作，确定所述FLASH关键帧的序号，根据所述FLASH关键帧的序号将所述FLASH关键帧作为所述位图。在这样的实施例中，动画触发操作例如可以是带宽识别的操作，例如，当前带宽能够实现FLASH的快速加载，则可以直接显示FLASH动画，而当用户当前带宽不能够实现FLASH的快速加载(当带宽小于预定阈值即为动画触发操作)，则通过自FLASH中提取关键帧来实现CSS动画的快速加载。

图6示出了根据本发明实施例的界面动画实现装置的示意图。

界面动画实现装置400包括形成模块410、编码模块420及编译模块430。

形成模块410用于形成CSS动画样式表，所述CSS动画样式表包括至少一个第一动画类和多个第二动画类，所述第一动画类定义关键帧序列，各所述第二动画类调用一第一动画类，调用同一第一动画类的各第二动画类定义不同的动画属性。编码模块420用于利用jquery对界面进行编码，并调用一个或多个第二动画类。编译模块430用于对所述编码进行编译和运行，使得一个或多个第二动画类对应的动画显示在所述界面中，其中，所述第二动画类对应的动画具有其所调用的第一动画类定义关键帧序列及该第二动画类所定义的动画属性。

图6仅仅是示意性地示出各个模块，可以理解，这些模块可以虚拟的软件模块或实际的硬件模块，这些模块的合并、拆分及其余模块的增加都在本发明的保护范围之内。

在本公开的示例性实施例中，还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被例如处理器执行时可以实现上述任意一个实施例中所述电子处方流转处理方法的步骤。在一些可能的实施方式中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行本说明书上述电子处方流转处理方法部分中描述的根据本发明各种示例性实施方式的步骤。

参考图7所示，描述了根据本发明的实施方式的用于实现上述方法的程序产品800，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

所述计算机可读存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读存储介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在租户计算设备上执行、部分地在租户设备上执行、作为一个独立的软件包执行、部分在租户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到租户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

在本公开的示例性实施例中，还提供一种电子设备，该电子设备可以包括处理器，以及用于存储所述处理器的可执行指令的存储器。其中，所述处理器配置为经由执行所述可执行指令来执行上述任意一个实施例中所述电子处方流转处理方法的步骤。

所属技术领域的技术人员能够理解，本发明的各个方面可以实现为系统、方法或程序产品。因此，本发明的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“系统”。

下面参照图8来描述根据本发明的这种实施方式的电子设备600。图8显示的电子设备600仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图8所示，电子设备600以通用计算设备的形式表现。电子设备600的组件可以包括但不限于：至少一个处理单元610、至少一个存储单元620、连接不同系统组件(包括存储单元620和处理单元610)的总线630、显示单元640等。

其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元610执行，使得所述处理单元610执行本说明书上述电子处方流转处理方法部分中描述的根据本发明各种示例性实施方式的步骤。例如，所述处理单元610可以执行如图1中所示的步骤。

所述存储单元620可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)6201和/或高速缓存存储单元6202，还可以进一步包括只读存储单元(ROM)6203。

所述存储单元620还可以包括具有一组(至少一个)程序模块6205的程序/实用工具6204，这样的程序模块6205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线630可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备600也可以与一个或多个外部设备700(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得租户能与该电子设备600交互的设备通信，和/或与使得该电子设备600能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口650进行。并且，电子设备600还可以通过网络适配器660与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。网络适配器660可以通过总线630与电子设备600的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备600使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、或者网络设备等)执行根据本公开实施方式的上述电子处方流转处理方法。

相比现有技术，本发明通过形成具有第一动画类和第二动画类的CSS动画样式表，第一动画类为关键帧序列，多个第二动画类调用第一动画类以赋予关键帧序列不同的动画属性，由此，当界面编码时直接调用第二动画类即可在编译执行时在界面上显示第二动画类对应的动画。通过上述方式，本发明的动画类调用方式明确，且动画需修改时，可仅修改第一动画类即可更新至所有第二动画类，进而可高效实现界面动画的显示。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由所附的权利要求指出。

Claims (11)

1.一种界面动画实现方法，其特征在于，包括：

形成CSS动画样式表，所述CSS动画样式表包括至少一个第一动画类和多个第二动画类，所述第一动画类定义关键帧序列，各所述第二动画类调用一第一动画类，调用同一第一动画类的各第二动画类定义不同的动画属性；

利用jquery对界面进行编码，并调用一个或多个第二动画类；

对所述编码进行编译和运行，使得一个或多个第二动画类对应的动画显示在所述界面中，其中，所述第二动画类对应的动画具有其所调用的第一动画类定义的关键帧序列及该第二动画类所定义的动画属性，

其中，所述CSS动画样式表还包括至少一个第三动画类，所述第三动画类调用所述第二动画类，

所述利用jquery对界面进行编码，并调用一个或多个第二动画类还包括：

调用所述第三动画类，并将所述界面显示所述动画的配置参数传递给所述第三动画类，其中，

所述调用所述第三动画类，并将所述界面显示所述动画的配置参数传递给所述第三动画类还包括：

接收所述界面的动画触发操作；

获取所述动画触发操作对应的配置参数，其中，不同的动画触发操作对应不同的配置参数，包括：确定所述界面所要显示的动画的位图，其中，所述配置参数还包括所述位图的位图信息；

调用所述动画触发操作对应的第三动画类，并将该动画触发操作对应的配置参数传递给所述第三动画类，其中多个动画触发操作对应同一第三动画类，

其中，所述配置参数还包括指示所述位图抖动的指示信息，所述指示信息指示：

将所要显示的动画的每一帧的显示时间作为一时间单元；

将所述时间单元划分为N个子时间单元，N为大于等于3小于等于9的整数；

在该N个子时间单元内，所要显示的动画的每一帧的位图的每一像素点分别位于该像素点当前位置及该像素点上、下、左、右、左上、左下、右上、右下八个方向中任N-1个方向的一个像素点的位置。

2.如权利要求1所述的界面动画实现方法，其特征在于，所述配置参数包括所述动画在所述界面中的位置及所述动画的显示区域。

3.如权利要求2所述的界面动画实现方法，其特征在于，调用同一第一动画类的各第二动画类定义不同的动画类型，每一所述动画类型具有一个或多个所述动画属性。

4.如权利要求3所述的界面动画实现方法，其特征在于，所述配置参数还包括所述动画类型，所述第三动画类根据所述配置参数动态调用所述第二动画类中的一个。

5.如权利要求3所述的界面动画实现方法，其特征在于，所述动画类型包括移动类、闪动类、播放多帧图类、隐藏类中的一种或多种。

6.如权利要求1所述的界面动画实现方法，其特征在于，所述动画触发操作包括识别显示动画的设备的显示屏具有大于等于120赫兹的刷新率。

7.如权利要求1所述的界面动画实现方法，其特征在于，所述确定所述界面所要显示的动画的位图包括：

获取一FLASH动画；

提取所述FLASH动画的FLASH关键帧，并获取FLASH关键帧的序号；

根据所述界面的动画触发操作，确定所述FLASH关键帧的序号；

根据所述FLASH关键帧的序号将所述FLASH关键帧作为所述位图。

8.如权利要求1至7任一项所述的界面动画实现方法，其特征在于，调用同一第一动画类的各第二动画类定义不同的浏览器适配类型。

9.一种界面动画实现装置，其特征在于，包括：

形成模块，用于形成CSS动画样式表，所述CSS动画样式表包括至少一个第一动画类和多个第二动画类，所述第一动画类定义关键帧序列，各所述第二动画类调用一第一动画类，调用同一第一动画类的各第二动画类定义不同的动画属性；

编码模块，用于利用jquery对界面进行编码，并调用一个或多个第二动画类；

编译模块，用于对所述编码进行编译和运行，使得一个或多个第二动画类对应的动画显示在所述界面中，其中，所述第二动画类对应的动画具有其所调用的第一动画类定义的关键帧序列及该第二动画类所定义的动画属性，

其中，所述CSS动画样式表还包括至少一个第三动画类，所述第三动画类调用所述第二动画类，

所述利用jquery对界面进行编码，并调用一个或多个第二动画类还包括：

调用所述第三动画类，并将所述界面显示所述动画的配置参数传递给所述第三动画类，其中，

所述调用所述第三动画类，并将所述界面显示所述动画的配置参数传递给所述第三动画类还包括：

接收所述界面的动画触发操作；

获取所述动画触发操作对应的配置参数，其中，不同的动画触发操作对应不同的配置参数，包括：确定所述界面所要显示的动画的位图，其中，所述配置参数还包括所述位图的位图信息；

调用所述动画触发操作对应的第三动画类，并将该动画触发操作对应的配置参数传递给所述第三动画类，其中多个动画触发操作对应同一第三动画类，

其中，所述配置参数还包括指示所述位图抖动的指示信息，所述指示信息指示：

将所要显示的动画的每一帧的显示时间作为一时间单元；

将所述时间单元划分为N个子时间单元，N为大于等于3小于等于9的整数；

在该N个子时间单元内，所要显示的动画的每一帧的位图的每一像素点分别位于该像素点当前位置及该像素点上、下、左、右、左上、左下、右上、右下八个方向中任N-1个方向的一个像素点的位置。

10.一种电子设备，其特征在于，所述电子设备包括：

处理器；

存储介质，其上存储有计算机程序，所述计算机程序被所述处理器运行时执行如权利要求1至8任一项所述的界面动画实现方法。

11.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如权利要求1至8任一项所述的界面动画实现方法。

Images