动画生成方法及装置与流程

本发明涉及互联网技术领域，尤其涉及一种动画生成方法及装置。

背景技术：

为了提高页面的可观赏性，技术人员通常会将页面中的静态内容添加上多种多样的动画效果。其中，最常用的方式是利用flash软件来设计页面中内容的动画效果，但flash软件生成的fla格式的动画有一定的使用局限性，不能适用于各种类型的客户端中。为此，需要基于flash动画生成其他格式的动画，例如，css3动画，以适应不同类型的客户端。

但现有技术中，需要通过人工编写代码的方式来产生css3动画，没有一种能够根据flash动画快速、准确生成css3动画的算法，导致css3格式动画的生成效率低且生成成本高。

技术实现要素：

有鉴于此，本发明实施例提供一种动画生成方法及装置，根据帧图像序列的图像序列信息计算得到生成css3动画的所有参数，从而提高动画的生成效率，降低动画的生成成本。

本发明实施例提供一种动画生成方法，包括：

获取与flash动画对应的帧图像序列；

拼接所述帧图像序列中各帧图像以获得一幅拼接图；

确定所述拼接图中各帧图像对应的显示时刻；

根据各帧图像的尺寸以及所述各帧图像对应的显示时刻生成css3动画。

可选地，所述拼接所述帧图像序列中各帧图像，以获得一幅拼接图，包括：

解析所述各帧图像的图像名称，以获得各帧图像的所述各帧图像的显示编号；

根据所述显示编号依次拼接所述各帧图像，以获得所述拼接图。

可选地，所述确定所述拼接图中各帧图像对应的显示时刻，包括：

根据预设帧频以及所述帧图像序列中包含的帧图像数目确定所述css3动画的显示时长；

根据所述显示时长以及所述帧图像数目确定所述各帧图像对应的显示时刻。

可选地，所述根据各帧图像的尺寸以及所述各帧图像对应的显示时刻生成css3动画，包括：

根据所述各帧图像的尺寸确定各帧图像在所述拼接图中的起始像素坐标；

建立所述各帧图像在所述拼接图中的起始像素坐标与所述各帧图像对应的显示时刻之间的对应关系；

根据所述对应关系生成所述css3动画。

可选地，所述方法还包括：

将所述css3动画发送至客户端，所述css3动画中包括动画类型标签。

本发明实施例提供一种动画生成装置，包括：

获取模块，用于获取与flash动画对应的帧图像序列；

拼接模块，用于拼接所述帧图像序列中各帧图像以获得一幅拼接图；

确定模块，用于确定所述拼接图中各帧图像对应的显示时刻；

生成模块，用于根据各帧图像的尺寸以及所述各帧图像对应的显示时刻生成css3动画。

可选地，所述拼接模块具体包括：

解析单元，用于解析所述各帧图像的图像名称，以获得各帧图像的所述各帧图像的显示编号；

拼接单元，用于根据所述显示编号依次拼接所述各帧图像，以获得所述拼接图。

可选地，所述确定模块具体用于：

根据预设帧频以及所述帧图像序列中包含的帧图像数目确定所述css3动画的显示时长，以及根据所述显示时长以及所述帧图像数目确定所述各帧图像对应的显示时刻。

可选地，所述生成模块具体包括：

确定单元，用于根据所述各帧图像的尺寸确定各帧图像在所述拼接图中的起始像素坐标；

建立单元，用于建立所述各帧图像在所述拼接图中的起始像素坐标与所述各帧图像对应的显示时刻之间的对应关系；

生成单元，用于根据所述对应关系生成所述css3动画。

可选地，所述装置还包括：

发送模块，用于将所述css3动画发送至客户端，所述css3动画中包括动画类型标签。

本发明实施例提供的动画生成方法及装置，动画生成器获取与flash动画对应的帧图像序列，将帧图像序列中的各帧图像按照顺序进行拼接从而得到一幅拼接图。再通过确定拼接图中各帧图像对应的显示时刻，并将各帧图像在相应的显示时刻进行显示即可生成css3动画。根据上述方法能够根据flash动画自动生成css3动画，并且生成过程中并不存在人工计算并编写代码的过程，提高了css3动画生成的效率与准确性同时也降低了动画生成的成本。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的动画生成方法实施例一的流程图；

