CN108460818A - 一种数据导出及动画播放的方法及装置 - Google Patents

Abstract

本申请公开一种数据导出及动画播放的方法及装置，该方法中用户所持有的移动终端设备在获取待播放动画的数据包后，可通过该数据包中包含的该待播放动画的可视元素数据集以及预设插件绘制出相应的动画并在该移动终端设备的浏览器中进行播放，由于该移动终端设备的浏览器能够有效的支持该预设插件，所以，通过该预设插件所绘制出的动画能够有效的在该移动终端设备的浏览器上进行播放，即，绘制出的动画与该移动终端设备的浏览器具有良好的兼容性，从而保证了用户能够在该移动终端设备的浏览器中正常的浏览该动画，进而给用户带来了便利。

Description

一种数据导出及动画播放的方法及装置

技术领域

本申请涉及计算机技术领域，尤其涉及一种数据导出及动画播放的方法及装置。

背景技术

随着计算机技术的不断发展，终端中的页面内容逐渐丰富，从简单的文字加静态图片，到如今的图片、文字、动画等页面元素的混合编排，终端通过浏览器向用户提供的页面内容在形式上愈加的精彩纷呈，提高了用户体验。

对于移动终端设备通过浏览器播放动画来说，页面设计人员通常是利用动画制作软件将整个动画制作完成后，将制作完的整个动画上传至服务器中，这样，当用户通过移动终端设备请求播放该动画时，可以从服务器中下载该动画，并通过移动终端设备中的浏览器对该动画进行播放。

然而，在现有技术中，由于移动终端设备从服务器中下载的动画的格式往往会与移动终端设备中浏览器所支持的动画播放格式存在差异，使得移动终端设备通过浏览器播放该动画时存在是否兼容的问题，即，有些移动终端设备可通过自身的浏览器正常播放该动画，而有些移动终端设备通过自身的浏览器播放该动画时可能会出现诸如无法播发、丢帧等异常情况，从而给用户浏览该动画带来不便。

发明内容

本申请实施例提供一种动画播放的方法，用以解决现有技术中浏览器无法正常的播放动画的问题。

本申请实施例提供了一种动画播放方法，包括：

获取待播放动画的数据包，所述数据包中包含用于绘制所述待播放动画的至少一个可视元素数据集；

通过移动终端设备的浏览器所支持的预设插件以及所述可视元素数据集，绘制所述可视元素数据集对应的待播放动画，并在所述浏览器中进行播放。

本申请实施例提供一种动画播放的装置，用以解决现有技术中浏览器无法正常的播放动画的问题。

本申请实施例提供了一种动画播放的装置，包括：

数据获取模块，获取待播放动画的数据包，所述数据包中包含用于绘制所述待播放动画的至少一个可视元素数据集；

动画绘制模块，通过所述装置的浏览器所支持的预设插件以及所述可视元素数据集，绘制所述可视元素数据集对应的待播放动画，并在所述浏览器中进行播放。

本申请实施例提供一种数据导出方法，用以解决现有技术中浏览器无法正常的播放动画的问题。

本申请实施例提供了一种数据导出方法，包括：

根据监测到的动画绘制操作，得到目标动画，所述目标动画中包含至少一个可视元素；

确定所述目标动画的脚本数据，并从所述脚本数据中导出所述目标动画的可视元素数据集，所述脚本数据中包含所述目标动画中的所述可视元素对应的可视元素数据集；

将所述可视元素数据集以数据包的形式进行保存，以使所述移动终端设备在获取到所述数据包时，通过预设插件以及所述数据包中的可视元素数据集在所述移动终端设备的浏览器中绘制，并播放所述目标动画。

本申请实施例提供一种数据导出的装置，用以解决现有技术中浏览器无法正常的播放动画的问题。

本申请实施例提供了一种数据导出的装置，包括：

动画模块，根据监测到的动画绘制操作，得到目标动画，所述目标动画中包含至少一个可视元素；

数据导出模块，确定所述目标动画的脚本数据，并从所述脚本数据中导出所述目标动画的可视元素数据集，所述脚本数据中包含所述目标动画中的所述可视元素对应的可视元素数据集；

数据保存模块，将所述可视元素数据集以数据包的形式进行保存，以使所述移动终端设备在获取到所述数据包时，通过预设插件以及所述数据包中的可视元素数据集在所述移动终端设备的浏览器中绘制，并播放所述目标动画。

本申请实施例采用的上述至少一个技术方案能够达到以下有益效果：

在本申请实施例中，用户所持有的移动终端设备在获取待播放动画的数据包后，可通过该数据包中包含的该待播放动画的可视元素数据集以及预设插件绘制出相应的动画并在该移动终端设备的浏览器中进行播放，由于该移动终端设备的浏览器能够有效的支持该预设插件，所以，通过该预设插件所绘制出的动画能够有效的在该移动终端设备的浏览器上进行播放，即绘制出的动画与该移动终端设备的浏览器具有良好的兼容性，避免了浏览器与动画之间因动画数据格式而产生的兼容性差或者不兼容的问题，从而保证了用户能够在该移动终端设备的浏览器中正常的浏览该动画，给用户带来了良好的体验。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为本申请实施例提供的数据导出过程的示意图；

图2为本申请实施例提供的通过预设脚本遍历各属性的示意图；

图3为本申请实施例提供的移动终端设备进行动画播放的过程示意图；

图4为本申请实施例提供的各可视元素之间关系的树状结构示意图；

图5为本申请实施例提供的数据导出及动画播放的详细过程示意图；

图6为本申请实施例提供的一种数据导出的装置示意图；

图7为本申请实施例提供的一种动画播放的装置示意图。

具体实施方式

在本申请中，终端从页面设计人员绘制的目标动画中导出能够使移动终端设备绘制该目标动画的可视元素数据集，在可视元素数据集中包含有该可视元素数据集所对应的可视元素，该可视元素所对应的各属性以及各属性的关键帧数据，移动终端设备可通过该可视元素数据集中包含的关键帧数据在移动终端设备的浏览器中逐帧绘制出该可视元素。

为了使本技术领域的人员更好地理解本申请中的技术方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

图1为本申请实施例提供的数据导出过程的示意图，具体包括以下步骤：

S101：根据监测到的动画绘制操作，得到目标动画，所述目标动画中包含至少一个可视元素。

在实际应用中，用户所持有的移动终端设备在浏览器页面中所显示的各个动画通常都是由页面设计人员绘制的，页面设计人员通过自己所持有的终端绘制动画时，可根据监测页面设计人员在该终端上执行的动画绘画操作，生成相应的目标动画，其中，该目标动画中包含有至少一个可视元素，如，在一个动画中包含有行人、汽车这两个对象，而这两个对象则是该目标动画中包含的两个可视元素。这里的目标动画可以理解为包含动画播放格式的动画文件。

