CN109885795A - 一种Web端动画配置方法及装置 - Google Patents

Abstract

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

Description

一种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，根据上述动画效果标识和动画配置参数生成针对上述动画元素的第一层叠样式表(Cascading Style Sheets，CSS)样式和第二CSS样式。

在一些可行的实施方式中，上述第一CSS样式用于定义上述动画元素的基础动画属性，上述第二CSS样式包括分别定义上述动画元素的动画效果过程中各个元素运动状态的多个样式描述代码。具体的，上述第一CSS样式包括的一些可选的动画属性和一种可选的动画属性描述方式包括但不限于“animation:name duration timing-function delayiteration-count direction”，该动画属性描述方式依次表示“动画：动画名称动画播放时长动画速度曲线动画开始前延时动画播放次数循环时是否反向播放”，其中，上述动画名称与上述动画效果标识对应，其余动画属性则分别与上述动画配置参数一一对应。其中，上述动画属性的一种可选的动画属性描述方式的默认值为：“animation:none 0ease 01normal”，即可以认为预定义第一CSS样式为上述默认值。当获取到上述动画效果标识和动画配置参数后，将上述预定义第一CSS样式中name的值更新为上述动画效果标识，其余动画属性则分别更新为上述动画配置参数，进行一一对应，从而得到上述第一CSS样式。

可选的，根据上述动画效果标识确定该动画元素的运动轨迹，并结合上述动画配置参数确定该动画元素在上述动画过程时长中每一帧的元素动画状态。具体的，根据该动画元素的运动轨迹中的初始状态和上述动画速度参数确定该动画元素在动画开始后的每一帧的状态变化量，从而确定该动画元素在上述动画过程时长中每一帧的元素动画状态。具体的，以上述动画效果标识作为第二CSS样式中keyframe选择器的名称，通过上述动画选择标识从预定义第二CSS样式中选取对应的多个keyframe选择器，并确定该动画元素的运动轨迹，上述运动轨迹包括但不限于：从左至右、从上往下、从右往左、从下往上、旋转等，并根据上述动画配置参数中动画速度参数确定该动画元素在每一帧的元素动画状态。其中，上述动画属性中timing-function使用名为三次贝塞尔(Cubic Bezier)函数的数学函数生成速度曲线，用来定义动画从一套CSS样式变为另一套所用的时间。具体的，当获取到上述动画配置属性中动画速度参数时，根据上述动画速度参数选取上述多个keyframe选择器中符合上述动画速度参数对应的运动轨迹的keyframe选择器，该keyframe选择器即为上述第二CSS样式。

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

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

其中，上述兼容前缀包括：-webkit-、-moz-、-o-或-ms-，-webkit-对应的浏览器类型包括Google或Safari，-moz-对应的浏览器类型包括Firefox，-o-对应的浏览器类型包括Opera，-ms-对应的浏览器类型包括IE。

步骤S103，在上述动画配置页面中加载该动画元素的第一CSS样式和第二CSS样式，以使在上述动画配置页面中预览上述动画元素的动画效果。

在一些可行的实施方式中，切换不同浏览器内核打开加载了该动画元素的第一CSS样式和第二CSS样式的动画配置页面，以使在上述动画配置页面中预览该动画元素的动画效果。具体的，在任一浏览器中打开加载该动画元素的动画配置结果页面，检测打开上述动画配置结果页面的浏览器内核类型，运行上述第一CSS样式和第二CSS样式中上述浏览器内核类型对应的兼容前缀的样式描述语句，从而显示通过该动画元素的动画效果标识和动画配置参数确定该动画元素的动画配置结果，显示该动画配置结果对应的动画效果。可选的，通过在不同浏览器中显示该动画元素进行动画配置后的动画效果，从而确保该动画元素的动画兼容性配置成功，并确定上述动画效果为用户所需的动画效果。

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

在一些可行的实施方式中，当接收到针对该动画元素的动画效果的确认指令，则将该动画元素的第一CSS样式和第二CSS样式导出，并将上述第一CSS样式和第二CSS样式加入目标页面代码中。具体的，用户在不同浏览器上查看了该动画元素的动画效果后，若达到该用户的动画效果要求，则该用户可以点击动画配置确认按钮，当检测到该动画配置确认按钮被点击，即接收到该动画元素的动画效果的确认指令，将最终得到的该动画元素的第一CSS样式和第二CSS样式导出，并将上述第一CSS样式和第二CSS样式添加到目标页面中该动画元素对应的样式描述代码中。