图2为本发明实施例提供的动画生成方法实施例二的流程图；

图3为本发明实施例提供的动画生成装置实施例一的结构示意图；

图4为本发明实施例提供的动画生成装置实施例二的结构示意图。

具体实施方式

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

在本发明实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本发明。在本发明实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义，“多种”一般包含至少两种，但是不排除包含至少一种的情况。

应当理解，本文中使用的术语“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。

应当理解，尽管在本发明实施例中可能采用术语第一、第二、第三等来描述xxx，但这些xxx不应限于这些术语。这些术语仅用来将xxx彼此区分开。例如，在不脱离本发明实施例范围的情况下，第一xxx也可以被称为第二xxx，类似地，第二xxx也可以被称为第一xxx。

取决于语境，如在此所使用的词语“如果”、“若”可以被解释成为“在……时”或“当……时”或“响应于确定”或“响应于检测”。类似地，取决于语境，短语“如果确定”或“如果检测(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当检测(陈述的条件或事件)时”或“响应于检测(陈述的条件或事件)”。

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

图1为本发明实施例提供的动画生成方法实施例一的流程图，本实施例提供的该动画生成方法的执行主体可以为动画生成器，如图1所示，该方法包括如下步骤：

s101，获取与flash动画对应的帧图像序列。

s102，拼接帧图像序列中各帧图像以获得一幅拼接图。

s103，确定拼接图中各帧图像对应的显示时刻。

s104，根据各帧图像的尺寸以及各帧图像对应的显示时刻生成css3动画。

在实际应用中可以通过动画软件导出针对于某flash动画的帧图像序列。flash动画是由若干帧图像组成的，此若干帧图像即为该flash动画的帧图像序列。并且动画软件在导出帧图像序列的同时还会量取各帧图像的尺寸、统计帧图像序列中帧图像的数目。在通常情况下，各帧图像的尺寸是相等的。可选地，动画软件导出的帧图像序列中的各帧图像可以是按照显示顺序的依次排列的。可选地，动画软件还会将各帧图像对应的尺寸以及帧图像序列中帧图像的数目写入一个图像信息文件中。基于此，动画生成器在获取flash动画的对应的帧图像序列的同时，还能够根据图像信息文件获取帧图像序列中帧图像的数目以及各帧图像的尺寸。

进而，动画生成器会按照获取的帧图像序列中各帧图像的顺序将各帧图像对齐排列以拼接成一幅拼接图。动画生成器再根据动画显示时长确定出此拼接图中各帧图像的显示时刻。可选地，动画的显示时长可以是预先设置的，也可以是动画生成器根据预设的帧频以及帧图像序列中包含的帧图像数目计算得到的。由于每帧图像显示的时长相等是保证动画流畅播放的充分条件，因此通常情况下，每帧图像显示的时长都是相等的。在此基础上，动画生成器可以根据动画显示时长以及帧图像序列中帧图像的数目计算得到每帧帧图像的显示时长。根据此计算出的每帧帧图像的显示时长以及帧图像的数目，动画生成器便能够确定出每帧帧图像所对应的显示时刻。举例来说，若帧图像序列中帧图像的数目为且计算出的每帧帧图像的显示时长为tms时，则第一帧帧图像显示的时刻为第0ms，第二帧帧图像的显示时刻为第tms，……第n帧帧图像的显示时刻为第(n-1)tms。

最后，动画生成器根据各帧图像的尺寸以及各帧图像对应的显示时刻生成css3动画。可选地，动画生成器可以利用内置于动画生成器内的css3动画模版生成css3动画。具体地，将计算得到的每帧帧图像所对应的显示时刻以及每帧帧图像的尺寸输入到css3动画模版中即可生成css3动画。

本实施例中，动画生成器获取与flash动画对应的帧图像序列，将帧图像序列中的各帧图像按照顺序进行拼接从而得到一幅拼接图。再通过确定拼接图中各帧图像对应的显示时刻，并将各帧图像在相应的显示时刻进行显示即可生成css3动画。根据上述方法能够根据flash动画自动生成css3动画，并且生成过程中并不存在人工计算并编写代码的过程，提高了css3动画生成的效率与准确性同时也降低了动画生成的成本。

图2为本发明实施例提供的动画生成方法实施例二的流程图，如图2所示，该方法可以包括如下步骤：

s201，获取与flash动画对应的帧图像序列。

上述步骤s201的执行过程可以参见如图1所示实施例中的相关描述，在此不再赘述。

s202，解析各帧图像的图像名称，以获得各帧图像的各帧图像的显示编号。

s203，根据显示编号依次拼接各帧图像，以获得拼接图。

动画生成器在获取到与flash动画对应的帧图像序列的同时也能得到序列中每帧图像的对应的图像名称。可选地，动画生成器获取到的帧图像序列中的各帧图像是存储于同一个文件夹内的，并且每帧帧图像的对应的图像名称中都有可以表明该帧图像显示编号的部分，因此，动画生成器能够通过解析每帧帧图像的对应的图像名来获得各帧图像对应的显示编号。动画是通过依次显示帧图像序列中的各帧图像而形成的，而每帧帧图像对应的显示编号则是用以表示各帧图像在动画中的显示次序。具体来说，显示编号为00x的帧图像则是动画中显示的第x帧图像。然后，动画生成器再按照各帧图像的显示编号也即是按照各帧图像的显示次序对各帧图像进行拼接以形成一幅拼接图。

s204，根据预设帧频以及帧图像序列中包含的帧图像数目确定css3动画的显示时长。

s205，根据显示时长以及帧图像数目确定各帧图像对应的显示时刻。

动画生成器可以根据预设帧频以及帧图像序列中包含的帧图像数目确定出要生成css3动画的帧图像序列的显示时长。具体地，显示时长＝帧图像数目/帧频。在一般情况下，动画中每帧图像的显示时长是相等的，基于此，动画生成器还可以根据显示时长以及帧图像数目确定各帧图像对应的显示时刻。具体地，显示时刻＝显示时长/帧图像数目。

举例来说，当预设帧频为40帧/秒，帧图像数目为60帧时，则该帧图像序列的播放时长为60/40＝1.5秒。又因为每帧帧图像的显示时间相等，因此，60帧帧图像需要平分这1.5秒的显示时长，也即是每帧帧图像的显示时长为1.5/60＝25ms，则第1帧帧图像的显示时刻为第0ms，第2帧帧图像的显示时刻为第25ms……第60帧帧图像的显示时刻为第1475ms。

s206，根据各帧图像的尺寸确定各帧图像在拼接图中的起始像素坐标。

s207，建立各帧图像在拼接图中的起始像素坐标与各帧图像对应的显示时刻之间的对应关系。

s208，根据对应关系生成css3动画。

由于各帧图像的尺寸都是相同的，因此动画生成器可以根据各帧图像的尺寸以及帧图像的数目计算出拼接图的尺寸。举例来说，当帧图像的尺寸为200*200且帧图像数目为10帧时，则拼接图尺寸为200*2000。可选地，可以在此拼接图中设置一个参考原点，根据此参考原点确定各帧图像在拼接图中的起始像素坐标，其中起始像素即为每帧帧图像中的第1个像素点所对应的位置坐标。并用此位置坐标代表各帧图像的位置坐标。

承接上段描述中涉及到的例子，为了方便计算可以采用如下方式确定各帧图像在拼接图中的起始像素坐标。

可选地，可以将拼接图中的第1帧帧图像中的第1个像素点设置为参考原点，则第1帧帧图像的起始像素坐标为(0,0)，第2帧帧图像的起始像素坐标为(0,-200)……第10帧帧图像的起始像素坐标为(0,-1800)。

可选地，也可以将距离拼接图中的第1帧帧图像中的第1个像素点竖直距离为m的位置设置为参考原点，则第1帧帧图像的起始像素坐标为(0,m)，第2帧帧图像的起始像素坐标为(0,-200-m)……第20帧帧图像的起始像素坐标为(0,-1800-m)。

动画生成器将各帧图像在拼接图中的起始像素坐标与各帧图像的显示时刻进行关联，以建立二者之间的对应关系。通过将一对对具有对应关系的起始像素坐标和显示时刻输入css3动画模板中即可生成css3动画，其中，动画模板已经内置于动画生成器中，并且动画模板与动画类型存在对应关系。基于动画模板与动画类型的对应关系，动画生成器还会根据生成css3动画时使用的动能模板为此css3动画设置一个对应的动画类型标签，其中动画类型标签可以为动画名称的简称或者缩写等等。

在生成css3动画后还会存在显示此css3动画的情况。可选地，在客户端侧会预先配置有一个动画类型标签表，此表中记录有所有客户端能够显示的动画类型。当需要显示css3动画时，动画生成器将包含有动画类型标签的css3动画发送至客户端。客户端根据接收到的css3动画后，将css3动画中包括的动画类型标签与本地的动画类型标签表进行匹配。当css3动画包括的动画类型标签存在于客户端本地的动画类型标签表中，则表明该css3动画能够在客户端上显示，此时客户端则会正常显示示此接收到的css3动画。当css3动画包括的动画类型标签不存在于客户端本地的动画类型标签表中，则表明客户端不能显示此动画，此时客户端会将此无法显示的动画直接丢弃。

本实施例中，动画生成器获取与flash动画对应的帧图像序列，并通过解析各帧图像的图像名称得到各帧图像的显示顺序即显示编号，然后根据此显示编号将各帧图像进行拼接，以得到拼接图。根据预设的帧频、帧图像序列中包含的帧图像数目以及各帧图像的尺寸确定出各帧图像在动画显示时的显示时长以及显示时刻。然后，动画生成器根据各帧图像的尺寸确定各帧图像在拼接图中的起始像素坐标，在此基础上建立各帧图像的起始像素坐标与各帧图像对应的显示时刻之间的对应关系，通过此对应关系，可以获知在对应时刻切换显示拼接图中的某帧图像。最终，将动画生成器根据各帧图像的显示时刻以及起始像素坐标即可得到css3动画。根据上述方法能够根据flash动画自动生成css3动画，并且生成过程中并不存在人工计算并编写代码的过程，提高了css3动画生成的效率与准确性同时也降低了动画生成的成本。

图3为本发明实施例提供的动画生成装置实施例一的结构示意图，如图3所示，该动画生成装置包括：获取模块11、拼接模块12、确定模块13、生成模块14。

获取模块11，用于获取与flash动画对应的帧图像序列。

拼接模块12，用于拼接帧图像序列中各帧图像以获得一幅拼接图。

确定模块13，用于确定拼接图中各帧图像对应的显示时刻。

生成模块14，用于根据各帧图像的尺寸以及各帧图像对应的显示时刻生成css3动画。

图3所示装置可以执行图1所示实施例的方法，本实施例未详细描述的部分，可参考对图1所示实施例的相关说明。该技术方案的执行过程和技术效果参见图1所示实施例中的描述，在此不再赘述。

图4为本发明实施例提供的动画生成装置实施例二的结构示意图，如图4所示，在图3所示实施例基础上，该动画生成装置中的拼接模块12具体包括：解析单元121，拼接单元122。

解析单元121，用于解析各帧图像的图像名称，以获得各帧图像的各帧图像的显示编号。

拼接单元122，用于根据显示编号依次拼接各帧图像，以获得拼接图。

可选地，确定模块13具体用于：

根据预设帧频以及帧图像序列中包含的帧图像数目确定css3动画的显示时长，以及根据显示时长以及帧图像数目确定各帧图像对应的显示时刻。

可选地，生成模块14具体包括：

确定单元141，用于根据各帧图像的尺寸确定各帧图像在拼接图中的起始像素坐标。

建立单元142，用于建立各帧图像在拼接图中的起始像素坐标与各帧图像对应的显示时刻之间的对应关系。

生成单元143，用于根据对应关系生成css3动画。

可选地，该动画生成装置还包括：发送模块21。

发送模块21，用于将css3动画发送至客户端，css3动画中包括动画类型标签。

图4所示装置可以执行图2所示实施例的方法，本实施例未详细描述的部分，可参考对图2所示实施例的相关说明。该技术方案的执行过程和技术效果参见图2所示实施例中的描述，在此不再赘述。

以上所描述的装置实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以产品的形式体现出来，该计算机产品可以存储在计算机可读存储介质中，如rom/ram、磁碟、光盘等，包括若干指令用以使得一台计算机装置(可以是个人计算机，服务器，或者网络装置等)执行各个实施例或者实施例的某些部分的方法。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。