例如，页面设计人员可在终端上通过动画绘制工具(如动画绘制软件等)可视化的在终端上进行动画绘制的过程中，当终端监测到页面设计人员点击了确定目标绘画的控件时，该终端可根据监测到的该动画绘制操作，得到相应的目标动画。

在实际应用中，页面设计人员所绘制出的动画通常是以一定的形式呈现给用户的，例如，页面设计人员可将绘制好的目标动画通过指定页面呈现给用户，所以，页面设计人员通过终端绘制完上述动画后，可在该终端上将绘制出的动画添加到指定页面中的指定位置上，而后，页面设计人员可将制作完成的页面上传到服务器中，使得后续用户可通过自身所持有的移动终端设备从该服务器中获取到该指定页面的页面信息，并根据获取到的页面信息渲染出相应的页面。其中，该页面信息中包含有该动画的动画数据，所以，移动终端设备可通过获取到的页面信息中包含的动画数据渲染出该动画，并在终端的浏览器页面上进行显示。这里提到的终端可以是诸如电脑、平板电脑等能够绘制动画的终端设备。

S102：确定所述目标动画的脚本数据，并从所述脚本数据中导出所述目标动画的可视元素数据集，所述脚本数据中包含所述目标动画中的所述可视元素对应的可视元素数据集。

终端根据页面设计人员进行的绘画操作生成目标动画后，可先确定出该目标动画的脚本数据，进而从该目标动画的脚本数据中导出该目标动画的可视元素数据集。

其中，一个可视元素数据集中包含可视元素、可视元素的多个属性(例如：Transform(可视元素的变换属性)、SorceName(可视元素对应的图片名称)、Parent(可视元素的父级可视元素)、Inpoint(可视元素的在动画中播放的起始时间)、Outpoint(可视元素在动画中播放的结束时间)等等)以及不同属性对应的关键帧数据。而在一个目标动画中可以包含多个可视元素，那么一个目标动画对应的动画文件中包含多个可视元素数据集。除此之外，动画文件可以直接被渲染播放在与动画文件格式匹配的浏览器中；而在本申请实施例中，移动终端设备获取到多个可视元素数据集后，并不能直接通过浏览器播放出这些可视元素数据集所对应的动画，而是需要通过预设插件以及这些可视元素数据集才能绘制出相应的动画，并在支持该预设插件的浏览器中播放。

在本申请实施例中，为了克服浏览器与动画之间因动画数据格式而产生的兼容性差或者不兼容的问题，移动终端设备通过预设插件以及可视元素数据集中的各关键帧数据来完成动画的绘制，进而实现在移动终端设备上的播放。

也就是说，移动终端设备可以根据播放动画的浏览器的需要，选择与该浏览器匹配的预设插件，并利用选择的预设插件和得到的可视元素数据集中的各关键帧数据来完成动画的绘制。

此举的目的在于，在实际应用中，用户的移动终端设备从服务器中下载的动画可能会与移动终端设备自身的浏览器存在兼容性差或不兼容的问题，即，有些移动终端设备下载的动画无法在自身浏览器中进行正常播放，而之所以会出现兼容性的问题通常来讲是因为移动终端设备从服务器下载的动画在数据格式上可能与自身的浏览器之间存在不匹配的情况。

为了使用户的移动终端设备能够有效的通过自身的浏览器播放出上述动画，在本申请实施例中，用户的移动终端设备可通过自身浏览器所支持的预设插件以及从服务器中获取到的可视元素数据集绘制出相应的动画，通过浏览器所支持的该预设插件绘制出的动画与该浏览器具有良好的兼容性，即该浏览器在播放该动画时不会出现诸如丢帧、无法播放等兼容性问题，使得用户所持有的移动终端设备可通过浏览器正常的播放出该动画，从而用户带来的极大的便利。

用户所持有的移动终端设备通过自身浏览器所支持的预设插件绘制上述动画的过程中，需要从服务器获取到使该预设插件能够有效绘制出该动画的动画数据。因此，在本申请实施例中，页面设计人员所持有的终端根据页面设计人员的绘画操作生成相应的目标动画后，可通过该终端中内置的脚本工具，从该目标动画的脚本数据中导出该目标动画的可视元素数据集，其中，这里提到的可视元素数据集即为预设插件绘制该动画时所需的动画数据。

具体的，由于页面设计人员在终端上绘制上述目标动画时，终端会在后台同步生成该目标动画对应的脚本数据，在该脚本数据中详细记录了该目标动画所涉及的各可视元素，各可视元素所对应的各属性以及各属性所对应的关键帧数据，这些可视元素、属性以及关键帧数据恰恰是后续用户的终端设备通过预设插件绘制该目标动画所需的数据，所以，在本申请实施例中，终端根据页面设计人员的动画绘制操作，得到相应的目标动画后，需要进一步的确定出在该终端的后台中所产生的该目标动画的脚本数据，具体的确定方式可以是：当终端监测到用户在绘制完该目标动画后，执行了指定的操作时(如，点击了将该目标动画上传至服务器的确认控件等)，终端可从自身的后台确定出该目标动画的脚本数据，当然，终端可通过其他的方式触发确定该目标动画的脚本数据的动作，如，当监测到页面设计人员在终端上输入了指定的脚本确定指令后，确定出自身后台所产生的该目标动画的脚本数据；再例如，终端监测到页面设计人员完成该目标动画的绘制工作后，可自动从自身后台中确定出该目标动画的脚本数据，除此之外还可以有其他的触发方式，在此就不进行一一赘述了。

终端在确定出该目标动画的脚本数据后，可从该脚本数据中导出该目标动画的可视元素数据集，具体的导出方式可以是：终端可通过执行预设的脚本，从该目标动画的脚本数据中导出相应的可视元素数据集，其中，在该目标动画中，每个可视元素均可对应有一个可视元素数据集，因此，当该目标动画中包含有多个可视元素时，终端通过预设的脚本所导出的可视元素数据集也将有多个。

例如，假设页面设计人员在自己所持有的终端上通过动画绘制软件AfterEffects绘制动画时，可通过After Effects在该终端上所展示的界面上进行上述可视元素数据集的提取操作。该终端在监测到页面设计人员在该界面上执行了该提取操作时，可先从自身的后台中确定出该目标动画所对应的脚本数据，并通过After Effects中内置的脚本ExtendScript从该目标动画的脚本数据中导出能够使用户的移动终端设备通过预设插件绘制出该目标动画的可视元素数据集，继而将该可视元素数据集上传至服务器中进行保存。当然，在本申请实施例中，页面设计人员通过自己所持有的终端导出该可视元素数据集后，可将该可视元素数据集保存在本地中，并在后续过程中，将该可视元素数据集直接传输至用户所持有的移动终端设备中，以使该移动终端设备能够通过该可视元素数据集以及该预设插件，绘制出相应的动画并通过自身的浏览器播放该动画。