可选的，可以直接在目标页面的html标签元素内嵌入上述第一CSS样式和第二CSS样式，即直接在该动画元素的描述标签内的div中加入上述第一CSS样式和第二CSS样式，得到“<div>第一CSS样式</div><div>第二CSS样式</div>”，实现对该动画元素的动画配置。

可选的，可以对目标页面的html文档中头部head部分内的style声明进行处理，将上述第一CSS样式和第二CSS样式插入上述style声明中，对该动画元素进行动画样式描述，即通过对目标页面中的该动画元素设置选择器，在上述style声明中通过对该动画元素的选择器进行描述，从而实现对该动画元素的动画配置。其中，上述选择器可以包括：id选择器、class选择器、元素名称选择器、复合选择器、属性选择器和层次选择器等。具体的，假定该动画元素在目标页面中的选择器是使用id选择器，则假设该动画元素的id＝big-rotate，从而得到“<style type＝"text/css"><！--#big-rotate{第一CSS样式；第二CSS样式}--></style>”。

可选的，可以使用@import引用外部CSS文件，即将上述第一CSS样式和第二CSS样式导出，以.css文件存储，在目标页面的html文件中头部head内style声明部分引用，得到“<style type＝"text/css"><！--@import url(第一CSS样式.css)；@import url(第二CSS样式.css)；--></style>”。

可选的，可以在目标页面的html描述的头部head中添加“<link rel＝"stylesheet"href＝"第一CSS样式.css"type＝"text/css"/><link rel＝"stylesheet"href＝"第二CSS样式.css"type＝"text/css"/>”，从而实现对该动画元素的动画配置描述。

上述可选的将该动画元素的第一CSS样式和第二CSS样式添加到目标页面中该动画元素对应的样式描述代码中的方法仅为列举的部分可选实施方式，也可以使用其他CSS样式的引用方式。

本发明实施例提供的Web端动画配置过程，是通过获取用户输入的针对动画元素的动画效果标识和动画配置参数，根据上述动画效果标识和动画配置参数生成该动画元素的CSS样式，在获取到该动画元素的动画效果确认指令后，将上述CSS样式加入目标页面中该动画元素的样式描述代码中，实现该动画元素的动画配置，简化动画配置过程，提高了动画配置效率。

本发明实施例提供的方法可基于上述图1所示的各个步骤所生成的CSS样式对动画元素进行动画配置，下面将结合图2a至2c对本发明实施例提供的方法进行说明。

可选的，在一种可能的动画配置方法中，参见图2a至2c，图2a至2c是本发明实施例提供的一种可选Web端动画配置方法的页面示意图。其中，如图2a所示，图2a是本发明实施例提供的一种可选Web端动画配置方法的页面示意图。具体的，如图2a所示，在动画配置页面20中包括动画播放页面201和动画样式描述页面202。当用户需要对某个动画元素进行动画配置时，在上述动画配置页面20中的动画播放页面201中上传动画元素2011。当获取到该用户在动画播放页面201中导入的动画元素2011后，可选的，可以在动画样式描述页面202中显示该动画元素2011的CSS样式描述代码，同时显示动画配置选择界面203。

具体参见图2b，图2b为本发明实施例提供的一种动画配置选择界面示意图。如图2b所示，在该动画配置选择界面203初始显示时为初始动画配置203a所示，经过配置后的动画配置选择界面203显示如生成动画配置203b所示。

具体的，该初始动画配置203a中，该动画元素2011的动画配置初始值包括：name初始值为none，duration初始值为0s，timing-function初始值为ease，delay初始值为0s，iteration-count初始值为1，direction初始值为normal，具体的可参见初始动画配置203a。其中，在本发明实施例中存储有预定义第一CSS样式和预定义第二CSS样式，可以参见图2a中动画样式描述页面202中所示，包括两部分：第一CSS样式2021和第二CSS样式2022。

具体的，上述预定义第一CSS样式中的各个动画属性的配置参数均为默认值，上述预定义第二CSS样式中包括多段CSS样式代码，每段CSS样式代码描述一种动画运动轨迹。其中，预定义第一CSS样式和预定义第二CSS样式通过加不同的兼容前缀来支持不同的浏览器内核，具体的实现过程如上述图1中的步骤S102中所示。

