在页面中添加动画的方法和装置的制造方法
【技术领域】
[0001] 本发明涉及CSS动画技术领域，具体涉及一种在页面中添加动画的方法和装置。
【背景技术】
[0002] 随着网页技术的发展，很多web网页开发者为了丰富网页中展示的内容，将很多 动画在网页中进行展示。而基于浏览器内核对网页的解析原理，存在一种CSS(Cascading Style Sheets，级联样式表）动画。浏览器内核可将网页文档，如html (Hypertext Markup Language，超文本标记语言）文档，解析为DOM(Document Object Model，文档对象模型）树 和CSS文件，通过CSS文件对各个DOM节点的页面元素进行渲染。那么对于某个页面元素， 如果在不同的时间下，在不同位置、形状等方面对其以CSS样式规定，那么该页面元素则会 根据上述CSS样式，随着时间在不同位置、以不同形状进行渲染展示，即在tab页面中实现 了动画效果。
[0003] 但是，在先技术中，对于CSS动画，web网页开发者均需要在编辑器中预先对html 文档的CSS文件进行编辑，如果想要知道CSS动画的效果，则需要切换到浏览器中，通过浏 览器获取编辑后的html文档，然后刷新以预览CSS动画效果。
[0004] 在上述过程中，由于web开发者不知道在编辑器中编辑完的CSS动画的效果具体 如何，需要不断在浏览器和编辑器中来回切换，以编辑其最需要的CSS动画的CSS代码，其 CSS动画的编写效率低，无法直观的在html文档中添加 CSS代码。
【发明内容】
[0005] 鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上 述问题的在页面中添加动画的装置和相应的在页面中添加动画的方法。
[0006] 依据本发明的一个方面，提供了一种在页面中添加动画的方法，包括：
[0007] 加载待添加 CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元 素包括动画添加类标识；
[0008] 通过动画选择窗口，在所述tab页面中对应动画添加类标识的页面元素之中，添 加一 CSS动画并渲染展示；
[0009] 在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动 画的CSS代码。
[0010] 优选的，所述网页文档中指定的页面元素包括动画添加类标识，包括：
[0011] 所述网页文档中的指定div标签中，包括动画添加类标识。
[0012] 优选的，通过动画选择窗口，在所述tab页面中对应动画添加类标识的页面元素 之中，添加一 CSS动画并渲染展示，包括：
[0013] 在tab页面中，侦听对应动画添加类标识的页面元素之上的触发操作；
[0014] 如果在侦听到所述触发操作，则启动动画选择窗口；
[0015] 通过所述动画选择窗口，从CSS动画库中添加一 CSS动画并渲染展示。
[0016] 优选的，通过所述动画选择窗口，从CSS动画库中添加一 CSS动画并渲染展示，包 括：
[0017] 针对所述CSS动画，根据当前展示tab页面的浏览器内核类型，选择相应的CSS代 码；
[0018] 通过JS脚本将所述CSS代码，添加到当前tab页面内进行渲染展示。
[0019] 优选的，通过所述动画选择窗口，从CSS动画库中添加一 CSS动画并渲染展示，包 括：
[0020] 在所述动画选择窗口中，选择CSS动画的属性信息；所述属性信息包括：动画时 长、动画延时、动画循环次数其中至少一个。
[0021] 优选的，在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所 述CSS动画的CSS代码，包括：
[0022] 在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加适配各种浏 览器内核的所述CSS动画的CSS代码。
[0023] 优选的，所述网页文档中指定的页面元素中还包括动画添加位置提示内容；
[0024] 进一步的，所述在网页文档编辑器中的所述网页文档中与页面元素对应的位置， 添加所述CSS动画的CSS代码之前，还包括：
[0025] 在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动画添加位 置提示内容。
[0026] 依据本发明的另外一个方面，本发明还公开了一种在页面中添加动画的装置，包 括：
[0027] 页面加载模块，适于加载待添加 CSS动画的网页文档，获得tab页面；所述网页文 档中指定的页面元素包括动画添加类标识；
[0028] 动画实时展示模块，适于通过动画选择窗口，在所述tab页面中对应动画添加类 标识的页面元素之中，添加一 CSS动画并植染展示；
[0029] 编辑代码修改模块，适于在网页文档编辑器中的所述网页文档中与页面元素对应 的位置，添加所述CSS动画的CSS代码。
[0030] 优选的，所述网页文档中指定的页面元素包括动画添加类标识，包括：
[0031] 所述网页文档中的指定div标签中，包括动画添加类标识。
[0032] 优选的，所述动画实时展示模块，包括：
[0033] 选择侦听模块，适于在tab页面中，侦听对应动画添加类标识的页面元素之上的 触发操作；
[0034] 界面启动模块，适于如果在侦听到所述触发操作，则启动动画选择窗口；
[0035] 实时展示模块，适于通过所述动画选择窗口，从CSS动画库中添加一 CSS动画并渲 染展示。
[0036] 优选的，所述实时展示模块，包括：
[0037] 第一代码选择模块，适于针对所述CSS动画，根据当前展示tab页面的浏览器内核 类型，选择相应的CSS代码；
[0038] 网页代码实时展示模块，适于通过JS脚本将所述CSS代码，添加到当前tab页面 内进行渲染展示。
[0039] 优选的，所述实时展示模块，包括：
[0040] 属性信息确定模块，适于在所述动画选择窗口中，选择CSS动画的属性信息；所述 属性信息包括：动画时长、动画延时、动画循环次数其中至少一个。
[0041] 优选的，编辑代码修改模块，包括：
[0042] 编辑代码修改模块，适于在网页文档编辑器中的所述网页文档中与页面元素对应 的位置，添加适配各种浏览器内核的所述CSS动画的CSS代码。
[0043] 优选的，所述网页文档中指定的页面元素中还包括动画添加位置提示内容；
[0044] 进一步的，所述编辑代码修改模块之前还包括：提示内容删除模块，适于在网页文 档编辑器中的所述网页文档中，删除所述页面元素内容中的动画添加位置提示内容。
[0045] 根据本发明的在页面中添加动画的方法可以对网页文档中包括了动画添加类标 识的指定页面元素，在浏览器中实现在该指定的页面元素之上，根据用户的操作，触发动画 选择窗口，然后通过该动画选择窗口，在上述页面元素之中添加一个CSS动画，然后浏览器 即可实时对该CSS动画进行渲染展示，在用户确定添加哪一个CSS动画之后，则在HTML文 档编辑器中的网页文档代码中，在上述页面元素位置添加对应所述CSS动画的CSS代码，由 此解决了先编辑网页文档，再去浏览器中刷新预览效果的方案中，以在动画效果不清楚的 情况下，对CSS代码进行修改，需要开发者不断来回切换，以保证对CSS代码的修改能够得 到动画效果符合需求的代码，其存在动画编辑效率低的问题，取得了可以不用来回切换编 辑器和浏览器，可直接通过浏览器确定需要的CSS动画，从而确定CSS代码，提高动画编辑 效率的有益效果。
[0046] 上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段， 而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够 更明显易懂，以下特举本发明的【具体实施方式】。
【附图说明】
[0047] 通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通 技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明 的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
[0048] 图1示出了根据本发明一个实施例的一种在页面中添加动画的方法的流程示意 图；
[0049] 图ΙΑ、IB、IC为CSS动画的一种示例；
[0050] 图ID示出了本发明待添加 CSS动画的网页文档的tab页面一种示例；
[0051] 图2示出了根据本发明一个实施例的一种在页面中添加动画的方法的流程示意 图；
[0052] 图2A示出了点击tab页面中指定的页面元素后弹出动画选择窗口的示例；
[0053] 图2B和图2C示出了在动画选择窗口选择CSS动画渲染示例；
[0054] 图3示出了根据本发明一个实施例的一种在页面中添加动画