CN109741427A - 动画数据处理方法、装置、电子设备及存储介质 - Google Patents

Abstract

本公开提出一种动画数据处理方法、装置、电子设备及存储介质，涉及前端开发技术领域。所述方法包括：获取动画素材的参数，其中，所述动画素材的参数包括至少一个关键帧的状态值，基于所述动画素材的参数以及预设的代码段生成算法，分别生成对应各关键帧的代码段，基于所述至少一个关键帧对应的代码段，生成所述动画素材，并存储至动画素材库中。本公开能够提高配置动画的效率，节省成本。

Description

动画数据处理方法、装置、电子设备及存储介质

技术领域

本公开涉及前端开发技术领域，具体而言，涉及一种动画数据处理方法、装置、电子设备及存储介质。

背景技术

随着信息化社会以及前端开发技术的高速发展，数据可视化的应用越来广泛。数据可视化能够通过图形化手段，对数据加以可视化解释，从而清晰有效与用户进行交互。其中，动画是一种重要的数据可视化手段。

现有技术中，可以针对主题包括的各组件(widget)，分别通过人工编写应用于该组件的动画所对应的动画代码，该动画代码即可作为动画配置数据。之后，在展示组件时，可以基于该动画配置数据，加载该动画，从而动画展示该组件。但在由于需要通过人工编写动画代码，不仅成本较高而且效率低下。

发明内容

本公开实施例的目的在于提供一种动画数据处理方法、装置、电子设备及存储介质，以提高配置动画的效率，节省成本。

为了实现上述目的，本公开实施例采用的技术方案如下：

第一方面，本公开实施例提出一种动画数据处理方法，所述方法包括：

获取动画素材的参数，其中，所述动画素材的参数包括至少一个关键帧的状态值；

基于所述动画素材的参数以及预设的代码段生成算法，分别生成对应各关键帧的代码段；

基于所述至少一个关键帧对应的代码段，生成所述动画素材，并存储至动画素材库中。

第二方面，本公开实施例还提出一种动画数据处理装置，所述装置包括：

第一获取模块，用于获取动画素材的参数，其中，所述动画素材的参数包括至少一个关键帧的状态值；

第一生成模块，用于基于所述动画素材的参数以及预设的代码段生成算法，分别生成对应各关键帧的代码段；

第二生成模块，用于基于所述至少一个关键帧对应的代码段，生成所述动画素材，并存储至动画素材库中。

第三方面，本公开实施例还提出一种电子设备，包括存储有计算机程序的计算机可读存储介质和处理器，所述计算机程序被所述处理器读取并运行时，实现上述第一方面所述的方法。

第四方面，本公开实施例还提出一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器读取并运行时，实现上述第一方面所述的方法。

相对现有技术，本公开实施例具有以下有益效果：

在本公开实施例中，由于对组件进行动画展示的一个完整的动画过程可以包括至少一个连续的动画素材，一个动画素材即可作为该动画过程中的一个动作，同一动画素材可以应用于不同的动画过程中，而一个动画素材可以包括多个关键帧。因此能够获取至少一个关键帧的状态值等动画素材的参数，从而基于动画素材的参数以及预设代码生成算法，生成对应各关键帧的代码段，并基于至少一个关键帧所对应的代码段生成动画素材，从而实现了动画素材的自动化生成，且所生成的动画素材能够复用于不同动画过程，不仅避免了需要用户手动针对各组件编写动画代码的问题，提高了生成动画素材的效率，节省成本。

本公开的其他特征和优点将在随后的说明书阐述，并且，部分地从说明书中变得显而易见，或者通过实施本公开实施例了解。本公开的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

附图说明

为了更清楚地说明本公开实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本公开的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本公开实施例所提供的一种动画数据处理方法的流程示意图；

图2示出了本公开实施例所提供的一种动画素材的参数接收页面示意图；

图3示出了本公开实施例所提供的另一种动画数据处理方法的流程示意图；

图4示出了本公开实施例所提供的一种动画分组配置页面示意图；

图5示出了本公开实施例所提供的又一种动画数据处理方法的流程示意图；

图6示出了本公开实施例所提供的一种主题的数据存储结构示意图；

图7示出了本公开实施例所提供的一种动画数据处理装置的功能模块示意图；

图8示出了本公开实施例所提供的另一种动画数据处理装置的功能模块示意图；

图9示出了本公开实施例所提供的又一种动画数据处理装置的功能模块示意图；

图10示出了本公开实施例所提供的又一种动画数据处理装置的功能模块示意图；

图11示出了本公开实施例所提供的又一种动画数据处理装置的功能模块示意图；

图12示出了本公开实施例所提供的又一种动画数据处理装置的功能模块示意图；

图13示出了本公开实施例所提供的又一种动画数据处理装置的功能模块示意图；

图14示出了本公开实施例所提供的一种电子设备的功能模块示意图。

具体实施方式

