一种Web端动画配置方法及装置制造方法及图纸

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

A Web-side Animation Configuration Method and Device

The embodiment of the invention discloses a Web-side animation configuration method and device, which includes: receiving animation effect identification and animation configuration parameters input by users for animation elements; generating the first and second CSS styles of the animation elements according to the animation effect identification and animation configuration parameters; and loading the first C of the animation elements in the animation configuration page. SS style and second CSS style to preview the animation effect of the animation element in the animation configuration page; after receiving the confirmation instruction for the animation effect of the animation element, the first CSS style and the second CSS style of the animation element are added to the corresponding style description code segment of the animation element in the target page. By adopting the invention, CSS styles for describing the motion process of the animation elements can be directly generated by acquiring the data input by the user, thereby simplifying the animation configuration and improving the efficiency of the animation configuration.

【技术实现步骤摘要】
一种Web端动画配置方法及装置
本专利技术涉及计算机
，尤其涉及一种Web端动画配置方法和装置。
技术介绍
随着计算机和网络技术的飞速发展，网页成为人们获取信息的一个重要部分，而一个完整的网页往往包括文字、图片及动画效果等，而对于用户来说，丰富的页面内容和动态的页面效果更能吸引他们的眼光，因此，页面中动画的配置、生成就格外重要。现有技术中，在对文字、图片、音频和视频等动画元素进行动画处理时，通过脚本代码或程序语言等对上述动画元素进行处理，还可能出现重复编写的情况，使得动画配置的过程十分复杂。在实际的项目开发过程中，动画配置的代码往往会很长，动画配置会十分耗时耗力，从而影响Web端动画开发的进程。
技术实现思路
基于此，为解决上述提到的动画配置过程复杂，动画表现效果可能不同的技术问题，特提供了一种Web端动画配置方法，基于本方法可以通过获取用户针对动画元素输入的数据直接生成所述动画元素的CSS样式，从而实现对所述动画元素的动画样式描述，简化动画配置过程。本专利技术实施例一方面提供了一种Web端动画配置的方法，其特征在于，包括：获取用户在动画配置页面导入的动画元素，并接收用户针对所述动画元素输入的动画效果标识和动画配置参数；根据所述动画效果标识和动画配置参数生成针对所述动画元素的第一CSS样式和第二CSS样式，所述第一CSS样式用于定义所述动画元素的基础动画属性，所述第二CSS样式包括分别定义所述动画元素的动画效果过程中各个元素运动状态的多个样式描述代码；在所述动画配置页面中加载所述动画元素的第一CSS样式和第二CSS样式，以使在所述动画配置页面中预览所述动画元素的动画效果；在接收到针对所述动画元素的动画效果的确认指令后，将所述动画元素的第一CSS样式和第二CSS样式添加至目标页面中所述动画元素对应的样式描述代码段中。其中，所述动画配置参数包括：动画过程时长、动画速度参数、动画开始延时以及动画播放次数；所述根据所述动画效果标识和动画配置参数生成针对所述动画元素的第二CSS样式包括：根据所述动画效果标识确定所述动画元素的运动轨迹，并结合所述动画配置参数确定所述动画元素在所述动画过程时长中每一帧的元素动画状态。具体的，所述根据所述动画效果标识确定所述动画元素的运动轨迹，并结合所述动画配置参数确定所述动画元素在所述动画过程时长中每一帧的元素动画状态包括：根据所述动画元素的运动轨迹中的初始状态和所述动画速度参数确定所述动画元素在动画开始后的每一帧的状态变化量，从而确定所述动画元素在所述动画过程时长中每一帧的元素动画状态。其中，所述动画元素的第二CSS样式中的样式描述代码包括多个不同兼容前缀的样式描述语句，其中每个兼容前缀的样式描述语句用于被该兼容前缀对应的浏览器内核识别和执行。其中，所述动画元素的第一CSS样式包括多个不同兼容前缀的基础动画属性描述，其中每个兼容前缀的基础动画属性描述用于被该兼容前缀对应的浏览器内核识别和执行。其中，所述兼容前缀包括：-webkit-、-moz-、-o-或-ms-。具体的，所述在所述动画配置页面中加载所述动画元素的第一CSS样式和第二CSS样式，以使在所述动画配置页面中预览所述动画元素的动画效果包括：切换不同浏览器内核打开加载了所述动画元素的第一CSS样式和第二CSS样式的动画配置页面，以使在所述动画配置页面中预览所述动画元素的动画效果。本专利技术实施例另一方面提供了一种Web端动画配置装置，包括：交互模块，用于获取用户在动画配置页面导入的动画元素，并接收所述用户针对所述动画元素输入的动画效果标识和动画配置参数；处理模块，用于根据所述动画效果标识和动画配置参数生成针对所述动画元素的第一CSS样式和第二CSS样式；显示模块，在所述动画配置页面中加载所述动画元素的第一CSS样式和第二CSS样式，以使在所述动画配置页面中预览所述动画元素的动画效果；确认模块，用于在接收到针对所述动画元素的动画效果的确认指令后，将所述动画元素的第一CSS样式和第二CSS样式添加至目标页面中所述动画元素对应的样式描述代码段中。本专利技术实施例另一方面提供了一种Web端动画配置装置，所述装置包括处理器、存储器、输入输出接口；所述处理器分别与所述存储器和所述输入输出接口相连，其中，所述输入输出接口用于页面交互，所述存储器用于存储程序代码，所述处理器用于调用所述程序代码，以执行如本专利技术实施例中一方面中所述的方法。，本专利技术实施例另一方面提供了一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时，执行如本专利技术实施例中一方面中所述的方法。本专利技术实施例通过获取用户导入的动画元素和针对该动画元素输入的动画效果标识和动画配置参数生成该动画元素的CSS样式，包括该动画元素的基础动画属性和具体每一帧的动画运动状态，从而直接得到该动画元素的动画样式描述代码，实现对该动画元素的动画配置，简化动画配置过程，提高了动画配置的效率。同时对于上述CSS样式包括多个不同兼容前缀的样式描述方式，实现对该动画效果的兼容性配置，使得该动画元素可以在不同浏览器上显示相同的动画效果。附图说明为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。其中：图1是本专利技术实施例提供的一种Web端动画配置流程图；图2a是本专利技术实施例提供的一种可选Web端动画配置方法的页面示意图；图2b是本专利技术实施例提供的一种动画配置选择界面示意图；图2c是本专利技术实施例提供的一种动画显示效果示意图；图3是本专利技术实施例提供的一种Web端动画配置装置示意图；图4是本专利技术实施例提供的一种终端设备的结构示意图。具体实施方式下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。请参见图1，图1是本专利技术实施例提供的一种Web端动画配置流程图。如图1所示，上述方法包括如下步骤：步骤S101，获取用户在动画配置页面导入的动画元素，并接收用户针对该动画元素输入的动画效果标识和动画配置参数。在一些可行的实施方式中，为用户提供动画配置页面，当获取到该用户在上述动画配置页面导入的动画元素时，为所述用户提供该动画元素的动画配置选项，以便获取该用户针对上述动画元素输入的动画效果标识和动画配置参数。其中，上述动画效果标识为预定义的动画名称，该动画名称用于定义上述动画元素的名字，并用于规定该动画元素需要绑定到keyframe选择器的名称；上述动画配置参数包括但不限于：动画过程时长、动画速度参数、动画开始延时、动画播放次数、循环时是否反向播放动画等，上述动画配置属性仅为部分例举出的配置属性，不表示其他动画animation的属性不在本专利技术实施例的动画配置范围内。步骤S102，根据上述动画效果标识和动画配置参数生成针对上述动画元素的第一层叠本文档来自技高网...

