具体实施方式

下文中将参考附图并结合实施例来详细说明本公开。需要说明的是，在不冲突的情况下，本公开中的实施例及实施例中的特征可以相互组合。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。

本公开实施例所提供的方法实施例可以在计算机终端或者类似的运算装置中执行。以运行在计算机终端上为例，图1示意性示出了本公开实施例的一种动画组件的创建方法的计算机终端的硬件结构框图。如图1所示，计算机终端可以包括一个或多个(图1中仅示出一个)处理器102(处理器102可以包括但不限于微处理器(Microprocessor Unit，简称是MPU)或可编程逻辑器件(Programmable logic device，简称是PLD)等处理装置和用于存储数据的存储器104，可选地，上述计算机终端还可以包括用于通信功能的传输设备106以及输入输出设备108。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述计算机终端的结构造成限定。例如，计算机终端还可包括比图1中所示更多或者更少的组件，或者具有与图1所示等同功能或比图1所示功能更多的不同的配置。

存储器104可用于存储计算机程序，例如，应用软件的软件程序以及模块，如本公开实施例中的动画组件的创建方法对应的计算机程序，处理器102通过运行存储在存储器104内的计算机程序，从而执行各种功能应用以及数据处理，即实现上述的方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器102远程设置的存储器，这些远程存储器可以通过网络连接至计算机终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

传输设备106用于经由网络接收或者发送数据。上述的网络具体实例可包括计算机终端的通信供应商提供的无线网络。在一个实例中，传输设备106包括一个网络适配器(Network Interface Controller，简称为NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输设备106可以为射频(Radio Frequency，简称为RF)模块，其用于通过无线方式与互联网进行通讯。

在本实施创中提供了一种运行于上述动画组件的创建方法，图2示意性示出了本公开实施例的一种动画组件的创建方法的流程图，如图2所示，该流程包括如下步骤：

步骤S202：确定目标动画的关键帧和程序接口函数；

步骤S204：根据所述目标动画的动画时间函数对所述关键帧进行处理；

步骤S206：将经过所述动画时间函数处理的关键帧转换为目标精灵图，并通过所述程序接口函数控制所述目标精灵图；

步骤S208：通过预加载方式加载除所述目标精灵图之外的其他精灵图，根据所述目标精灵图和所述其他精灵图创建动画组件。

通过本公开，本公开实施例提供的上述技术方案与现有技术相比至少具有如下优点的部分或全部：在确定目标动画的关键帧和程序接口函数的情况下，根据所述目标动画的动画时间函数对所述关键帧进行处理，将经过所述动画时间函数处理的关键帧转换为目标精灵图，并通过所述程序接口函数控制所述目标精灵图；通过预加载方式加载除所述目标精灵图之外的其他精灵图，根据所述目标精灵图和所述其他精灵图创建动画组件。其中，精灵图是将众多图片拼贴为一张作为背景图片，精灵图可以实现图片的预加载，提高网页的响应速度。采用上述技术手段，解决了现有技术中，为了实现前端动画需要引用第三方动画框架，从而因为引用第三方动画框架造成的资源浪费、容易出现错误等问题，进而在实现前端动画时，降低对第三方动画框架的依赖，避免不必要的资源浪费。

在步骤S202中，确定目标动画的关键帧和程序接口函数，包括：对所述目标动画的动画结构和交互节点进行分析，以得到分析结果；根据所述分析结果确定所述目标动画的关键帧和程序接口函数。

需要说明的是，本公开实施例中的目标动画可以是序列帧动画。如果所要处理的动画不是序列帧动画，需要在确定目标动画的关键帧和程序接口函数之前，将所要处理的动画转换为序列帧动画。因为本公开实施例处理的目标动画是序列帧动画，因此可以定义每个动画周期的效果，而不是整个动画周期的效果，进而减小设计动画时的约束，尽最大可能还原动画原型。

本公开实施例中的目标动画可以是前端动画，通过对所述目标动画的动画结构和交互节点进行分析，根据分析的结果确定所述目标动画的关键帧和程序接口函数的方式，没有调用第三方动画框架，进而解决了在调用第三方动画框架时，会因为调用第三方动画框架造成的资源浪费、容易出现错误等问题。

在步骤S204中，根据所述目标动画的动画时间函数对所述关键帧进行处理，包括：在所述目标动画的动画时间函数为线性函数的情况下，通过阶跃函数对所述关键帧进行处理；在所述目标动画的动画时间函数为非线性函数的情况下，通过贝塞尔曲线函数对所述关键帧进行处理。

在确定目标动画的关键帧和程序接口函数的情况下，根据所述目标动画的动画时间函数对所述关键帧进行处理。首先判断动画时间函数是否为线性函数，在动画时间函数为线性函数的情况下，通过阶跃函数对所述关键帧进行处理，其中，阶跃函数可以使得动画在表现和行为上得到分离，同时实现对每个动画关键帧周期的控制，所以不用再借助定时器任务来实现对每个动画周期的控制。在动画时间函数为非线性函数的情况下，借助贝塞尔曲线函数生成对应的非线性函数，通过非线性函数对所述关键帧进行处理，以实现非线性动画。

在一个可选实施例中，将经过所述动画时间函数处理的关键帧转换为目标精灵图，包括：通过背景图像位置函数处理经过所述动画时间函数处理的关键帧，以得到背景图像；通过背景图像大小函数处理所述背景图像，以得到目标精灵图。

图3示意性示出了本公开实施例的一种控制目标精灵图的流程图，如图3所示，该流程包括如下步骤：

S302：计算所述目标精灵图的图形复杂度；

其中，所述图形复杂度包括实现目标精灵图的算法的空间复杂度和时间复杂度。

S304：判断所述图形复杂度是否小于预设阈值，在所述图形复杂度小于预设阈值的情况下，通过位移程序接口函数控制所述目标精灵图，其中，所述程序接口函数包括所述位移程序接口函数，在所述图形复杂度大于所述预设阈值的情况下，通过画布程序接口函数控制所述目标精灵图，其中，所述程序接口函数包括所述画布程序接口函数。

本公开实施例通过计算实现目标精灵图的算法的空间复杂度(即实现目标精灵图的算法所需要占用的空间的大小)和时间复杂度(即实现目标精灵图的算法所需要的时间的长短)，来选择合适的程序接口函数，进而对简单动画和复杂动画区别对待，避免不必要的资源浪费。

在步骤S208中，通过预加载方式加载除所述目标精灵图之外的其他精灵图，包括：通过第一预加载方式加载行内元素，其中，所述其他精灵图包括所述行内元素；通过第二预加载方式加载文件对象模型，其中，所述其他精灵图包括所述文件对象模型。

通过第一预加载方式加载行内元素，预加载的是行内元素的路径属性，通过第二预加载方式加载文件对象模型，预加载的是文件对象模型的背景图。如果行内元素和文件对象模型采用同一种加载方式，那么动画切换时两种动画衔接处会存在闪烁问题，因为本公开实施例通过第一预加载方式加载行内元素，通过第二预加载方式加载文件对象模型，所以解决了动画切换时两种动画衔接处闪烁的问题。

图4示意性示出了本公开实施例的一种动画组件脱离文档流的流程图，如图4所示，该流程包括如下步骤：

S402：将所述动画组件存储在目标容器中；

S404：对存储有所述动画组件的所述目标容器执行脱离文档流处理。

其中，对存储有所述动画组件的所述目标容器执行脱离文档流处理，也就是说，将动画组件外层用容器包裹并脱离文档流。通过上述技术手段，可以减少动画切换引起的重绘，从而导致的页面GPU性能损耗等问题。

为了更好的理解上述技术方案，本公开实施例还提供了一种可选实施例，用于解释说明上述技术方案。

图5示意性示出了本公开实施例的一种动画组件的创建方法的流程示意图，如图5所示，该流程包括如下步骤：

S502：对所述目标动画的动画结构和交互节点进行分析，根据分析的结果确定所述目标动画的关键帧和程序接口函数；

S504：计算所述目标精灵图的图形复杂度，根据图形复杂度选择对应的位移程序接口函数控制所述目标精灵图；

S506：在所述目标动画的动画时间函数为线性函数的情况下，通过阶跃函数对所述关键帧进行处理；

S508：在所述目标动画的动画时间函数为非线性函数的情况下，通过贝塞尔曲线函数对所述关键帧进行处理；

S510：将经过所述动画时间函数处理的关键帧转换为目标精灵图；

S512：通过所述程序接口函数控制所述目标精灵图；

S514：通过预加载方式加载除所述目标精灵图之外的其他精灵图；

S516：根据所述目标精灵图和所述其他精灵图创建动画组件；

S518：将所述动画组件存储在目标容器中，对存储有所述动画组件的所述目标容器执行脱离文档流处理。

通过本公开，在确定目标动画的关键帧和程序接口函数的情况下，根据所述目标动画的动画时间函数对所述关键帧进行处理，将经过所述动画时间函数处理的关键帧转换为目标精灵图，并通过所述程序接口函数控制所述目标精灵图；通过预加载方式加载除所述目标精灵图之外的其他精灵图，根据所述目标精灵图和所述其他精灵图创建动画组件。采用上述技术手段，解决了现有技术中，为了实现前端动画需要引用第三方动画框架，从而因为引用第三方动画框架造成的资源浪费、容易出现错误等问题，进而在实现前端动画时，降低对第三方动画框架的依赖，避免不必要的资源浪费。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如只读存储器(Read-Only Memory，简称为ROM)、随机存取存储器(Random AccessMemory，简称为RAM)、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本公开各个实施例的方法。

在本实施例中还提供了一种动画组件的创建装置，所述动画组件的创建装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赞述。如以下所使用的，术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

图6示意性示出了本公开可选实施例的一种动画组件的创建装置的结构框图，如图6所示，该创建装置包括：

确定模块602，用于确定目标动画的关键帧和程序接口函数；

处理模块604，用于根据所述目标动画的动画时间函数对所述关键帧进行处理；

转换模块606，用于将经过所述动画时间函数处理的关键帧转换为目标精灵图，并通过所述程序接口函数控制所述目标精灵图；

创建模块608，用于通过预加载方式加载除所述目标精灵图之外的其他精灵图，根据所述目标精灵图和所述其他精灵图创建动画组件。

通过本公开，在确定目标动画的关键帧和程序接口函数的情况下，根据所述目标动画的动画时间函数对所述关键帧进行处理，将经过所述动画时间函数处理的关键帧转换为目标精灵图，并通过所述程序接口函数控制所述目标精灵图；通过预加载方式加载除所述目标精灵图之外的其他精灵图，根据所述目标精灵图和所述其他精灵图创建动画组件。采用上述技术手段，解决了现有技术中，为了实现前端动画需要引用第三方动画框架，从而因为引用第三方动画框架造成的资源浪费、容易出现错误等问题，进而在实现前端动画时，降低对第三方动画框架的依赖，避免不必要的资源浪费。

图7示意性示出了本公开可选实施例的处理模块604的结构框图，如图7所示，处理模块604包括：

第一处理单元6042，用于在所述目标动画的动画时间函数为线性函数的情况下，通过阶跃函数对所述关键帧进行处理；

第二处理单元6044，用于在所述目标动画的动画时间函数为非线性函数的情况下，通过贝塞尔曲线函数对所述关键帧进行处理。

在确定目标动画的关键帧和程序接口函数的情况下，根据所述目标动画的动画时间函数对所述关键帧进行处理。首先判断动画时间函数是否为线性函数，在动画时间函数为线性函数的情况下，通过阶跃函数对所述关键帧进行处理，其中，阶跃函数可以使得动画在表现和行为上得到分离，同时实现对每个动画关键帧周期的控制，所以不用再借助定时器任务来实现对每个动画周期的控制。在动画时间函数为非线性函数的情况下，借助贝塞尔曲线函数生成对应的非线性函数，通过非线性函数对所述关键帧进行处理，以实现非线性动画。

可选的，确定模块602还用于对所述目标动画的动画结构和交互节点进行分析，以得到分析结果；根据所述分析结果确定所述目标动画的关键帧和程序接口函数。

需要说明的是，本公开实施例中的目标动画可以是序列帧动画。如果所要处理的动画不是序列帧动画，需要在确定目标动画的关键帧和程序接口函数之前，将所要处理的动画转换为序列帧动画。因为本公开实施例处理的目标动画是序列帧动画，因此可以定义每个动画周期的效果，而不是整个动画周期的效果，进而减小设计动画时的约束，尽最大可能还原动画原型。

本公开实施例中的目标动画可以是前端动画，通过对所述目标动画的动画结构和交互节点进行分析，根据分析的结果确定所述目标动画的关键帧和程序接口函数的方式，没有调用第三方动画框架，进而解决了在调用第三方动画框架时，会因为调用第三方动画框架造成的资源浪费、容易出现错误等问题。

可选的，转换模块606还用于通过背景图像位置函数处理经过所述动画时间函数处理的关键帧，以得到背景图像；通过背景图像大小函数处理所述背景图像，以得到目标精灵图。

可选的，转换模块606还用于计算所述目标精灵图的图形复杂度；判断所述图形复杂度是否小于预设阈值，在所述图形复杂度小于预设阈值的情况下，通过位移程序接口函数控制所述目标精灵图，其中，所述程序接口函数包括所述位移程序接口函数，在所述图形复杂度大于所述预设阈值的情况下，通过画布程序接口函数控制所述目标精灵图，其中，所述程序接口函数包括所述画布程序接口函数。

其中，所述图形复杂度包括实现目标精灵图的算法的空间复杂度和时间复杂度。

本公开实施例通过计算实现目标精灵图的算法的空间复杂度(即实现目标精灵图的算法所需要占用的空间的大小)和时间复杂度(即实现目标精灵图的算法所需要的时间的长短)，来选择合适的程序接口函数，进而对简单动画和复杂动画区别对待，避免不必要的资源浪费。

可选的，创建模块608还用于通过第一预加载方式加载行内元素，其中，所述其他精灵图包括所述行内元素；通过第二预加载方式加载文件对象模型，其中，所述其他精灵图包括所述文件对象模型。

通过第一预加载方式加载行内元素，预加载的是行内元素的路径属性，通过第二预加载方式加载文件对象模型，预加载的是文件对象模型的背景图。如果行内元素和文件对象模型采用同一种加载方式，那么动画切换时两种动画衔接处会存在闪烁问题，因为本公开实施例通过第一预加载方式加载行内元素，通过第二预加载方式加载文件对象模型，所以解决了动画切换时两种动画衔接处闪烁的问题。

可选的，创建模块608还用于将所述动画组件存储在目标容器中；对存储有所述动画组件的所述目标容器执行脱离文档流处理。

其中，对存储有所述动画组件的所述目标容器执行脱离文档流处理，也就是说，将动画组件外层用容器包裹并脱离文档流。通过上述技术手段，可以减少动画切换引起的重绘，从而导致的页面GPU性能损耗等问题。

需要说明的是，上述各个模块是可以通过软件或硬件来实现的，对于后者，可以通过以下方式实现，但不限于此：上述模块均位于同一处理器中；或者，上述各个模块以任意组合的形式分别位于不同的处理器中。

本公开的实施例提供了一种电子装置。

图8示意性示出了本公开实施例提供的一种电子装置的结构框图。

参照图8所示，本公开实施例提供的电子装置800包括处理器801、通信接口802、存储器803和通信总线804，其中，处理器801、通信接口802和存储器803通过通信总线804完成相互间的通信；存储器803，用于存放计算机程序；处理器801，用于执行存储器上所存放的程序时，实现上述任一项方法实施例中的步骤。

可选地，上述电子装置还可以包括传输设备以及输入输出设备，其中，该输入输出设备与上述处理器连接。

可选地，在本实施例中，上述处理器可以被设置为通过计算机程序执行以下步骤：

S1，确定目标动画的关键帧和程序接口函数；

S2，根据所述目标动画的动画时间函数对所述关键帧进行处理；

S3，将经过所述动画时间函数处理的关键帧转换为目标精灵图，并通过所述程序接口函数控制所述目标精灵图；

S4，通过预加载方式加载除所述目标精灵图之外的其他精灵图，根据所述目标精灵图和所述其他精灵图创建动画组件。

本公开的实施例还提供了一种计算机可读存储介质。上述计算机可读存储介质上存储有计算机程序，上述计算机程序被处理器执行时实现上述任一项方法实施例中的步骤。

可选地，在本实施例中，上述存储介质可以被设置为存储用于执行以下步骤的计算机程序：

S1，确定目标动画的关键帧和程序接口函数；

S2，根据所述目标动画的动画时间函数对所述关键帧进行处理；

S3，将经过所述动画时间函数处理的关键帧转换为目标精灵图，并通过所述程序接口函数控制所述目标精灵图；

S4，通过预加载方式加载除所述目标精灵图之外的其他精灵图，根据所述目标精灵图和所述其他精灵图创建动画组件。

该计算机可读存储介质可以是上述实施例中描述的设备/装置中所包含的；也可以是单独存在，而未装配入该设备/装置中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被执行时，实现根据本公开实施例的方法。

根据本公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质，例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

显然，本领域的技术人员应该明白，上述的本公开的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本公开不限制于任何特定的硬件和软件结合。

以上所述仅为本公开的优选实施例而已，并不用于限制于本公开，对于本领域的技术人员来说，本公开可以有各种更改和变化。凡在本公开的原则之内，所作的任何修改、等同替换、改进等，均应包含在本公开的保护范围之内。