具体的，这里假定获取到该用户针对该动画元素2011输入的动画效果标识和动画配置参数为对name、duration、timing-function、delay、iteration-count、direction的配置，其中，name值对应的是动画效果标识。具体的，具体的，可参见生成动画配置203b，假定获取到该用户针对该动画元素输入的动画效果标识为big-rotate，该动画效果标识为预定义可选项，即name的值为预先定义好的一组预定义可选项，每个预定义可选项对应一种运动轨迹；动画配置参数包括：duration值为3s，为该动画元素的动画过程时长；timing-function的值为linear，为该动画元素的动画速度参数，表示该动画匀速运动，可选的，也可以是其他CSS的animation中包括的timing-function函数值或自定义cubic-bezier(n,n,n,n)函数值；delay的值为1s，为该动画元素的动画开始延时；iteration-count的值为2，为该动画元素的动画播放次数；direction的值为normal，为该动画元素是否轮流反向播放，表示动画正常播放，可选的，还可以为alternate，表示该动画应该轮流反向播放。可选的，可以将上述duration、delay可以以毫秒ms为单位。

当获取到该用户针对该动画元素输入的动画效果标识和动画配置参数后，若检测到该用户点击确认按钮，即若接收到该动画元素的动画配置确认请求，更新动画样式描述页面202中的CSS样式代码。对服务器中的预定义第一CSS样式和预定义第二CSS样式进行配置，通过将上述动画效果标识和动画配置参数添加至上述预定义第一CSS样式中生成第一CSS样式。具体的，将获取到的动画效果标识和动画配置参数替换上述预定义第一CSS样式中的对应动画属性的默认值，从而生成第一CSS样式，在第一CSS样式显示2021中进行显示。

根据上述动画效果标识从上述预定义第二CSS样式中选取对应的样式描述代码段，可知上述动画效果标识为big-rotate，则从第二CSS样式中选择keyframes选择器名称为big-rotate的多个样式描述代码段，再根据上述动画速度参数确定具体的第二CSS样式。具体的上述动画运动速度参数为linear，可知该动画元素的动画从头至尾的速度是相同的，则从上述keyframes选择器名称为big-rotate的多个样式描述代码段中查找符合linear运动速度变化规律的样式描述代码段，该样式描述代码段即为第二CSS样式，以每帧3度的角度进行旋转运动，得到符合linear运动速度变化规律的第二CSS样式，并在第二CSS样式显示2022中进行显示。

可选的，在上述动画播放页面201中加载上述第一CSS样式和第二CSS样式，并显示该动画元素的动画效果，具体可参见图2c所示，图2c是该动画元素的第一CSS样式和第二CSS样式对应的动画效果。具体的，由上述第一CSS样式可知，该动画元素将在打开目标页面1s后开始显示动画效果，于3s内匀速顺时针旋转一周，循环两次。具体的，如图2c所示，动画元素2011以左图所示顺时针匀速旋转，左图是该动画元素2011在每一帧的动画状态。具体过程如右图所示，动画元素2011以动画元素状态2011.0为初始状态；第一帧旋转3度得到动画元素状态2011.1；第二帧旋转7度，得到动画元素状态2011.2；第三帧旋转10度，得到动画元素状态2011.3；……；第25帧旋转90度，得到动画元素状态2011.25；……；第100帧旋转360度，得到动画元素状态2011.100。上述每一帧的动画元素状态是同一个中心点，如图2c中左图所示。重复上述顺时针匀速旋转过程，即播放两次上述顺时针匀速旋转过程，完成该动画元素2011的动画效果显示。可以保存该动画配置页面20，在不同浏览器上运行该动画配置页面20，在动画播放页面201中显示该动画元素2011的动画效果，以使用户可以确认最终的动画效果是否达到要求。

可选的，若接收到该动画元素的动画效果的确认指令后，将上述第一CSS样式和第二CSS样式添加至目标页面中该动画元素对应的样式描述代码中，具体过程如图1所示步骤S104所示，具体不再赘述。

可选的，若接收到该动画元素的动画配置更改指令，则重复如图2a至2c的过程，得到更改后的第一CSS样式和第二CSS样式，具体不再赘述。

可选的，参见图3，图3是本发明实施例提供的一种Web端动画配置装置示意图，如图3所示，该Web端动画配置装置可以用于上述图1所对应实施例中的终端设备，具体的，该装置可以包括：交互模块301、处理模块302、显示模块303和确认模块304。

交互模块301，用于获取用户在动画配置页面导入的动画元素，并接收上述用户针对该动画元素输入的动画效果标识和动画配置参数；