在实际应用中，动画中通常都包含有若干个可视元素，一般来说，每个可视元素分别对应不同的图层，如，在一个动画中出现了汽车和飞机两个物体，汽车和飞机可分别对应不同的图层，而在这两个图层分别对应可视元素汽车和飞机。

对于不同的可视元素来说，每个可视元素所对应的各属性，这些属性能够有效的表征该可视元素在动画中如何进行播放，如，可视元素在该图层中何时进行播放，何时停止播放，如何旋转，透明度多少等，而在这些属性中，每个属性均对应有自己的关键帧数据，这里的关键帧数据能够反映出可视元素在该动画中每一帧应该如何进行播放。

因此，在本申请实施例中，终端通过内置的脚本工具导出上述可视元素数据集的过程中，可通过该脚本工具，从确定出该目标动画的脚本数据中所包含的各可视元素(即图层)，并针对每个可视元素，从该脚本数据中确定出该可视元素的各属性，并进一步的从该脚本数据中确定出各属性的关键帧数据，而后，该终端可通过确定出的关键帧数据以及各属性确定出为该可视元素的可视元素数据集。以此类推，终端可通过这种方式依次确定出各可视元素的可视元素数据集，进而将确定出的各可视元素的可视元素数据集打包成数据包上传至服务器中。

其中，终端在确定上述动画的各可视元素(即图层)时，可通过内置的脚本工具从确定出的该目标动画的脚本数据中依次遍历出各个可视元素，而后，终端可针对每个可视元素，通过该脚本工具从该脚本数据中遍历出该可视元素所对应的各属性，若某个属性中还包含有子属性，则该终端可通过该脚本工具继续遍历出该子属性，并进一步的从该脚本数据中确定出该可视元素中各属性所对应的关键帧数据以及子属性所对应的关键帧数据，其中，终端通过预设的脚本从该脚本数据中遍历出的可视元素对应的各属性如图2所示。

图2为本申请实施例提供的通过预设脚本遍历各属性的示意图。

在图2中展示了可视元素(即图层)中各属性的树状结构图，在该可视元素中包含有Transform(可视元素的变换属性)、SorceName(可视元素对应的图片名称)、Parent(可视元素的父级可视元素)、Inpoint(可视元素的在动画中播放的起始时间)、Outpoint(可视元素在动画中播放的结束时间)，这些属性构成了该可视元素的基础属性，SorceName指明了在该可视元素的名称，Inpoint和Outpoint指明了该可视元素的在动画中的播放起止时间，Parent则指明了该可视元素与其他可视元素在整个动画中的父层-子层关系。

例如，假设在一个动画中包含有火车和一个旅客，在该动画的播放过程中，旅客会在火车内进行走动，所以，在该动画中，火车和旅客分别为两个不同的可视元素，这两个可视元素分别对应有不同的图层。对于旅客这一可视元素来说，SorceName表明了旅客这一可视元素的名称，页面设计人员所持有的终端可通过该名称从其自身存储的图形文件中找到相应的图形文件，用于在后续过程中，将旅客的图形文件连同其他的可视元素数据集一同上传至服务器中。Inpoint和Outpoint则表明了旅客(即可视元素)在整个动画播放过程中的运动起止时间，其中，该起止时间并不一定是指动画播放的起止时间，而是指该旅客在动画中运动过程中的起止时间。Transform则是表明了旅客在动画播放过程中所涉及的一些具体属性，如，整个动画的每一帧中该旅客相对于整个动画界面中的位置信息、透明度等属性。Parent则表明了该旅客在整个动画中与其他可视元素的父层-子层关系，其中，在该动画中，旅客的父级可视元素即为火车。

终端通过上述脚本工具依次遍历出该可视元素(即图层)中的上述属性后，可针对每个属性，继续查看该属性是否对应有各子属性，如，对于属性Transform来说，Transform表明了该图层中可视元素在动画播放过程中所涉及的各种变换属性，如，可视元素在动画播放过程中的透明度变换、位置变换、大小缩放等。因此，在本申请实施例中，对于包含有子属性的属性来说，终端可通过该脚本工具继续遍历出该属性所对应的各子属性，如在图2中，终端通过该脚本工具遍历出Transform属性后，可继续遍历出该Transform属性所对应的子属性Opacity、Position、Scale、Rotation，其中，Opacity表明该可视元素在动画播放过程中所涉及的透明度变换，Position表明该可视元素在动画播放过程中相对于整个动画界面的位置变换，Scale表明该可视元素在动画播放过程中的缩放变换，而Rotation则表明该可视元素在整个动画播放过程中所涉及的旋转变换。

当然，除了上述说明的几个子属性外，在本申请实施例中，Transform属性还可对应有其他的子属性，如，对于在整个动画播放过程中涉及旋转、缩放的可视元素来说，Transform属性还将对应有子属性AnchorPointer，该子属性表明了该可视元素在整个动画播放过程中旋转和缩放的中心点。除此之外，Transform属性还可对应有其他的子属性，在此就不一一举例说明了。

而针对遍历出的每个子属性来说，该子属性将对应有各关键帧数据，如，在图2中，Opacity属性是Transform属性的子属性，而子属性Opacity则对应有若干的关键帧数据KeyFrame，其中，该关键帧数据KeyFrame具体到每一帧该可视元素的透明度变换。当然，对于Position、Scale等子属性来说，也将对应有若干的关键帧数据，图2中只是未进行标出而已。

基于此，在本申请实施例中，终端针对每个属性通过上述脚本工具遍历出各子属性后，可继续针对每个子属性，通过遍历的方式确定出当该子属性所对应的各关键帧数据。

终端通过上述脚本工具从上述脚本数据中确定出该可视元素(即图层)所对应的各属性以及各子属性后，可将确定出的这些属性分别对应的关键帧数据，并通过确定出的各关键帧数据以及各属性确定出该可视元素所对应的可视元素数据集。

终端通过上述脚本工具导出该动画的可视元素数据集后，可将导出的这些可视元素数据集进一步处理，得到更加轻量级、容易后续用户所持有的移动终端设备解析的数据，如，该终端可将确定出的该动画的可视元素数据集组装成一个Json数据，由于Json数据具有量级轻、易解析等特点，使得用户所持有的移动终端设备在后续过程中，可通过该Json数据快速、方便的绘制出相应的动画并播放。

S103：将所述可视元素数据集以数据包的形式进行保存，以使所述移动终端设备在获取到所述数据包时，通过预设插件以及所述数据包中的可视元素数据集在所述移动终端设备的浏览器中绘制，并播放所述目标动画。

