[发明专利]动画展示方法和装置

说明书

技术领域

本发明涉及CSS动画技术领域，具体涉及一种动画展示方法和装置。

背景技术

随着网页技术的发展，很多web网页开发者为了丰富网页中展示的内容，将很多动画在网页中进行展示。而基于浏览器内核对网页的解析原理，存在一种CSS(Cascading Style Sheets，级联样式表)动画。浏览器内核可将网页文档，如html(Hypertext Markup Language，超文本标记语言)文档，解析为DOM(Document Object Model，文档对象模型)树和CSS文件，通过CSS文件对各个DOM节点的页面元素进行渲染。那么对于某个页面元素，如果在不同的时间下，在不同位置、形状等方面对其以CSS样式规定，那么该页面元素则会根据上述CSS样式，随着时间在不同位置、以不同形状进行渲染展示，即在tab页面中实现了动画效果。

但是，在先技术中，对于CSS动画，web网页开发者均需要在编辑器中预先对html文档的CSS文件进行编辑，如果想要知道CSS动画的效果，则需要切换到浏览器中，通过浏览器获取编辑后的html文档，然后刷新以预览CSS动画效果。

在上述过程中，由于web开发者不知道在编辑器中编辑完的CSS动画的效果具体如何，需要不断在浏览器和编辑器中来回切换，以编辑其最需要的CSS代码，其CSS动画的编写效率低。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的动画展示装置和相应的动画展示方法。

依据本发明的一个方面，本发明公开了一种动画展示的方法，包括：

加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；

在tab页面中，对应动画添加类标识的页面元素之上，根据用户的触发操作启动动画选择窗口；

当在所述动画选择窗口接收到用户对一个CSS动画的指定操作后，在一个弹出窗口中展示所述CSS动画；

当用户确定选择所述CSS动画之后，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示；

在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。

优选的，所述动画选择窗口中还包括：

动画库添加接口，用于向CSS动画库中添加CSS代码；

进一步的，还包括：

当在所述动画选择窗口中接收到用户对所述动画库添加接口的触发操作，则生成CSS代码编辑界面；

在所述CSS代码编辑界面中接收用户编辑的CSS代码，并根据用户的操作将所述CSS代码存入CSS动画库。

优选的，所述动画选择窗口中还包括：

动画删除接口，用于删除CSS动画库中于CSS动画对应的CSS代码；

进一步的，还包括：

当在所述动画选择窗口中接收到用户对CSS动画的动画删除接口的触发操作，则将CSS动画库中相应的CSS代码删除。

优选的，所述动画选择窗口中还包括：

动画编辑接口，用于修改CSS动画库中与CSS动画对应的CSS代码；

进一步的，还包括：

当在所述动画选择窗口中接收到用户对所述动画编辑接口的触发操作，则生成CSS代码编辑界面，并将所述CSS动画的CSS代码加载至所述CSS代码编辑界面中；

在所述CSS代码编辑界面中接收用于对所述CSS代码的修改，并根据用户的操作将所述CSS代码存入CSS动画库。

优选的，所述网页文档中指定的页面元素包括动画添加类标识，包括：

所述网页文档中的指定div标签中，包括动画添加类标识。

优选的，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示之前，包括

针对所述CSS动画，根据当前展示tab页面的浏览器内核类型，选择相应的CSS代码；

通过JS脚本将所述CSS代码,添加到当前tab页面内进行渲染展示。

优选的，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示之前，还包括：

在所述网页文档编辑器的动画选择窗口中，选择CSS动画的属性信息；所述属性信息包括：动画时长、动画延时、动画循环次数其中至少一个。

优选的，在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码，包括：