下面将结合本公开实施例中附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本公开实施例的详细描述并非旨在限制要求保护的本公开的范围，而是仅仅表示本公开的选定实施例。基于本公开的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。同时，在本公开的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

请参照图1，为本公开实施例所提供的一种动画数据处理方法的流程示意图。需要说明的是，本公开实施例所述的动画数据处理方法并不以图1以及以下所述的具体顺序为限制，应当理解，在其它实施例中，本公开实施例所述的动画数据处理方法其中部分步骤的顺序可以根据实际需要相互交换，或者其中的部分步骤也可以省略或删除。下面将对图1所示的流程进行详细阐述。

步骤101，获取动画素材的参数，其中，该动画素材的参数包括至少一个关键帧的状态值。

由于对组件进行动画展示的一个完整的动画过程可以包括至少一个连续的动画素材的展示，其中，一个动画素材即的展示即可作为该动画过程中的一个动作，并可以包括至少一个关键帧，且同一动画素材可以应用于不同的组件展示的动画过程中。因此，为了避免针对各组件的动画过程都需要分别重新编写动画代码的问题，提高配置动画的效率，可以生成能够复用于不同组件的动画过程的动画素材，且为了避免需要用户手动编写动画代码的问题，实现生成动画素材的自动化，提高生成动画素材的效率，节省成本，可以获取动画素材的参数。

其中，组件，或称微件，是一块可以在任意Web页面上执行的对象。

本公开实施例中，一个大屏主题至少包括一个或多个组件，可以针对各组件设置对应的动画分组。例如，假设大屏主题1包括组件1，组件2，组件3和组件4，那么，即可将组件1设置为动画分组1，组件1和组件3设置为动画分组2，组件4设置为动画分组3。

一个或多个动画素材可用于生成对应于动画分组的动画配置数据，该动画配置数据用于指示任一动画分组对应的任一组件的动画过程。

需要说明的是，动画配置数据为说明动画过程相关配置的数据，比如该动画配置数据能够说明动画过程所包括的动画素材以及各动画素材的播放次序等。

还需要说明的是，动画分组为按照动画展示方式对组件进行的分组，一个动画分组可以对应一个或多个组件，且该一个或多个组件可以通过相同的动画展示方式进行展示。

关键帧的状态值用于说明动画展示过程中，组件在该关键帧中的状态，比如该组件在该关键帧中的位置、角度、尺寸等。或者，在本公开的另一可选实施例中，关键帧的状态值也可以用于说明组件从前一关键帧中的状态变化至当前关键帧中的状态的状态变化，比如，相对与组件在前一关键帧中的位置变化、角度变化、缩放比例等。

另外，在实际应用中，动画素材的参数还可以包括其它与动画素材有关的信息，比如，关键帧位置和动画素材标识、循环次数和持续时间中的一个或多个。

关键帧位置为关键帧在动画素材的时间轴上的位置，比如，0％即表示该关键帧为该动画素材开始播放时的关键帧，50％即表示该关键帧在该动画素材播放至50％时的关键帧，100％即表示该关键帧在该动画素材播放结束时的关键帧。

动画素材标识用于对动画素材进行标识，该动画素材标识可以包括动画素材名称。

可选地，可以通过可视化界面，接收提交的动画素材的参数。

由于可视化界面能够提高与用户进行交互的效果和效率，因此为了提高接收动画素材的参数的准确性和效率，可以向用户提供可视化界面，从而通过该可视化界面来接收用户提交的动画素材的参数。

其中，可以向用户提供动画素材的参数接收页面，该参数接收页面包括动画素材的参数接收入口，从而通过该动画素材的参数接收入口接收提交的动画素材的参数。

例如，一种动画素材的参数接收页面可以如图2所示。由图2可知，该动画素材的参数接收页面包括效果设置区，且该效果设置区包括变形原点设置区和变形参数设置区。变形原点设置区包括X轴原点位置和Y轴原点位置，并分别提供了输入框、下拉菜单和滑动条等多种形式的动画素材的参数接收入口。其中，变形原点可以为在组件在前一关键帧中变化之后所在的位置。变形参数设置区包括旋转角度、X轴缩放大小、Y轴缩放大小、X轴定位、Y轴定位、X轴倾斜、Y轴倾斜以及是否加阴影的复选框。其中，变形参数为将组件在前一关键帧中的状态变化至在当前关键帧中的状态所需的参数，X轴定位和Y轴定位可以说明该组件在当前关键帧变化结束时的所处位置。且由于图2还可知，变形原点的坐标为(0，0)，变形的旋转角度为0，X轴和Y轴的缩放大小均为1，变形之后的原点所在的坐标为(0，0)，X轴和Y轴倾斜角度均为0。

需要说明的是，上述X轴原点位置、Y轴原点位置、旋转角度、X轴缩放大小、Y轴缩放大小、X轴定位、Y轴定位、X轴倾斜、Y轴倾斜和是否加阴影即可以作为关键帧的状态值的类型。