终端从目标动画的脚本数据中导出该目标动画的可视元素数据集后，可将该可视元素数据集进行保存，其中，该终端可将得到的可视元素数据集上传至服务器，以通过服务器来保存该可视元素数据集，以使后续用户能够通过自己所持有的移动终端设备，从服务器中获取到该可视元素数据集。当然，该终端也可将得到的可视元素数据集保存在本地中，并在后续过程中直接传输至用户所持有的移动终端设备中。

终端通过上述脚本工具从生成的目标动画中导出可视元素数据集后，可将该可视元素数据保存在指定位置中，这样，后续用户所持有的移动终端设备需要通过浏览器来播放该动画时，可从指定位置中获取到该可视元素数据集，由于该可视元素数据集是该移动终端设备通过预设插件绘制上述动画所需的动画数据，并且，该预设的插件是该移动终端设备的浏览器能够有效支持的，因此，该移动终端设备通过浏览器所能支持的预设插件以及获取到的可视元素数据集所绘制出的动画能够正常有效的在浏览器页面中进行播放，从而有效的保证了动画在浏览器页面中的顺利播放。

不仅如此，由于在本申请实施例中，终端通过上述脚本工具从上述目标动画的脚本数据中导出的可视元素数据集中并没有包含该动画的全部数据，而是一些能够使移动终端设备通过预设插件绘制该动画的关键帧数据，换句话说，该终端只是通过导出了该动画的部分数据，而对于该动画的一些框架数据等并没有导出，这就极大的降低了上述移动终端设备在浏览器页面中显示该动画时从服务器获取数据的大小，从而进一步的提升了该移动终端设备绘制并播放该动画的效率。

需要说明的是，在上述步骤S102中，终端除了可通过内置的脚本工具从目标动画的脚本数据中导出上述可视元素数据集外，还可通过其他的方式导出该可视元素数据集，如通过指定命令从脚本数据中导出指定字段等，在此就不进行详细举例说明了。

终端将导出的可视元素数据集上传到服务器中后，上述移动终端设备可从服务器中获取到该可视元素数据集，并通过自身浏览器所支持的预设插件以及该可视元素数据集绘制出相应的动画并播放，具体的过程在下面进行详细说明。

图3为本申请实施例提供的移动终端设备进行动画播放的过程示意图，具体包括以下步骤：

S301：获取待播放动画的数据包，所述数据包中包含用于绘制所述待播放动画的至少一个可视元素数据集。

在本申请实施例中，当移动终端设备可通过指定条件的触发，确定待播放动画的数据包所位于的存储地址，继而根据该存储地址，获取到该待播放动画的数据包。

例如，当用户所持有的移动终端设备监测到用户在该移动终端设备的界面上执行了显示指定页面的指定操作时，确定出存储该指定页面的页面信息的服务器(即存储地址)，而后，该移动终端设备可向服务器发送获取该指定页面所需页面信息的请求，服务器在接收到该请求后，可向移动终端设备返回相应的页面信息，其中，若该指定页面中包含有需要向用户播放的动画时，则该页面信息中将包含有用于绘制并播放该动画的数据包，而该数据包中包含有绘制该动画所需的可视元素数据集。

当然，在本申请实施例中，绘制动画的工作除了可以由上述移动终端设备来完成外，还可通过该移动终端设备中所安装的客户端来进行，因此，当用户在客户端中所展示的界面中执行需要客户端向用户展示指定页面的指定操作时，该客户端可根据用户所执行的指定操作，生成相应的页面信息获取请求，并将该页面信息获取请求通过该移动终端设备发送至服务器中，使得服务器可根据该页面信息获取请求向该客户端返回该指定页面所需的页面信息，同样，当该指定页面中包含有需要向用户播放的动画时，该页面信息中将包含有该动画的可视元素数据集。

S302：通过移动终端设备中浏览器所支持的预设插件以及所述可视元素数据集，绘制所述可视元素数据集对应的待播放动画，并在所述浏览器中进行播放。

移动终端设备在接收到服务器返回的页面信息后，可通过该页面信息渲染出该页面信息所对应的指定页面，其中，当该页面信息中包含有某一动画的至少一个可视元素数据集时，该移动终端设备可通过浏览器所支持的预设插件，对这些可视元素数据集进行解析，并确定出该动画中各动画帧的关键帧数据与时间的对应关系，这里提到的时间是指整个动画在播放过程中的起止时间。

在本申请实施例中，该移动终端设备从服务器中获取到的可视元素数据集中包含有上述动画中各可视元素每一帧的关键帧数据，因此，该移动终端设备通过自身浏览器所支持的的预设插件绘制该动画的过程中，可通过解析这些可视元素数据集，确定出该可视元素数据集中包含的每一帧的关键帧数据，而后，该移动终端设备可进一步的确定出与当前时刻相匹配的关键帧数据，进而通过确定出的关键帧数据，绘制出当前时刻的一帧动画帧并显示，以此类推，该移动终端设备可通过这种方式依次绘制出各动画帧并显示，从而实现了将该动画在指定页面中的播放。

需要说明的是，由于实际应用中，绘制动画时以逐个可视元素(即图层)绘制的方式绘制出整个动画的，因此，在本申请实施例中，移动终端设备在接收到服务器返回的可视元素数据集后，可从这些可视元素数据集中确定出所述待播放动画中所包含的各可视元素。

具体的，通过上述步骤S102可知，终端通过内置脚本工具导出可视元素数据集的过程中，是以可视元素为单元，分别确定出各可视元素的各属性以及各属性的关键帧数据，进而确定出该可视元素所对应的可视元素数据集，因此，在本申请实施例中，该移动终端设备可从获取到的可视元素数据集，确定出待播放动画所包含的各可视元素，具体的确定方式可以是，从而上述步骤S102可知，每个可视元素的关键帧数据中包含有可视元素的图片名称SorceName，所以，该移动终端设备可通过各可视元素数据集中所包含的SorceName确定出该待播放动画所包含的各可视元素。

而对于确定各可视元素的时机来说，在本申请实施例中，当移动终端设备监测到在该移动终端设备的屏幕中需要通过浏览器显示上述待播放动画时，则可根据获取到的可视元素数据集，确定出该待播放动画中所包含的各可视元素。除此之外，移动终端设备也可在监测到用户在移动终端设备屏幕中执行点击播放该待播放动画的操作后，根据该可视元素数据集，确定出各可视元素。

当然，在本申请实施例中，移动终端设备还可通过其他的方式触发确定各可视元素的动作，如，当移动终端设备监测到上述待播放动画在该移动终端设备的屏幕中停留超过设定时间时，则可获取到的可视元素数据集，确定出该待播放动画中包含的各可视元素，其他的方式在此就不一一进行举例说明了。

通常情况下，上述移动终端设备在绘制动画的过程中，通常都是逐个可视元素(即图层)进行绘制，并且，在绘制过程中，移动终端设备通常需要确定出的各可视元素之间的父层-子层关系，以决定先绘制哪一可视元素，后绘制哪一可视元素。