【技术保护点】
1.一种Web端动画配置方法，其特征在于，包括：获取用户在动画配置页面导入的动画元素，并接收用户针对所述动画元素输入的动画效果标识和动画配置参数；根据所述动画效果标识和动画配置参数生成针对所述动画元素的第一CSS样式和第二CSS样式，所述第一CSS样式用于定义所述动画元素的基础动画属性，所述第二CSS样式包括分别定义所述动画元素的动画效果过程中各个元素运动状态的多个样式描述代码；在所述动画配置页面中加载所述动画元素的第一CSS样式和第二CSS样式，以使在所述动画配置页面中预览所述动画元素的动画效果；在接收到针对所述动画元素的动画效果的确认指令后，将所述动画元素的第一CSS样式和第二CSS样式添加至目标页面中所述动画元素对应的样式描述代码段中。

【技术特征摘要】
1.一种Web端动画配置方法，其特征在于，包括：获取用户在动画配置页面导入的动画元素，并接收用户针对所述动画元素输入的动画效果标识和动画配置参数；根据所述动画效果标识和动画配置参数生成针对所述动画元素的第一CSS样式和第二CSS样式，所述第一CSS样式用于定义所述动画元素的基础动画属性，所述第二CSS样式包括分别定义所述动画元素的动画效果过程中各个元素运动状态的多个样式描述代码；在所述动画配置页面中加载所述动画元素的第一CSS样式和第二CSS样式，以使在所述动画配置页面中预览所述动画元素的动画效果；在接收到针对所述动画元素的动画效果的确认指令后，将所述动画元素的第一CSS样式和第二CSS样式添加至目标页面中所述动画元素对应的样式描述代码段中。2.根据权利要求1所述的方法，其特征在于，所述动画配置参数包括：动画过程时长、动画速度参数、动画开始延时以及动画播放次数；所述根据所述动画效果标识和动画配置参数生成针对所述动画元素的第二CSS样式包括：根据所述动画效果标识确定所述动画元素的运动轨迹，并结合所述动画配置参数确定所述动画元素在所述动画过程时长中每一帧的元素动画状态。3.根据权利要求2所述的方法，其特征在于，所述根据所述动画效果标识确定所述动画元素的运动轨迹，并结合所述动画配置参数确定所述动画元素在所述动画过程时长中每一帧的元素动画状态包括：根据所述动画元素的运动轨迹中的初始状态和所述动画速度参数确定所述动画元素在动画开始后的每一帧的状态变化量，从而确定所述动画元素在所述动画过程时长中每一帧的元素动画状态。4.根据权利要求1所述的方法，其特征在于，所述动画元素的第二CSS样式中的样式描述代码包括多个不同兼容前缀的样式描述语句，其中每个兼容前缀的样式描述语句用于被该兼容前缀对应的浏览器内核识别和执行。5.根据权利要求1所述的方法，其特征在于，所述动...

【专利技术属性】
技术研发人员：李清鹏，
申请(专利权)人：平安科技深圳有限公司，
类型：发明
国别省市：广东,44