处理模块302，用于根据上述动画效果标识和动画配置参数生成针对该动画元素的第一CSS样式和第二CSS样式；

显示模块303，在上述动画配置页面中加载该动画元素的第一CSS样式和第二CSS样式，以使在上述动画配置页面中预览该动画元素的动画效果；

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

其中，上述处理模块302还用于：

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

其中，上述处理模块302还用于：

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

其中，上述处理模块302还用于：

根据上述动画效果标识和动画配置参数生成针对该动画元素的第一CSS样式中的基础动画属性和第二CSS样式中的样式描述代码，其中，上述基础动画属性包括多个不同兼容前缀的基础动画属性描述，上述样式描述代码包括多个不同兼容前缀的样式描述语句，具体的，每个兼容前缀的基础动画属性描述和样式描述语句用于被该兼容前缀对应的浏览器内核识别和执行。

其中，上述显示模块303还用于：

切换不同浏览器内核打开加载了该动画元素的第一CSS样式和第二CSS样式的动画配置页面，以使在上述动画配置页面中预览该动画元素的动画效果。

可选的，上述确认模块304还用于：

在接收到针对该动画元素的动画配置参数更改指令后，调用上述交互模块，从而使得该装置继续执行上述如图1所示实施例中步骤。

具体实现中，上述装置可通过上述各个模块执行上述图1所提供的实现方式，实现上述各实施例中所实现的功能，具体可参见上述图1所示的方法实施例中各个步骤提供的相应描述，在此不再赘述。

本发明实施例提供了一种Web端动画配置装置，上述装置通过将获取到的动画元素对应的用户输入数据转换成该动画元素的CSS样式，从而直接得到该动画元素的动画样式描述代码，其中，上述用户输入数据为该用户输入的关于该动画元素的动画效果标识和动画配置参数。同时在接收到该动画元素的动画效果确认指令后，将上述CSS样式添加至目标页面中该动画元素对应的样式描述代码段中，从而简化了动画配置过程，提高动画配置效率。而对上述CSS样式中不同兼容前缀的CSS样式描述进行配置，提高了该CSS样式的兼容性，使得该动画元素在不同的浏览器中有相同的动画效果。

参见图4，图4是本发明实施例提供的一种终端设备的结构示意图。如图4所示，本实施例中的终端设备可以包括：一个或多个处理器401、存储器402和输入输出接口403。上述处理器401、存储器402和输入输出接口403通过总线404连接。其中，上述输入输出接口用于页面交互，上述存储器402用于存储计算机程序，该计算机程序包括程序指令；处理器401用于执行存储器402存储的程序指令，执行如下操作：

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

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

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

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

在一些可行的实施方式中，上述处理器401用于：

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

在一些可行的实施方式中，上述处理器401用于：

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

在一些可行的实施方式中，上述处理器401还用于：

切换不同浏览器内核打开加载了该动画元素的第一CSS样式和第二CSS样式的动画配置页面，以使在上述动画配置页面中预览该动画元素的动画效果。