例如，在一个动画中包含有飞机和旅客两个可视元素，这两个可视元素分别对应不同的图层，在该动画中，旅客为飞机的子级可视元素，相应的，飞机为旅客的父级可视元素，因此，通常来说，移动终端设备需要先对父级可视元素进行绘制，再对子级可视元素进行绘制，即，移动终端设备可先对可视元素飞机所对应的图层进行绘制，而后，在另一个图层上绘制出该可视元素旅客。

因此，在本申请实施例中，上述移动终端设备根据获取到的可视元素数据集确定出的各可视元素(即图层)后，可根据各可视元素所对应的可视元素数据集中包含的设定属性，确定出各可视元素之间的父层-子层关系，并进一步通过该父层-子层关系，构建出能够表征出各可视元素在该待播放动画中相互位置关系的树状结构，而确定该树状结构的具体方式可以是：由于在每个可视元素的可视元素数据集中包含有Parent属性，因此，该移动终端设备可通过该Parent属性(即设定属性)，确定出各可视元素中各可视元素之间的父层-子层关系，进而构建出能够表征各可视元素之间在该待播放动画中相对位置关系的树状结构，如图4所示。

图4为本申请实施例提供的各可视元素之间关系的树状结构示意图。

假设，一个动画中包含有天空、飞机、鸟和一名旅客，在整个动画的播放过程中，天空中的云朵会发生相对移动，飞机会在天空中发生相对移动，鸟会天空中发生相对移动，而旅客会在飞机中发生相对移动。对于该动画来说，移动终端设备获取到服务器返回的可视元素数据集后，可根据该可视元素数据集中的Sorce Name，确定出该动画所包含的各可视元素(即图层)，而后，该移动终端设备可进一步根据各可视元素的可视元素数据集中包含的Parent属性，确定出各可视元素之间的父层-子层关系，其中，可视元素飞机和可视元素鸟所对应的Parent属性均为天空，则该移动终端设备可知天空为飞机和鸟这两个可视元素的父级可视元素，而可视元素旅客所对应的Parent属性则为飞机，则该移动终端设备可确定出可视元素旅客的父级可视元素为飞机，而在可视元素天空中并没有Parent属性(或可视元素天空中的Parent属性中并不包含有任何数据)，则该移动终端设备可确定出天空可视元素并没有相应的父级可视元素。该移动终端设备可根据确定出的各可视元素的Parent属性，确定出各可视元素之间的父层-子层关系，并进一步根据该父层-子层关系，确定出如图3所示的各可视元素之间的树状结构。

移动终端设备在确定出各可视元素之间的树状结构后，可通过在该树状结构从上到下依次遍历出各可视元素的方式，确定出各可视元素的绘制顺序，并按照该绘制顺序，依次逐帧绘制各可视元素的动画帧。

即，在该树状结构上进行前序遍历，当移动终端设备遍历出一个可视元素时，可进一步从获取到的可视元素数据集中确定出该可视元素在当前时刻所对应的关键帧数据，进而根据该关键帧数据以及浏览器所支持的预设插件绘制出在当前时刻该可视元所对应的动画帧。

继续沿用图4所示的示例，移动终端设备根据确定出的树状结构，确定出需要先对可视元素天空进行绘制时，可从获取到的可视元素数据集中确定出在当前时刻可视元素天空所对应的Position、Opacity、Scale这3个属性，并进一步的确定出这3个属性在当前时刻分别对应的关键帧数据(换句话说，每个属性在当前时刻都对应有一个关键帧数据)，而后，可根据确定出的这些关键帧数据，通过自身浏览器所能支持的预设插件绘制出当前时刻可视元素天空所对应的动画帧。

移动终端设备可继续遍历树状结构中的各可视元素，继而通过同样的方式，绘制出在当前时刻各可视元素分别对应的各动画帧，并最终通过该预设插件，绘制出当前时刻该动画所对应的动画帧，其中，当前时间该动画所对应的动画帧是由该绘制出的当前时刻各可视元素所对应的动画帧通过相互嵌套、层叠绘制出的。

在本申请实施例中，该预设的插件可以是诸如Canvas、层叠样式表(CascadingStyle Sheets，CSS)、CSS3等插件，其中，这里指明的插件可以是通过Canvas、CSS、CSS3等技术制作而成的插件。

需要说明的是，在本申请实施例中，移动终端设备通过自身浏览器所支持的预设插件绘制动画的过程，是在上述树状结构中自上而下进行遍历的(当然也可以是自下而上进行遍历)，所以，移动终端设备应先绘制出位于树状结构上端的可视元素(即图层)在当前时刻的动画帧，而后在从该树状结构中向下绘制各可视元素在当前时刻的动画帧，而对于在该树状结构中位于同一层的可视元素来说，移动终端设备可自左向右绘制出各可视元素在当前时刻的动画帧，也可自右向左进行绘制。

当然，在本申请实施例中，移动终端设备也可在该树状结构中自下而上绘制出各可视元素在当前时刻的动画帧，也可同时对各可视元素在当前时刻的动画帧进行绘制，只需能够保证出绘制出的各可视元素的动画帧能够符合该待播放动画的层叠、嵌套关系即可。

移动终端设备通过绘制当前时刻各可视元素(即图层)动画帧的方式，可进一步的绘制出当前时刻上述动画所对应的一帧动画帧(可以理解成这一帧动画帧是由确定出的当前时刻各可视元素的动画帧组成的)，并将该动画帧进行显示，而后，移动终端设备可经过设定时间后再次在上述树状结构上进行自上而下的前序遍历(或自下而上的后序遍历)依次绘制出经过设定时间后各可视元素的动画帧，进而绘制出间隔设定时间后上述动画的动画帧并显示。以此类推，移动终端设备可每经过设定时间即在该树状结构中进行自上而下的前序遍历，以绘制出这一时刻(即经过设定时间后所处的时刻)各可视元素的动画帧，继而通过绘制出的各动画帧，绘制出这一时刻该动画的一帧动画帧。

其中，在本申请实施例中，该设定时间可由人为进行设定，只要保证最终动画能够正常连续播放即可，如，动画标准通常是1秒24帧，所以，该设定时间可取42毫秒，即，42毫秒遍历一次上述树状结构，绘制出相应的动画帧并显示，这样，移动终端设备在时间轴上逐帧绘制出各动画帧并显示则形成了上述动画的播放。当然，这里的设定时间也可取其他的时间，如，若为1秒60帧的动画，则该设定时间可取16毫秒。

当然，在本申请实施例中，移动终端设备也可根据获取到的数据包中包含的待播放动画的可视元素数据集，确定出该待播放动画的帧率，而后，移动终端设备可按照该帧率，确定出该待播放动画中各动画帧的绘制时间，并按照该绘制时间，逐帧绘制出各可视元素的动画帧。

