[发明专利]界面动画实现方法、装置、电子设备、存储介质

说明书

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

技术领域

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

背景技术

在计算机应用领域中，通常利用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