在一些可行的实施方式中，上述处理器401可以是中央处理单元(centralprocessing unit，CPU)，该处理器还可以是其他通用处理器、数字信号处理器(digitalsignal processor，DSP)、专用集成电路(application specific integrated circuit，ASIC)、现成可编程门阵列(field-programmable gate array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

该存储器402可以包括只读存储器和随机存取存储器，并向处理器401和输入输出接口403提供指令和数据。存储器402的一部分还可以包括非易失性随机存取存储器。例如，存储器402还可以存储设备类型的信息。

具体实现中，上述终端设备可通过其内置的各个功能模块执行如上述图1中各个步骤所提供的实现方式，具体可参见上述图1中各个步骤所提供的实现方式，在此不再赘述。

本发明实施例通过提供一种终端设备，包括：处理器、存储器、输入输出接口，通过处理器获取存储器中的计算机指令，执行上述图1中所示方法的各个步骤，进行Web端动画配置操作。通过存储器中的计算机指令，处理器执行Web端对动画元素的动画配置过程，得到该动画元素的CSS样式，将该CSS样式加入目标页面中该动画元素对应的样式描述代码段中，从而简化动画配置的过程，提高动画配置效率，同时得到的不同兼容前缀的CSS样式代码段实现了对于该动画元素的动画兼容性配置，使得该动画元素的动画在不同浏览器上有同样的动画效果，从而统一了动画表现形式。

本发明实施例还提供一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序包括程序指令，该程序指令被处理器执行时实现图1中各个步骤所提供的Web端动画配置方法，具体可参见上述图1所示各个步骤所提供的实现方式，在此不再赘述。

上述计算机可读存储介质可以是前述任一实施例提供的Web端动画配置装置或者上述终端设备的内部存储单元，例如电子设备的硬盘或内存。该计算机可读存储介质也可以是该电子设备的外部存储设备，例如该电子设备上配备的插接式硬盘，智能存储卡(smart media card,SMC)，安全数字(secure digital,SD)卡，闪存卡(flash card)等。进一步地，该计算机可读存储介质还可以既包括该电子设备的内部存储单元也包括外部存储设备。该计算机可读存储介质用于存储该计算机程序以及该电子设备所需的其他程序和数据。该计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的数据。

本发明实施例的说明书和权利要求书及附图中的术语“第一”、“第二”等是用于区别不同对象，而非用于描述特定顺序。此外，术语“包括”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、装置、产品或设备没有限定于已列出的步骤或模块，而是可选地还包括没有列出的步骤或模块，或可选地还包括对于这些过程、方法、装置、产品或设备固有的其他步骤单元。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

本发明实施例提供的方法及相关装置是参照本发明实施例提供的方法流程图和/或结构示意图来描述的，具体可由计算机程序指令实现方法流程图和/或结构示意图的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。这些计算机程序指令可提供到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或结构示意图一个方框或多个方框中指定的功能的装置。这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或结构示意图一个方框或多个方框中指定的功能。这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或结构示意一个方框或多个方框中指定的功能的步骤。

实施本发明实施例，将具有如下有益效果：

采用了Web端动画配置方法和装置之后，用户只需要添加对于动画元素的动画效果标识和动画配置参数，该装置可以直接通过上述动画效果标识和动画配置参数查找并修改预定义CSS样式，从而得到该动画元素的CSS样式，并将该动画元素配置后的动画效果进行显示，从而让用户可以直观的查看该动画元素的动画效果，实现了动画配置中CSS样式一次编写，多次使用，从而简化了动画配置过程，提高动画配置效率。

以上所揭露的仅为本发明较佳实施例而已，当然不能以此来限定本发明之权利范围，因此依本发明权利要求所作的等同变化，仍属本发明所涵盖的范围。

Claims (10)

1.一种Web端动画配置方法，其特征在于，包括：

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

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

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

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

2.根据权利要求1所述的方法，其特征在于，所述动画配置参数包括：动画过程时长、动画速度参数、动画开始延时以及动画播放次数；

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

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

3.根据权利要求2所述的方法，其特征在于，所述根据所述动画效果标识确定所述动画元素的运动轨迹，并结合所述动画配置参数确定所述动画元素在所述动画过程时长中每一帧的元素动画状态包括：

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

4.根据权利要求1所述的方法，其特征在于，所述动画元素的第二CSS样式中的样式描述代码包括多个不同兼容前缀的样式描述语句，其中每个兼容前缀的样式描述语句用于被该兼容前缀对应的浏览器内核识别和执行。

5.根据权利要求1所述的方法，其特征在于，所述动画元素的第一CSS样式包括多个不同兼容前缀的基础动画属性描述，其中每个兼容前缀的基础动画属性描述用于被该兼容前缀对应的浏览器内核识别和执行。

6.根据权利要求4或5所述的方法，其特征在于，所述兼容前缀包括：

-webkit-、-moz-、-o-或-ms-。

7.根据权利要求4或5所述的方法，其特征在于，在所述动画配置页面中加载所述动画元素的第一CSS样式和第二CSS样式，以使在所述动画配置页面中预览所述动画元素的动画效果包括：

切换不同浏览器内核打开加载了所述动画元素的第一CSS样式和第二CSS样式的动画配置页面，以使在所述动画配置页面中预览所述动画元素的动画效果。

8.一种Web端动画配置装置，其特征在于，所述装置包括：

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

处理模块，用于根据所述动画效果标识和动画配置参数生成针对所述动画元素的第一CSS样式和第二CSS样式；

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

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

9.一种Web端动画配置装置，其特征在于，包括处理器、存储器、输入输出接口；

所述处理器分别与所述存储器和所述输入输出接口相连，其中，所述输入输出接口用于页面交互，所述存储器用于存储程序代码，所述处理器用于调用所述程序代码，以执行如权利要求1-7任一项所述的方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时，执行如权利要求1-7任一项所述的方法。