例如，假设移动终端设备通过获取到的可视元素数据集，确定出该动画的播放时长为10秒，并且，该动画的帧率为1秒24帧，则该移动终端设备可分别针对这10秒中的每一秒进行24等分，从而得到各动画帧在这10秒内的各绘制时间，而移动终端设备在绘制动画的过程中，可确定出与当前时刻相匹配的绘制时间，并从可视元素数据集中包含的各关键帧数据中确定出与该绘制时间相匹配的各关键帧数据，进而通过确定出的各关键帧数据绘制出在该绘制时间内各可视元素的动画帧并显示。

换句话说，移动终端设备可通过上述方式逐帧绘制出该动画的各动画帧并显示，这样，每经过一个绘制时间，移动终端设备即可绘制出一帧该动画的动画帧并显示，即，移动终端设备每经过一段时间，可按照上述绘制顺序，逐个绘制出各可视元素的一帧动画帧，各个绘制时间的动画帧随着时间的推移依次显示在浏览器中，从而实现了该动画在移动终端设备浏览器中的播发。

例如，假设一个动画的整个播放时长为3秒，该动画的帧率为1秒24帧，在这个动画中涉及3个可视元素B、C、D。移动终端设备通过获取到的可视元素数据集确定出这3个可视元素的绘制顺序为D-B-C(具体的方式可先根据可视元素数据集中包含的这3个可视元素分别对应的Parent属性，确定出这3个属性的树状结构，并根据该树状结构，确定出这3个可视元素的绘制顺序)，进而根据该绘制顺序，依次对这3个可视元素的动画帧进行绘制。

其中，对于该动画第一秒的第一帧来说，移动终端设备可先从获取到的可视元素数据集中确定出可视元素D在第一秒第一帧所对应的各关键帧数据(即可视元素D的各属性在第一秒第一帧所对应的各关键帧数据)，并根据这些关键帧数据以及移动终端设备的浏览器所能支持的预设插件，绘制出可视元素D在第一秒第一帧的动画帧。同理，移动终端设备可通过这种方式，按照上述绘制顺序D-B-C依次绘制出可视元素B和C在第一秒第一帧所对应的动画帧。移动终端设备绘制出这3个可视元素在第一秒第一帧的3个动画帧后，可进一步通过这3个动画帧绘制出该动画在第一秒第一帧的动画帧并显示(当然，移动终端设备也可绘制出一个可视元素在第一秒第一帧的动画帧后，即将该动画帧进行显示)。

以此类推，移动终端设备绘制并显示出该动画在第一秒第一帧的动画帧后，可按照上述相同的方式，绘制出该动画在第一秒第二帧的动画帧并显示，即，按照上述绘制顺序D-B-C，依次绘制出这3个可视元素在第一秒第二帧的动画帧，进而通过绘制出的这3个动画帧，绘制出该动画在第一秒第二帧的动画帧并显示。同理，移动终端设备每经过一个绘制时间(由于该动画的帧率为1秒24帧，所以，这里的绘制时间即为从第一秒的第一帧开始每经过42毫秒为一个绘制时间)，即可依照这种方式绘制出这3秒中的每一帧动画帧并显示，由于时间上的连续性，这3秒内的72帧动画帧(这里的动画帧是指该动画的动画帧)会按照先后顺序依次显示在移动终端设备的浏览器中，从而实现了该动画的3秒钟播放。

从上述方法中可以看出，由于移动终端设备在接收到服务器发送的可视元素数据集以及自身浏览器所支持的预设插件逐帧绘制出各动画帧并显示，从而实现了将该关键帧数据转换为相应动画并播放的效果，并且，由于该移动终端设备绘制该动画的过程中是通过自身浏览器所支持的预设插件实施的，这样绘制出的动画将有效的兼容该移动终端设备的浏览器，即，能够在该移动终端设备的浏览器页面中正常的进行播放，从而给用户在终端浏览器页面浏览动画带来的方便。

需要说明的是，在现有技术中，移动终端设备将从服务器下载的动画通过浏览器进行播放时，该动画通常是一个固定的动画，移动终端设备并不能对该动画中的动画效果进行改变(因为此时该动画已经是一个整体的动画，并没有图层之分，而改变动画效果往往是建立在动画具有图层的基础上实现的)，而在本申请实施例中，由于移动终端设备是通过预设的插件逐帧进行动画绘制的，所以，移动终端设备绘制出的动画依然具有各个图层，这就为移动终端设备改变该动画中的动画效果提供了条件。

基于此，为了能够实现更好的动画效果，使上述移动终端设备播放出的动画能够具有一定的交互性，在本申请实施例中，该移动终端设备在逐帧显示通过预设插件绘制出的动画帧时，可监测用户是否对该动画帧执行了指定操作，如，点击该动画帧中的某一可视元素等，若是，则该移动终端设备触发预先设置的代码，并通过执行该代码的方式，在该动画帧***指定的动画效果。

例如，当该移动终端设备监测到在动画播放的过程中，用户点击了动画中的某一可视元素时，则该移动终端设备可通过执行预设代码的方式，在该可视元素的上方弹出一个文本对话框，使得用户可在该文本对话框中添加一些文字信息；再例如，当移动终端设备监测到在动画播放的过程中，用户长按动画界面时，则该移动终端设备可通过执行预设代码的方式，在该动画中实施诸如背景变换、颜色变换等动画效果，从而进一步提高了用户体验。

还需说明的是，在本申请实施例中，当移动终端设备监测到浏览器当前的版本并不能有效支持上述预设插件时，则可进一步确定出该浏览器能够支持该预设插件的版本号，并向用户提示将该浏览器更新至所述版本号对应的版本，以使更新后的浏览器能够通过预设插件以及从服务器中获取到的关键帧数据进行动画绘制并播放。

例如，对于谷歌浏览器来说，能够支持Canvas(即上述说明的预设插件)的第一个浏览器版本号为4.0，所以，对于低于4.0的谷歌浏览器来说，当移动终端设备监测到当前自身所安装的谷歌浏览器无法支持Canvas时，则可向用户提示将谷歌浏览器更新至4.0版本(或是更高的版本)，并向用户提供4.0或是更高版本的更新链接，以使用户通过该更新链接，将该移动终端设备中安装的谷歌浏览器进行更新，进而使得更新后的谷歌浏览器能够支持Canvas，并通过Canvas以及从服务器中获取到的关键帧数据绘制出相应的动画并播放。

为了能够进一步的说明本申请所提供的动画绘制过程，下面将从整个流程的角度上详细说明本申请所提供的动画播放的详细实施过程，如图5所示。

图5为本申请实施例提供的数据导出及动画播放的详细过程示意图。