还需要说明的是，在实际应用中，动画素材的参数接收页面可以包括至少一个效果设置区，各效果设置区可以分别对应一个关键帧。

当然，在实际应用中，还可以通过其它方式，获取动画素材的参数，比如从特定格式的配置文件中获取等。

步骤102，基于动画素材的参数以及预设的代码段生成算法，分别生成对应各关键帧的代码段。

为了尽可能减少配置动画过程对用户依赖，提高生成动画素材和配置动画的自动化和效率，可以基于前述步骤得到的关键帧的状态值以及预设代码生成算法，得到针对各关键帧的代码段。

其中，预设代码段生成算法用于基于关键帧的状态值，生成对应该关键帧的代码段，也即是，将从用户所能识别的关键帧的状态值转换为计算机能够识别的程序代码。

需要说明的是，预设代码段生成算法可以通过事先确定，比如通过接收用户提交得到。

可选地，预设代码段生成算法可以是基于CSS3(Cascading Style Sheets Level3，层叠样式表)的算法，从而能够生成得到基于CSS3的代码段。

由于一方面JS(JavaScript，一种脚本语言)来实现动画配置需要针对每个动画过程设置定时器函数或计时器函数，从而导致展示主题的浏览器布局颠簸，而CSS3能够避免内存消耗，并能够使用硬件加速，提高动画性能；另一方面，与JS相比，CSS3能够通过更为简洁的算法实现相同复杂程度的动画过程；且还能够确保后续通过动画分组的方式，进行复杂高效的动画配置，因此，预设代码段生成算法可以是基于CSS3的算法。

其中，主题可以为电子设备界面的风格，包括色彩、组件以及其布局等。

可以通过该预设代码生成算法，基于关键帧的状态值的类型，确定对应的代码指令，基于该代码指令以及关键帧的状态值参数，生成对应该关键帧的代码段。

例如，以如图2所示的动画素材的参数接收页面接收到的关键帧的状态值为例，基于旋转角度，确定与旋转角度对应的代码指令为rotate()，与X轴和Y轴的缩放大小对应的代码指令为scale()，与X轴原点位置、Y轴原点位置、X轴定位和Y轴定位对应的代码指令为translate()，与X轴和Y轴倾斜对应的代码指令为skew()，因此，生成对应该关键帧的代码段为transform:rotate(0deg)scale(1.00,1.00)translate(0px,0px)skew(0deg,0deg)；transform-origin:0％0％。其中，transform-origin:0％0％表示旋转的中心点不偏移。

另外，在本公开的另一可选实施例中，可以获取预设代码段模板，通过该预设代码生成算法，基于该关键帧的状态值的类型，确定该关键帧的状态值在该预设代码段模板中的位置，将该关键帧的状态值添加至所确定的位置，从而得到与该关键帧对应的代码段。

其中，预设代码段模板可以包括事先设置的固定代码以及预留的用于添加关键帧的状态值的位置，该预设代码段模板可以通过事先确定得到。

步骤103，基于至少一个关键帧对应的代码段，生成动画素材，并存储至动画素材库中。

由于关键帧的代码段与动画素材包括的关键帧对应，因此，可以基于至少一个关键帧对应的代码段，生成动画素材。

可以获取预设动画素材模板，该预设动画素材模板中对应关键帧的代码段的位置设置有字符串变量，从而可以通过将对应该关键帧的代码段赋值至对应的字符串变量，以将该关键帧的代码段添加至预设动画素材模板。

需要说明的是，预设动画素材模板可以通过事先确定得到，比如通过接收用户提交的模板得到。

