[发明专利]一种Web端动画配置方法及装置

说明书

本发明实施例公开了一种Web端动画配置方法和装置，所述方法包括：接收用户针对动画元素输入的动画效果标识和动画配置参数；根据所述动画效果标识和动画配置参数生成所述动画元素的第一CSS样式和第二CSS样式；在所述动画配置页面中加载所述动画元素的第一CSS样式和第二CSS样式，以使在所述动画配置页面中预览所述动画元素的动画效果；在接收到针对所述动画元素的动画效果的确认指令后，将所述动画元素的第一CSS样式和第二CSS样式添加至目标页面中所述动画元素对应的样式描述代码段中。采用本发明，可通过获取用户输入的数据直接生成用于描述所述动画元素的运动过程的CSS样式，从而简化动画配置，提高了动画配置的效率。

技术领域

本发明涉及计算机技术领域，尤其涉及一种Web端动画配置方法和装置。

背景技术

随着计算机和网络技术的飞速发展，网页成为人们获取信息的一个重要部分，而一个完整的网页往往包括文字、图片及动画效果等，而对于用户来说，丰富的页面内容和动态的页面效果更能吸引他们的眼光，因此，页面中动画的配置、生成就格外重要。现有技术中，在对文字、图片、音频和视频等动画元素进行动画处理时，通过脚本代码或程序语言等对上述动画元素进行处理，还可能出现重复编写的情况，使得动画配置的过程十分复杂。在实际的项目开发过程中，动画配置的代码往往会很长，动画配置会十分耗时耗力，从而影响Web端动画开发的进程。

发明内容

基于此，为解决上述提到的动画配置过程复杂，动画表现效果可能不同的技术问题，特提供了一种Web端动画配置方法，基于本方法可以通过获取用户针对动画元素输入的数据直接生成所述动画元素的CSS样式，从而实现对所述动画元素的动画样式描述，简化动画配置过程。

本发明实施例一方面提供了一种Web端动画配置的方法，其特征在于，包括：

获取用户在动画配置页面导入的动画元素，并接收用户针对所述动画元素输入的动画效果标识和动画配置参数；

根据所述动画效果标识和动画配置参数生成针对所述动画元素的第一CSS样式和第二CSS样式，所述第一CSS样式用于定义所述动画元素的基础动画属性，所述第二CSS样式包括分别定义所述动画元素的动画效果过程中各个元素运动状态的多个样式描述代码；

在所述动画配置页面中加载所述动画元素的第一CSS样式和第二CSS样式，以使在所述动画配置页面中预览所述动画元素的动画效果；

在接收到针对所述动画元素的动画效果的确认指令后，将所述动画元素的第一CSS样式和第二CSS样式添加至目标页面中所述动画元素对应的样式描述代码段中。

其中，所述动画配置参数包括：动画过程时长、动画速度参数、动画开始延时以及动画播放次数；

所述根据所述动画效果标识和动画配置参数生成针对所述动画元素的第二CSS样式包括：

根据所述动画效果标识确定所述动画元素的运动轨迹，并结合所述动画配置参数确定所述动画元素在所述动画过程时长中每一帧的元素动画状态。

具体的，所述根据所述动画效果标识确定所述动画元素的运动轨迹，并结合所述动画配置参数确定所述动画元素在所述动画过程时长中每一帧的元素动画状态包括：

根据所述动画元素的运动轨迹中的初始状态和所述动画速度参数确定所述动画元素在动画开始后的每一帧的状态变化量，从而确定所述动画元素在所述动画过程时长中每一帧的元素动画状态。

其中，所述动画元素的第二CSS样式中的样式描述代码包括多个不同兼容前缀的样式描述语句，其中每个兼容前缀的样式描述语句用于被该兼容前缀对应的浏览器内核识别和执行。

其中，所述动画元素的第一CSS样式包括多个不同兼容前缀的基础动画属性描述，其中每个兼容前缀的基础动画属性描述用于被该兼容前缀对应的浏览器内核识别和执行。