在本申请实施例中，页面设计人员可在自己所持有的终端上通过可视化操作绘制出需要在指定页面上播放的目标动画，而后，页面设计人员可通过该终端确定出该目标动画在终端后台所产生的脚本数据，并通过该终端中包含的脚本工具，从该目标动画的脚本数据中导出该目标动画的可视元素数据集，并将该可视元素数据集连同指定页面中包含的其他页面信息一同上传至服务器中进行保存。

而用户使用自身所持有的移动终端设备浏览上述指定页面时，可在终端上执行显示该指定页面的指定操作，该移动终端设备当监测到用户执行了该指定操作后，可向服务器发送获取该指定页面的页面信息的请求，相应的，服务器接收到该移动终端设备发送的该请求后，可向该移动终端设备返回相应的页面信息，其中，该页面信息中携带有包含有上述可视元素数据集的数据包。

用户所持有的移动终端设备接收到该页面信息后，可解析出该页面信息中包含的各可视元素数据集，而后，该移动终端设备可进一步确定出各可视元素数据集分别对应的各可视元素，即，该这些可视元素数据集所对应的待播放动画中需要显示出哪些事物，并通过确定出的各可视元素所对应的父级可视元素，确定出各可视元素之间的树状结构，继而通过该树状结构，确定出在各可视元素的绘制顺序，其中，确定出可视元素对应的父级可视元素可以通过可视元素所对应的Parent属性(即上述提到的设定属性)来进行确定。

移动终端设备确定出上述树状结构后，可通过前序遍历(当然也可以后序遍历)该树状结构，确定出移动终端设备通过自身浏览器所支持的预设插件绘制各可视元素的绘制顺序以及各可视元素在该动画中的嵌套关系。当第二终端从该树状结构中遍历出一个可视元素时，即可进一步的从获取到的该可视元素所对应的可视元素数据集中确定出当前时刻该可视元素的各属性的关键帧数据，并通过该预设插件以及确定出的关键帧数据，绘制出该可视元素在当前时刻的动画帧，同理，该移动终端设备可按照相同的方式从该树状结构中自上而下依次绘制出各可视元素在当前时刻的动画帧，进而通过绘制出的各动画帧，进一步的绘制出当前时刻该动画的动画帧并显示。

移动终端设备绘制出当前时刻该动画的动画帧后，可每经过确定出的时间间隔(该时间间隔可以是人为设定的，也可以是移动终端设备通过获取到的可视元素数据集中包含的该待播放动画的帧率确定的)，继续依照上述方式，按照树状结构自上而下的顺序依次绘制出各可视元素的动画帧，通过绘制出的各动画帧进一步的绘制出经过该时间间隔后该动画所对应的动画帧并显示。

以上为本申请实施例提供的动画播放方法，基于同样的思路，本申请实施例还分别提供了数据导出的装置，以及动画播放的装置，如图6、7所示。

图6为本申请实施例提供的一种数据导出的装置示意图，具体包括：

动画模块601，根据监测到的动画绘制操作，得到目标动画，所述目标动画中包含至少一个可视元素；

数据导出模块602，确定所述目标动画的脚本数据，并从所述脚本数据中导出所述目标动画的可视元素数据集，所述脚本数据中包含所述目标动画中的所述可视元素对应的可视元素数据集；

数据保存模块603，将所述可视元素数据集以数据包的形式进行保存，以使所述移动终端设备在获取到所述数据包时，通过预设插件以及所述数据包中的可视元素数据集在所述移动终端设备的浏览器中绘制，并播放所述目标动画。

所述数据导出模块602，针对每个可视元素，从所述脚本数据中确定该可视元素的属性以及所述属性的关键帧数据；通过导出该可视元素、该可视元素对应的各属性以及各属性的关键帧数据的方式，得到该可视元素对应的可视元素数据集。

图7为本申请实施例提供的一种动画播放的装置示意图，具体包括：

数据获取模块701，获取待播放动画的数据包，所述数据包中包含用于绘制所述待播放动画的至少一个可视元素数据集；

动画绘制模块702，通过所述装置中浏览器所支持的预设插件以及所述可视元素数据集，绘制所述可视元素数据集对应的待播放动画，并在所述浏览器中进行播放。

所述动画绘制模块702，从不同的所述可视元素数据集中确定所述待播放动画中包含的各可视元素；根据各可视元素对应的可视元素数据集中所包含的设定属性，确定各可视元素在绘制所述待播放动画时的绘制顺序；按照所述绘制顺序，通过所述预设插件以及所述可视元素数据集中包含的各可视元素的关键帧数据，逐帧绘制出各可视元素所对应的动画帧；根据绘制出的各可视元素所对应的动画帧，得到所述待播放动画。

所述动画绘制模块702，根据各可视元素对应的可视元素数据集中所包含的关系属性，确定出各可视元素之间的父层-子层关系；根据确定出的所述父层-子层关系，构建用于表征不同的所述可视元素之间关系的树状结构；遍历所述树状结构，确定各可视元素的绘制顺序。

所述动画绘制模块702，确定所述待播放动画的帧率；根据所述帧率，确定所述待播放动画中各动画帧的绘制时间；当监测到到达所述绘制时间时，按照所述绘制顺序，通过所述预设插件以及各可视元素的关键帧数据中与该绘制时间相匹配的关键帧数据，逐帧绘制出各可视元素的动画帧。

所述动画绘制模块702，针对不同绘制时间，执行以下操作：在该绘制时间内逐帧绘制出各可视元素的动画帧时，在所述浏览器中显示所述动画帧。

所述动画绘制模块702，当监测到需要在所述装置的浏览器中播放所述待播放动画时，从不同的所述可视元素数据集中，确定所述待播放动画中包含的各可视元素。

所述装置还包括：

***模块703，当在所述待播放动画在播放过程中监测到触发预设条件时，通过执行预设代码在播放的动画中***指定动画效果。

在本申请实施例中，用户所持有的移动终端设备在获取待播放动画的数据包后，可通过该数据包中包含的该待播放动画的关键帧数据以及预设的插件绘制出相应的动画并在该移动终端设备的浏览器中进行播放，由于该移动终端设备的浏览器能够有效的支持该预设的插件，所以，通过该预设的插件所绘制出的动画能够有效的在该移动终端设备的浏览器上进行播放，即，绘制出的动画与该移动终端设备的浏览器具有良好的兼容性，从而保证了用户能够在该移动终端设备的浏览器中正常的浏览该动画，进而给用户带来了便利。

本领域内的技术人员应明白，本发明的实施例可提供为方法、***、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(***)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、***或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于***实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (18)

1.一种动画播放的方法，其特征在于，包括：

获取待播放动画的数据包，所述数据包中包含用于绘制所述待播放动画的至少一个可视元素数据集；

通过移动终端设备的浏览器所支持的预设插件以及所述可视元素数据集，绘制所述可视元素数据集对应的待播放动画，并在所述浏览器中进行播放。