例如，得到的至少一个关键帧对应的代码段包括：代码段1：{transform:rotate(0deg)scale(1.00,1.00)translate(0px,0px)skew(0deg,0deg)；transform-origin:0％0％。代码段2：{transform:rotate(0deg)scale(1.00,1.00)translate(0px,0px)skew(0deg,1deg)；transform-origin:0％0％。代码段3：{transform:rotate(0deg)scale(1.00,1.00)translate(0px,0px)skew(0deg,45deg)；transform-origin:0％0％。预设动画素材模板如下所示：

其中，animation1为与关键帧的代码段1对应的字符串变量，animation2为与关键帧的代码段2对应的字符串变量，animation3为与关键帧的代码段3对应的字符串变量，将关键帧的代码段1、关键帧的代码段2和关键帧的代码段3分别赋值至animation1、animation2和animation3，生成得到动画素材可以如下所示：

其中，该动画素材的动画素材名称为trans，可以从正方形逐帧变为平行四边形，动画循环一次，持续时间为1s，且0s～0.5s变形1度，0.5s～1s变形44度。

需要说明的是，在实际应用中，也可以通过其它方式，基于至少一个关键帧对应的代码段生成动画素材，比如，可以通过预设动画素材生成算法，基于JS对至少一个关键帧对应的代码段进行拼接，从而得到动画素材。

其中，预设动画素材生成算法可以通过预先设置得到，比如，可以通过用户提交得到。

另外，在实际应用中，可以通过程序或者插件来执行本公开所提供的动画数据处理方法。

可选地，该程序或插件可以通过同一可视化界面的不同区域，分别接收前述中的关键帧的状态值、展示所生成的动画素材。

当生成动画素材时，为了便于后续应用，包括配置动画或者动画展示相应的组件，可以将该动画素材存储至动画素材库。

动画素材库用于存储动画素材。

需要说明的是，动画素材可以以特定格式的文件存储，比如.less格式的文件中。

在本公开实施例中，由于对组件进行动画展示的一个完整的动画过程可以包括至少一个连续的动画素材的展示，一个动画素材的展示即可作为该动画过程中的一个动作，同一动画素材可以应用于不同的动画过程中，而一个动画素材可以包括多个关键帧。因此能够获取一个动画参数对应的多个关键帧的状态值等动画素材的参数，从而基于动画素材的参数以及预设代码生成算法，生成对应各关键帧的代码段，并基于各关键帧所对应的代码段生成动画素材，从而实现了动画素材的自动化生成，且所生成的动画素材能够复用于不同动画过程，不仅避免了需要用户手动针对各组件编写动画代码的问题，提高了生成动画素材的效率，节省成本。

请参照图3，为本公开实施例所提供的一种动画数据处理方法的流程示意图。需要说明的是，本公开实施例所述的动画数据处理方法并不以图3以及以下所述的具体顺序为限制，应当理解，在其它实施例中，本公开实施例所述的动画数据处理方法其中部分步骤的顺序可以根据实际需要相互交换，或者其中的部分步骤也可以省略或删除。下面将对图3所示的流程进行详细阐述。

步骤301，获取动画素材的参数，其中，该动画素材的参数包括至少一个关键帧的状态值。

步骤302，基于动画素材的参数以及预设的代码段生成算法，分别生成对应各关键帧的代码段。

步骤303，基于至少一个关键帧对应的代码段，生成动画素材，并存储至动画素材库中。

需要说明的是，执行步骤301-303的方式，可以参见前述步骤101-103中的相关描述，此处不再一一赘述。

步骤304，基于动画素材生成动画配置数据。

由前述可知，一个动画素材可以作为一个完整的动画过程中的一个动作，而该动画过程可以适用于一个以上的组件，因此为了解决分别针对各组件编写动画代码，从而在展示多个组件需要多次读取动画代码的问题，提高生成动画的效率，可以生成能够使多个组件复用的动画配置数据。另外，基于动画素材生成动画配置数据，由于能够将一个以上的动画素材进行组合，从而确保了能够实现更加复杂多样的动画过程，提高了动画配置效果。

其中，动画配置数据可以包括动画分组标识、动画素材标识以及各动画素材的播放次序。当然，在实际应用中，该动画配置数据还可以包括更多或更少的信息，比如还可以包括动画素材。

动画分组包括至少一个动画素材，该至少一个动画素材按播放次序播放即为一个完整的动画过程。

动画分组标识用于对动画分组进行标识，该动画分组标识可以包括动画分组序号和动画分组ID(Identification，身份证)，其中，动画分组ID为该动画分组的唯一标识。

可选地，为了提高与用户交互的效果和效率，进一步提高配置动画的准确性和效率，可以基于可视化界面，来基于动画素材生成动画配置数据。

其中，可以通过动画分组配置页面来接收交的动画配置数据，该动画分组配置页面可以包括动画配置数据接收入口。

例如，一种动画分组配置页面可以如图4所示。由图4可知，该动画分组配置页面包括动画分组选择窗口、在该动画分组选择窗口的右侧依次设置有动画分组新建按钮和动画分组删除按钮。当基于动画分组选择窗口接收到用户的选择操作时，可以以下拉菜单的形式展示至少一个已创建的动画分组标识，从而便于用户对该动画分组标识对应的动画分组进行编辑。当基于动画分组新建按钮接收到选择操作时，可以在该动画分组选择窗口增加一个动画分组。当基于动画分组删除按钮接收到选择操作时，可以将该动画分组选择窗口当前展示的动画分组进行删除。该动画分组配置页面还包括素材选择窗口、持续时间输入框和循环次数输入框，该素材选择窗口的左侧展示有动画素材在当前动画分组中的序号“动作1”。当基于该素材选择窗口接收到选择操作时，可以以下拉菜单形式展示当前动画管理素材库包括的至少一个动画素材。该动画分组配置页面还包括添加素材按钮，当基于该添加素材按钮接收到选择操作时，可以在当前的动画分组中新增加一个动画素材，新建的动画素材可以来源于动画管理素材库。该动画分组配置页面还包括保存设置按钮和取消设置按钮。若基于保存设置按钮接收到选择操作，则可以对当前配置的动画分组进行保存，得到动画配置数据。若基于取消设置按钮接收到选择操作，则可以停止生成动画配置数据。另外，各动画素材在该动画分组配置页面中的次序，即为该动画素材在动画过程中的播放次序，因此，可以通过有序地在该动画分组配置页面中创建多个动画素材，来确定该多个动画素材的播放次序，或者，可以基于动画素材接收用户的拖拽操作，当该拖拽操作结束时，该动画素材在该多个动画素材中的次序，即为该动画素材的播放次序。

可选地，由前述可知，一个动画分组对应一个或多个组件，相应的，可以确定针对任一动画分组设置的一个或多个动画素材，接收针对一个或多个动画素材设定的播放次序，基于一个或多个动画素材的播放次序，生成任一动画分组对应的动画配置数据，该动画配置数据用于指示该任一动画分组对应的任一组件的动画过程。

由前述可知，可以在生成动画素材的过程中，确定该动画素材的持续时间和循环次数，因此，为了提高配置动画的效率，在生成动画配置数据时，不再对动画素材的持续时间和循环次数进行设置。

其中，还可以通过前述中的动画分组配置页面，来从动画管理素材库获取多个动画素材、以及各动画素材的播放次序。

可选地，可以接收分别针对一个或多个动画素材设定的持续时间和循环次数，相应的，可以基于一个或多个动画素材的播放次序、分别针对各动画素材设定的持续时间和循环次数，生成任一动画分组对应的动画配置数据。

由于在生成动画素材的过程中也可能并未设置动画素材的播放时间或循环次数，或者，在生成动画素材的过程中所设置的动画素材的播放时间或循环次数，不满足当前的动画分组的需求，因此，为了更加准确地对动画进行配置，还可以获取分别针对各动画素材指定的播放时间和循环次数，从而基于一个或多个动画素材的播放次序、分别针对各动画素材设定的持续时间和循环次数，生成动画配置数据。

其中，可以通过前述中的动画分组配置页面，来从动画管理素材库获取多个动画素材、各动画素材的播放次序、分别针对各动画素材的播放时间和循环次数。

另外，对于针对任一动画分组生成的动画配置数据，可以将该动画配置数据与动画分组标识对应存储，以便于后续对该动画分组对应的动画配置数据进行其它处理，比如编辑或者具体应用与某个主题等。

在本公开实施例中，首先，由于对组件进行动画展示的一个完整的动画过程可以包括至少一个连续的动画素材，一个动画素材即可作为该动画过程中的一个动作，同一动画素材可以应用于不同的动画过程中，而一个动画素材可以包括多个关键帧。因此能够获取至少一个关键帧的状态值等动画素材的参数，从而基于动画素材的参数以及预设代码生成算法，生成对应各关键帧的代码段，并基于至少一个关键帧所对应的代码段生成动画素材，从而实现了动画素材的自动化生成，且所生成的动画素材能够复用于不同动画过程，不仅避免了需要用户手动针对各组件编写动画代码的问题，提高了生成动画素材的效率，节省成本。

其次，能够基于动画素材生成动画配置数据，该动画配置数据即能够指示动画过程，也即是，能够将一个或多个的动画素材进行组合，从而确保了能够实现更加复杂多样的动画过程，提高了动画配置效果，且所生成的动画配置数据能够被多个组件所复用，从而解决了在展示多个组件需要多次读取动画代码的问题，提高生成动画的效率。

请参照图5，为本公开实施例所提供的一种动画数据处理方法的流程示意图。需要说明的是，本公开实施例所述的动画数据处理方法并不以图5以及以下所述的具体顺序为限制，应当理解，在其它实施例中，本公开实施例所述的动画数据处理方法其中部分步骤的顺序可以根据实际需要相互交换，或者其中的部分步骤也可以省略或删除。下面将对图5所示的流程进行详细阐述。

步骤501，获取动画素材的参数，其中，该动画素材的参数包括至少一个关键帧的状态值。

步骤502，基于动画素材的参数以及预设的代码段生成算法，分别生成对应各关键帧的代码段。

步骤503，基于至少一个关键帧对应的代码段，生成动画素材，并存储至动画素材库中。

步骤504，基于动画素材生成动画配置数据。

需要说明的是，执行步骤501-504的相式，可以参见前述步骤301-304中的相关描述，此处不再一一赘述。

步骤505，向目标主题包括的各组件配置动画配置数据。

由于一个主题包括一个或多个组件，且该主题所包括的组件中可能会包括一个或多个按照相同动画过程进行动画展示的组件，因此，为了避免分别针对各组件编写动画代码而导致的展示动画组件时，也需要分别读取至少一个组件中各组件所对应的动画代码才能动画展示该至少一个组件的问题，即为了实现针对基于相同动画过程的一个或多个组件进行统一的动画配置，提高配置动画的效率，也为了确保在展示主题时，可以只读取一次该动画配置数据即能够对该一个或多个组件进行动画展示，提高渲染展示动画的效率，可以向目标主题包括的各组件配置动画配置数据。

其中，可以获取目标主题的配置信息，该配置信息包括目标主题的主题标识，该目标主题包括的各组件分别对应的动画分组信息，基于该配置信息，存储该目标主题的主题标识、该各组件分别对应的动画分组的动画配置数据。

目标主题为当前进行动画配置的主题。

主题标识用于对主题进行标识，该主题标识可以包括主题名称或主题ID等。

配置信息为与主题配置相关的信息。

其中，动画分组信息为说明组件所属分组的信息，可以包括前述中的动画分组标识。当然，在实际应用中，该动画分组信息还可以其它与组件分组相关的信息，比如该组件所在动画分组所对应的其它组件。

需要说明的是，在实际应用中，目标主题的配置信息还可以包括其它信息，比如各组件的组件标识和组件类型中的至少一个等，其中，组件类型为组件所属的类型。

可以通过接收用户提交的主题标识，并将该主题标识作为目标主题的主题标识，接收用户针对该目标主题包括的各组件的分组操作，获取得到该目标主题包括的各组件分别对应的动画分组信息。

其中，分组操作用于向组件与动画分组信息进行关联，从而向该组件划分至动画分组。

需要说明的是，该分组操作可以由用户触发。

可以将主题标识、该主题标识所对应的目标主题包括的各组件分别对应的动画分组的动画配置数据，存储至主题标识、动画分组信息以及动画配置数据之间的对应关系中，从而能够在展示目标主题时，根据主题标识，获取到相应的动画分组信息，根据该动画分组信息，确定该目标主题中各组件所在的动画分组，并根据该动画分组的动画配置数据展示该动画分组对应的一个或多个组件。

当然，在实际应用中，可以通过其它方式来存储主题中的相关数据，比如，可以将目标主题包括的各组件分别对应的动画分组的动画配置数据、与该目标主题的其它数据统一封装。

例如，一种主题的数据存储结构可以如图6所示。由图6可知，主题目录下包括主题标识、多个组件和动画分组信息。各组件目录下可以包括组件类型、组件成分和动画配置数据。其中，组件成分可以包括FLA(Flash)文件和AS(ActionScript，一种面向对象的编程语言)文件；动画配置数据目录下包括动画分组序号、动画分组ID、动画素材标识、持续时间、循环次数。另外，动画分组信息中包括该主题包括的各组件分别对应的动画分组的动画配置数据。

需要说明的是，在实际应用中，也可以直接将动画素材封装在主题中中，比如将动画素材携带在动画配置数据中。

还需要说明的是，可以将动画配置数据所包括的画分组序号、动画分组ID、动画素材标识、各动画素材的播放次序、持续时间、循环次数等信息，存储至基于该动画配置数据包括的至少一个组件中的其中一个，并将动画分组序号和/或动画分组ID存储至其它组件，也即是，仅在该至少一个组件中存储完整的动画配置数据，而在其它组件中存储动画分组标识。当然，在实际应用中，为了减小目标主题所占的存储空间或者其它目的，还可以通过其它方式来对动画配置数据进行存储。

另外，在向目标主题包括的各组件配置动画配置数据之前，可以先将该动画配置数据进行格式转换，从而将该动画配置数据从json格式转换为字符串格式。

其中，可以通过调用函数JSON.stringify()和JSON.parse()，对该动画配置数据进行格式转换。

步骤506，当展示目标主题时，基于目标主题包括的各组件配置动画配置数据，动画展示各组件。

为了向用户提供良好的视觉效果，提高于用户交互的效果和效率，可以动画展示目标主题包括的各组件。

其中，当展示目标主题时，基于该目标主题的主题标识获取各组件分别对应的动画分组的动画配置数据，基于各动画分组的动画配置数据，分别从动画素材库中获取针对动画分组的一个或多个动画素材，动画展示该动画分组对应的一个或多个组件。

由前述可知，由于目标主题中的一个或多个组件能够基于相同的动画配置数据进行动画展示，因此，为了实现只读取一次该动画配置数据即能够对该一个或多个组件进行动画展示，提高渲染展示动画及主题的效率，可以基于各动画分组的动画配置数据，动画展示该动画分组对应的一个或多个组件。

可以先实例化创建一个组件，然后根据主题标识，获取到相应的动画分组信息，根据该动画分组信息，确定该组件所在的动画分组，并根据该动画分组的动画配置数据对该组件进行渲染，且遍历目标主题中的同一动画分组包括的其它组件，基于已获取的该动画配置数据，对其它组件进行渲染，进而实现基于各动画分组的动画配置数据，动画展示该动画分组对应的一个或多个组件。

需要说明的是，在根据该动画分组的动画配置数据对该组件进行渲染之前，可以先对所获取的动画配置数据进行格式转换，从而将该动画配置数据从字符串格式转换为json格式。

其中，可以通过调用函数JSON.parse()对该动画配置数据进行格式转换。

另外，在本公开的另一可选实施例中，也可以不执行506来展示目标主题，也即是，可以不必对配置完成的目标主题展示，或者，在本公开的另一可选实施例中，也可以单独执行步骤506，来对动画配置完成的目标主题进行展示。

在本公开实施例中，首先，由于对组件进行动画展示的一个完整的动画过程可以包括至少一个连续的动画素材，一个动画素材即可作为该动画过程中的一个动作，同一动画素材可以应用于不同的动画过程中，而一个动画素材可以包括多个关键帧。因此能够获取至少一个关键帧的状态值等动画素材的参数，从而基于动画素材的参数以及预设代码生成算法，生成对应各关键帧的代码段，并基于至少一个关键帧所对应的代码段生成动画素材，从而实现了动画素材的自动化生成，且所生成的动画素材能够复用于不同动画过程，不仅避免了需要用户手动针对各组件编写动画代码的问题，提高了生成动画素材的效率，节省成本。

其次，能够获取目标主题的配置信息，并根据该配置信息包括目标主题的主题标识以及该目标主题包括的各组件分别对应的动画分组信息，存储该目标主题的主题标识、该各组件分别对应的动画分组的动画配置数据，从而实现了针对目标主题中基于相同动画过程的一个或多个组件，进行统一的动画配置，提高了配置动画的效率。

另外，在展示该目标主题时，可以基于该目标主题的主题标识获取各组件分别对应的动画分组的动画配置数据，只需要获取一次该动画配置数据，即能够基于该动画分组的动画配置数据，动画展示该动画分组对应的一个或多个组件，提高了动画展示组件以及主题的效率。

请参照图7，为本公开实施例所提供的一种动画数据处理装置700的功能模块示意图。需要说明的是，本实施例所提供的动画数据处理装置700，其基本原理及产生的技术效果与前述对应的方法实施例相同，为简要描述，本实施例中未提及部分，可参考方法实施例中的相应内容。该动画数据处理装置700包括：

第一获取模块701，用于获取动画素材的参数，其中，该动画素材的参数包括至少一个关键帧的状态值；

第一生成模块702，用于基于动画素材的参数以及预设的代码段生成算法，分别生成对应各关键帧的代码段；

第二生成模块703，用于基于至少一个关键帧对应的代码段，生成动画素材，并存储至动画素材库中。

可选地，请参照图8，一个动画分组对应一个或多个组件；该装置还包括：

确定模块704，用于确定针对任一动画分组设置的一个或多个动画素材；

第一接收模块705，用于接收针对一个或多个动画素材设定的播放次序；

第三生成模块706，用于基于一个或多个动画素材的播放次序，生成任一动画分组对应的动画配置数据，动画配置数据用于指示该任一动画分组对应的任一组件的动画过程。

可选地，请参照图9，该装置还包括：

第二接收模块707，用于接收分别针对一个或多个动画素材设定的持续时间和循环次数；

第三生成模块706具体用于：

基于一个或多个动画素材的播放次序、分别针对各动画素材设定的持续时间和循环次数，生成该任一动画分组对应的动画配置数据。

可选地，请参照图10和11，一个主题包括一个或多个组件；该装置还包括：

第二获取模块708，用于获取目标主题的配置信息，该配置信息包括该目标主题的主题标识，该目标主题包括的各组件分别对应的动画分组信息；

存储模块709，用于基于配置信息，存储目标主题的主题标识、各组件分别对应的动画分组的动画配置数据。

可选地，请参照图12和13，该装置还包括：

第三获取模块710，用于当展示目标主题时，基于该目标主题的主题标识获取各组件分别对应的动画分组的动画配置数据；

展示模块711，用于基于各动画分组的动画配置数据，分别从动画素材库中获取针对该动画分组的一个或多个动画素材，动画展示该动画分组对应的一个或多个组件。

上述装置用于执行前述实施例提供的方法，其实现原理和技术效果类似，在此不再赘述。

以上这些模块可以是被配置成实施以上方法的一个或多个集成电路，例如：一个或多个特定集成电路(Application Specific Integrated Circuit，简称ASIC)，或，一个或多个微处理器(digital singnal processor，简称DSP)，或，一个或者多个现场可编程门阵列(Field Programmable Gate Array，简称FPGA)等。再如，当以上某个模块通过处理元件调度程序代码的形式实现时，该处理元件可以是通用处理器，例如中央处理器(CentralProcessing Unit，简称CPU)或其它可以调用程序代码的处理器。再如，这些模块可以集成在一起，以片上***(system-on-a-chip，简称SOC)的形式实现。

请参照图14，为本公开实施例所提供的一种电子设备的功能模块示意图。该电子设备可以包括存储有计算机程序的计算机可读存储介质1401和处理器1402，处理器1402可以调用计算机可读存储介质1401存储的计算机程序。当该计算机程序被处理器1402读取并运行，可以实现上述方法实施例。具体实现方式和技术效果类似，这里不再赘述。

可选地，本公开还提供一计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器读取并运行时，可以实现上述方法实施例。

在本公开所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个***，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。

上述以软件功能单元的形式实现的集成的单元，可以存储在一个计算机可读取存储介质中。上述软件功能单元存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(英文：processor)执行本公开各个实施例所述方法的部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(英文：Read-Only Memory，简称：ROM)、随机存取存储器(英文：Random Access Memory，简称：RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述仅为本公开的优选实施例而已，并不用于限制本公开，对于本领域的技术人员来说，本公开可以有各种更改和变化。凡在本公开的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本公开的保护范围之内。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

Claims (12)

1.一种动画数据处理方法，其特征在于，所述方法包括：

获取动画素材的参数，其中，所述动画素材的参数包括至少一个关键帧的状态值；

基于所述动画素材的参数以及预设的代码段生成算法，分别生成对应各关键帧的代码段；

基于所述至少一个关键帧对应的代码段，生成所述动画素材，并存储至动画素材库中。

2.如权利要求1所述的动画数据处理方法，其特征在于，一个动画分组对应一个或多个组件；所述方法还包括：

确定针对任一动画分组设置的一个或多个动画素材；

接收针对所述一个或多个动画素材设定的播放次序；

基于所述一个或多个动画素材的播放次序，生成所述任一动画分组对应的动画配置数据，所述动画配置数据用于指示所述任一动画分组对应的任一组件的动画过程。

3.如权利要求2所述的动画数据处理方法，其特征在于，所述方法还包括：

接收分别针对所述一个或多个动画素材设定的持续时间和循环次数；

所述基于所述一个或多个动画素材的播放次序，生成所述任一动画分组对应的动画配置数据，包括：

基于所述一个或多个动画素材的播放次序、分别针对各所述动画素材设定的持续时间和循环次数，生成所述任一动画分组对应的动画配置数据。

4.如权利要求2或3所述的动画数据处理方法，其特征在于，一个主题包括一个或多个组件；所述方法还包括：

获取目标主题的配置信息，所述配置信息包括所述目标主题的主题标识，所述目标主题包括的各组件分别对应的动画分组信息；

基于所述配置信息，存储所述目标主题的主题标识、所述各组件分别对应的动画分组的动画配置数据。

5.如权利要求4所述的动画数据处理方法，其特征在于，所述方法还包括：

当展示所述目标主题时，基于所述目标主题的主题标识获取所述各组件分别对应的动画分组的动画配置数据；

基于各动画分组的动画配置数据，分别从所述动画素材库中获取针对所述动画分组的一个或多个动画素材，动画展示所述动画分组对应的一个或多个组件。

6.一种动画数据处理装置，其特征在于，所述装置包括：

第一获取模块，用于获取动画素材的参数，其中，所述动画素材的参数包括至少一个关键帧的状态值；

第一生成模块，用于基于所述动画素材的参数以及预设的代码段生成算法，分别生成对应各关键帧的代码段；

第二生成模块，用于基于所述至少一个关键帧对应的代码段，生成所述动画素材，并存储至动画素材库中。

7.如权利要求6所述的动画数据处理装置，其特征在于，一个动画分组对应一个或多个组件；所述装置还包括：

确定模块，用于确定针对任一动画分组设置的一个或多个动画素材；

第一接收模块，用于接收针对所述一个或多个动画素材设定的播放次序；

第三生成模块，用于基于所述一个或多个动画素材的播放次序，生成所述任一动画分组对应的动画配置数据，所述动画配置数据用于指示所述任一动画分组对应的任一组件的动画过程。

8.如权利要求7所述的动画数据处理装置，其特征在于，所述装置还包括：

第二接收模块，用于接收分别针对所述一个或多个动画素材设定的持续时间和循环次数；

所述第三生成模块具体用于：

基于所述一个或多个动画素材的播放次序、分别针对各所述动画素材设定的持续时间和循环次数，生成所述任一动画分组对应的动画配置数据。

9.如权利要求7或8所述的动画数据处理装置，其特征在于，一个主题包括一个或多个组件；所述装置还包括：

第二获取模块，用于获取目标主题的配置信息，所述配置信息包括所述目标主题的主题标识，所述目标主题包括的各组件分别对应的动画分组信息；

存储模块，用于基于所述配置信息，存储所述目标主题的主题标识、所述各组件分别对应的动画分组的动画配置数据。

10.如权利要求9所述的动画数据处理装置，其特征在于，所述装置还包括：

第三获取模块，用于当展示所述目标主题时，基于所述目标主题的主题标识获取所述各组件分别对应的动画分组的动画配置数据；

展示模块，用于基于各动画分组的动画配置数据，分别从所述动画素材库中获取针对所述动画分组的一个或多个动画素材，动画展示所述动画分组对应的一个或多个组件。

11.一种电子设备，其特征在于，包括存储有计算机程序的计算机可读存储介质和处理器，所述计算机程序被所述处理器读取并运行时，实现如权利要求1-5任一项所述的方法。

12.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器读取并运行时，实现如权利要求1-5任一项所述的方法。