2.如权利要求1所述的方法，其特征在于，通过移动终端设备的浏览器所能支持的预设插件以及所述可视元素数据集，绘制所述可视元素数据集对应的待播放动画，具体包括：

从不同的所述可视元素数据集中确定所述待播放动画中包含的各可视元素；

根据各可视元素对应的可视元素数据集中所包含的设定属性，确定各可视元素在绘制所述待播放动画时的绘制顺序；

按照所述绘制顺序，通过所述预设插件以及所述可视元素数据集中包含的各可视元素的关键帧数据，逐帧绘制出各可视元素所对应的动画帧；

根据绘制出的各可视元素所对应的动画帧，得到所述待播放动画。

3.如权利要求2所述的方法，其特征在于，根据各可视元素对应的可视元素数据集中所包含的设定属性，确定各可视元素在绘制所述待播放动画时的绘制顺序，具体包括：

根据各可视元素对应的可视元素数据集中所包含的关系属性，确定出各可视元素之间的父层-子层关系；

根据确定出的所述父层-子层关系，构建用于表征不同的所述可视元素之间关系的树状结构；

遍历所述树状结构，确定各可视元素的绘制顺序。

4.如权利要求2所述的方法，其特征在于，按照所述绘制顺序，通过所述预设插件以及所述可视元素数据集中包含的各可视元素的关键帧数据，逐帧绘制出各可视元素所对应的动画帧，具体包括：

确定所述待播放动画的帧率；

根据所述帧率，确定所述待播放动画中各动画帧的绘制时间；

当监测到到达所述绘制时间时，按照所述绘制顺序，通过所述预设插件以及各可视元素的关键帧数据中与该绘制时间相匹配的关键帧数据，逐帧绘制出各可视元素的动画帧。

5.如权利要求4所述的方法，其特征在于，在浏览器中播放所述待播放动画，具体包括：

针对不同绘制时间，执行以下操作：

在该绘制时间内逐帧绘制出各可视元素的动画帧时，在所述浏览器中显示所述动画帧。

6.如权利要求2所述的方法，其特征在于，从不同的所述可视元素数据集中确定所述待播放动画中包含的各可视元素，具体包括：

当监测到需要在所述移动终端设备的浏览器中播放所述待播放动画时，从不同的所述可视元素数据集中，确定所述待播放动画中包含的各可视元素。

7.如权利要求1所述的方法，其特征在于，所述方法还包括：

当在所述待播放动画在播放过程中监测到触发预设条件时，通过执行预设代码在播放的动画中***指定动画效果。

8.一种数据导出的方法，其特征在于，包括：

根据监测到的动画绘制操作，得到目标动画，所述目标动画中包含至少一个可视元素；

确定所述目标动画的脚本数据，并从所述脚本数据中导出所述目标动画的可视元素数据集，所述脚本数据中包含所述目标动画中的所述可视元素对应的可视元素数据集；

将所述可视元素数据集以数据包的形式进行保存，以使所述移动终端设备在获取到所述数据包时，通过预设插件以及所述数据包中的可视元素数据集在所述移动终端设备的浏览器中绘制，并播放所述目标动画。

9.如权利要求8所述的方法，其特征在于，从所述脚本数据中导出所述目标动画的可视元素数据集，具体包括：

针对每个可视元素，从所述脚本数据中确定该可视元素的属性以及所述属性的关键帧数据；

通过导出该可视元素、该可视元素对应的各属性以及各属性的关键帧数据的方式，得到该可视元素对应的可视元素数据集。

10.一种动画播放的装置，其特征在于，包括：

数据获取模块，获取待播放动画的数据包，所述数据包中包含用于绘制所述待播放动画的至少一个可视元素数据集；

动画绘制模块，通过所述装置的浏览器所支持的预设插件以及所述可视元素数据集，绘制所述可视元素数据集对应的待播放动画，并在所述浏览器中进行播放。

11.如权利要求10所述的装置，其特征在于，所述动画绘制模块，从不同的所述可视元素数据集中确定所述待播放动画中包含的各可视元素；根据各可视元素对应的可视元素数据集中所包含的设定属性，确定各可视元素在绘制所述待播放动画时的绘制顺序；按照所述绘制顺序，通过所述预设插件以及所述可视元素数据集中包含的各可视元素的关键帧数据，逐帧绘制出各可视元素所对应的动画帧；根据绘制出的各可视元素所对应的动画帧，得到所述待播放动画。

12.如权利要求11所述的装置，其特征在于，所述动画绘制模块，根据各可视元素对应的可视元素数据集中所包含的关系属性，确定出各可视元素之间的父层-子层关系；根据确定出的所述父层-子层关系，构建用于表征不同的所述可视元素之间关系的树状结构；遍历所述树状结构，确定各可视元素的绘制顺序。

13.如权利要求11所述的装置，其特征在于，所述动画绘制模块，确定所述待播放动画的帧率；根据所述帧率，确定所述待播放动画中各动画帧的绘制时间；当监测到到达所述绘制时间时，按照所述绘制顺序，通过所述预设插件以及各可视元素的关键帧数据中与该绘制时间相匹配的关键帧数据，逐帧绘制出各可视元素的动画帧。

14.如权利要求13所述的装置，其特征在于，所述动画绘制模块，针对不同绘制时间，执行以下操作：在该绘制时间内逐帧绘制出各可视元素的动画帧时，在所述浏览器中显示所述动画帧。

15.如权利要求11所述的装置，其特征在于，所述动画绘制模块，当监测到需要在所述移动终端设备的浏览器中播放所述待播放动画时，从不同的所述可视元素数据集中，确定所述待播放动画中包含的各可视元素。

16.如权利要求10所述的装置，其特征在于，所述装置还包括：

***模块，当在所述待播放动画在播放过程中监测到触发预设条件时，通过执行预设代码在播放的动画中***指定动画效果。

17.一种数据导出的装置，其特征在于，包括：

动画模块，根据监测到的动画绘制操作，得到目标动画，所述目标动画中包含至少一个可视元素；

数据导出模块，确定所述目标动画的脚本数据，并从所述脚本数据中导出所述目标动画的可视元素数据集，所述脚本数据中包含所述目标动画中的所述可视元素对应的可视元素数据集；

数据保存模块，将所述可视元素数据集以数据包的形式进行保存，以使所述移动终端设备在获取到所述数据包时，通过预设插件以及所述数据包中的可视元素数据集在所述移动终端设备的浏览器中绘制，并播放所述目标动画。

18.如权利要求17所述的装置，其特征在于，所述数据导出模块，针对每个可视元素，从所述脚本数据中确定该可视元素的属性以及所述属性的关键帧数据；通过导出该可视元素、该可视元素对应的各属性以及各属性的关键帧数据的方式，得到该可视元素对应的可视元素数据集。