CN105513115B

CN105513115B - 将SWF转化为Canvas动画的方法和装置

Info

Publication number: CN105513115B
Application number: CN201410548978.1A
Authority: CN
Inventors: 郑高强; 沈婧
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2014-10-16
Filing date: 2014-10-16
Publication date: 2020-06-16
Anticipated expiration: 2034-10-16
Also published as: CN105513115A

Abstract

本发明涉及一种将SWF转化为Canvas动画的方法和装置。所述方法，包括以下步骤：对SWF文件进行解析，遍历所述SWF文件得到元件，所述元件包括影片剪辑和图形，并将所述元件定义存储到元件池中；对所述图形进行压缩处理，导出压缩后的图形数据；对所述影片剪辑进行压缩处理，导出影片剪辑的帧操作指令；通过脚本运行库的应用函数调用压缩后的图形数据和影片剪辑的帧操作指令，还原为Canvas动画。上述将SWF转化为Canvas动画的方法和装置，缩减了数据尺寸，通过脚本运行库的应用函数直接调用压缩后的图形数据和帧操作指令等，不需条件判断，节省了计算时间，因数据尺寸小节省了下载时间，提高了播放流畅度。

Description

将SWF转化为Canvas动画的方法和装置

技术领域

本发明涉及网络应用技术，特别是涉及一种将SWF转化为Canvas动画的方法和装置。

背景技术

SWF(Shock Wave Flash)是一种动画设计软件Flash的专用格式，是一种支持矢量和点阵图形的动画文件格式，被广泛应用于网页设计，动画制作等领域，SWF文件通常被成为Flash文件。

Canvas动画是在HTML5(Hyper Text Mark-up Language，超文本标记语言)网页上使用画布元素绘制的动画。HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言的第五重大修改。

传统的将SWF转化为HTML5动画的方法有Swiffy和Flashcc。其中，swiffy通过解析SWF文件的字节码，分析得到动画中每一帧的信息，并把信息以json(JavaScript ObjectNotation，是一种轻量级的数据交换格式)形式输出，在网页侧，Swiffy通过一个javascript库对json信息做解析，动态生成svg图形，并逐帧变化，最终得到完整的动画。然而，Swiffy的运行库有450KB(千字节)，对于移动网络的智能设备，播放动画需要消耗很长的下载时间，影响播放的流畅性。Flashcc是Flash动画制作工具的cc版本，集成了把SWF转化为Canvas动画的功能，然而，Flascc导出的脚本和运行支持库都较大，前者一般超过100KB，后者接近100KB，在移动网络下播放动画会消耗较长下载时间，影响播放的流畅性。

发明内容

基于此，有必要针对传统的将SWF转化为HTML5动画的方法需要消耗较长下载时间导致播放的流畅度低的问题，提供一种能节省下载时间，提高播放流畅度的将SWF转化为Canvas动画的方法。

此外，还有必要提供一种能节省下载时间，提高播放流畅度的将SWF转化为Canvas动画的装置。

一种将SWF转化为Canvas动画的方法，包括以下步骤：

对SWF文件进行解析，遍历所述SWF文件得到元件，所述元件包括影片剪辑和图形，并将所述元件定义存储到元件池中；

对所述图形进行压缩处理，导出压缩后的图形数据；

对所述影片剪辑进行压缩处理，导出影片剪辑的帧操作指令；

通过脚本运行库的应用函数调用压缩后的图形数据和影片剪辑的帧操作指令，还原为Canvas动画。

一种将SWF转化为Canvas动画的装置，包括：

遍历存储模块，用于对SWF文件进行解析，遍历所述SWF文件得到元件，所述元件包括影片剪辑和图形，并将所述元件定义存储到元件池中；

图形导出模块，用于对所述图形进行压缩处理，导出压缩后的图形数据；

影片剪辑导出模块，用于对所述影片剪辑进行压缩处理，导出影片剪辑的帧操作指令；

还原模块，用于通过脚本运行库的应用函数调用压缩后的图形数据和影片剪辑的帧操作指令，还原为Canvas动画。

上述将SWF转化为Canvas动画的方法和装置，通过对SWF进行解析，获取各个元件，并将各个元件的定义存储到元件池中，然后对影片剪辑元件进行压缩处理，导出影片剪辑的帧操作指令，对图形元件压缩处理，导出图形数据，因元件池中对同一元件只需记录一次定义，缩减了数据尺寸，对元件进行压缩处理，减小了数据尺寸，通过脚本运行库的应用函数直接调用压缩后的图形数据和帧操作指令，不需条件判断，节省了计算时间，因数据尺寸小节省了下载时间，提高了播放流畅度；对图形数据采用简化处理，减小了数据尺寸；对影片剪辑进行指令抽取和属性变化规律识别，可将原本每帧都有的信息变成关键帧的信息大大减少了重复数据且保证了动画描述的完整性。

附图说明

图1为一个实施例中将SWF转化为Canvas动画的方法的流程图；

图2为SWF文件中的实例名称选择示意图；

图3为SWF遍历过程示意图；

图4为显示列表机制示意图；

图5为一个实施例中将SWF转化为Canvas动画的装置的结构框图；

图6为另一个实施例中将SWF转化为Canvas动画的装置的结构框图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

图1为一个实施例中将SWF转化为Canvas动画的方法的流程图。如图1所示，该将SWF转化为Canvas动画的方法，包括以下步骤：

步骤102，对SWF文件进行解析，遍历该SWF文件得到元件，该元件包括影片剪辑和图形，并将该元件定义存储到元件池中。

具体的，SWF文件由影片剪辑、图形、按钮组成。一个SWF中最上层的元件是一个影片剪辑，影片剪辑是一个容器，可以包含子影片剪辑、子图形或子按钮。图2为SWF文件中的实例名称选择示意图，图2中实例名称包括影片剪辑、按钮和图形。此外，即使没有打包的色块等，最后导出SWF时，Flash开发环境将同一层的色块同一打包到一个图形中。

影片剪辑的时间轴，在每一帧中进行一些操作，称为影片剪辑的标签动作，例如定义新的图形、定义新的影片剪辑放到库中、把库的元件添加到舞台上、把前一帧的元件进行transform操作等。库为存储元件的地方；库元件是由用户进行Flash工程中制作的元件。

因在Flash运行时，播放器首先建立一个元件池，用于存储所有元件的定义，然后解析执行每个影片剪辑的标签动作，每一帧标签动作被执行后，Flash将呈现出相应的画面。在定时器驱动之下，播放器不断执行标签动作，会产生帧画面变化，从而显示出动画。所以通过Actionscript3.0解析SWF文件，模拟Flash播放器的运行机制，抓取SWF每一帧的信息，包含全部元件定义和每一帧的标签动作信息，将其转化为更精简的数据。在其他实施例中，也可采用二进制方式读取SWF文件获取每一帧的信息。

在一个实施例中，步骤102包括：

(1)对SWF文件进行解析，抽离每个元件的定义，从根影片剪辑开始逐帧遍历每个元件，若元件为图形，生成图形数据，存储到元件池中。

元件池(Element Pool)用于存储影片剪辑中所有元件定义，包括库元件和影片剪辑中临时建立的图形。建立元件池的目的是为了同样的元件，只输出一份定义数据，以缩减数据大小。

图形数据(Shape Data)用于存储图形的graphics信息，该graphics信息包括路径、填充、渐变信息等。

(2)若元件为影片剪辑，生成对应的影片剪辑定义，且不填充帧操作，存储到元件池中，并遍历该影片剪辑得到该影片剪辑临时数据，再根据元件池中的影片剪辑定义逐帧对该影片剪辑临时数据进行解析，得到帧操作列表信息，该帧操作列表信息包括元件名称、定义标识和帧操作信息，将该帧操作列表信息填充该影片剪辑定义，并将该填充后的影片剪辑定义存储到元件池中。

Movie Clip Data(影片剪辑数据)用于存储影片剪辑信息，主要是Frame ActionList(帧操作列表)记录每帧的动作，即每帧的标签动作。

Frame Action(帧操作)用于存储一个操作指令，包括图形定义、把库中的元件添加到舞台上、设置透明度、设置滤镜、设置形变位移旋转等。

元件名称(name)用于判断元件是否跨帧存在，定义标识(definition Id)用于在元件池中取出影片剪辑的定义，再补充Frame Action信息。

在一个实施例中，在将元件定义存储到元件池之前，该将SWF转化为Canvas动画的方法还包括：判断该元件池是否已存在该元件定义，若是，则跳过，若否，则将该元件定义存储到元件池。

图3为SWF遍历过程示意图。如图3所示，通过影片剪辑(Movie Clip)解析器读取影片剪辑遍历每帧每个元件，若元件为图形(Shape)，则由图形解析器解析得到图形定义数据(Shape Data)，存储到元件池(Element Pool)中；若元件为影片剪辑，则先生成影片剪辑定义，且该影片剪辑定义中不填充任何帧操作(Frame Action)，直接存储到元件池中，同时记录当前影片剪辑每一帧每个子元件的元件名称、定义ID(标识)、元件类型、深度、位置及其他属性信息。该其他属性信息包括透明度、形变矩阵、横向放缩值、纵向放缩值、横向歪斜值、纵向歪斜值、是否遮罩、遮罩名称、滤镜列表、颜色变换信息、混合模式。其中，深度是表示不同元件的叠放顺序。遍历影片剪辑得到影片剪辑临时数据，采用帧操作解析器根据影片剪辑定义对临时数据进行解析得到帧操作列表信息，将帧操作列表信息填充该影片剪辑定义，并将该填充后的影片剪辑定义存储到元件池中。此外，遇到未定义的子影片剪辑采用递归遍历，保证每个影片剪辑和图形都存储在元件池中，且相同的图形或影片剪辑仅对应一个定义。

遍历得到的影片剪辑临时数据的结构如下：

上述临时数据结构中表示，第一帧子信息数组包括元件A和元件B，第二帧子信息数组包括元件A和元件B。

举例说明上述遍历影片剪辑得到数组，如第一帧有A、B两个元件，分别记录下AB元件的元件名称、元件类型、定义ID、坐标、深度、透明度等信息，在记录定义ID的时候检查元件池中是否已经有这个元件的定义，若有直接获取定义ID，若没有，则生成定义ID；再到第二帧只有A元件，记录下A元件的信息，再到第三帧有AC两个元件，以此类推，遍历完成后的数组近似于[[{A}，{B}]，[{A}]，[{A}，{C}]]。

因一轮递归遍历影片剪辑无法完整得到帧操作(Frame Action)，帧操作解析过程需要不断做广度优先搜索和回溯，采用将元件定义和帧操作解析分开，可提高计算效率。

步骤104，对该图形进行压缩处理，导出压缩后的图形数据。

在一个实施例中，对该图形进行压缩处理的步骤包括：对该图形的多种指令分别采用相应的预设字符表示；将该图形的路径信息的每个子指令及所对应的坐标数值作为一个单位进行压缩编码。

具体的，图形数据包括填充、描边、路径信息，其包括11种指令：纯色填充、线形渐变填充、圆形渐变填充、位图填充、设置描边、纯色描边、线形渐变描边、圆形渐变描边、开始路径、结束填充、结束描边。将图形数据的11种指令采用预设字符表示，例如本实施例中采用1到2个字母代表，依次分别是f、lf、rf、bf、ss、s、ls、rs、p、ef、es，在其他实施例中，可采用其他字符表示。每个指令导出的数据类似[“f”，[参数列表]]。该参数列表可从graphics.readGraphicsData接口直接获取到，只需处理颜色表示和浮点精度控制。为了减少导出的字符串长度，浮点数取小数位后1位，而颜色值同一改为web表示法，例如不透明白色表示为#FFFFFF，半透明白色表示为rgba(255，255，255，155)。

路径信息包括5个子指令(moveTo、lineTo、curveTo、bezierCurveTo、closePath)和相应的一系列坐标数值。将5个子指令(moveTo、lineTo、curveTo、bezierCurveTo、closePath)分别用0至4表示，连同坐标，再使用64进制字母编码。编码表如下：["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","0","1","2","3","4","5","6","7","8","9","+","/"]，通过编码表可以把0到63转化为1个字符。

路径信息由若干个子指令组成，每个子指令配对若干个坐标对。把一个子指令和坐标对的组合当作一个单位，逐单位进行压缩。每个单位使用1个字母作为信息头，后续跟若干个字母表示对应的坐标值。本实施例中，信息头有6比特位，前3比特位表示指令(0-4)，第4比特位表示后续的坐标每个值(x或者y)使用2个字符(12比特位)还是3个字符(18比特位)表示，1表示表示3个字符，0表示2个字符。在其他实施例中，0表示3个字符，1表示2个字符等。

信息头后续的字符是对应的坐标参数，例如moveTo指令配对1个坐标点，也就是1个横坐标x和1个纵坐标y。则后续先跟一个x的编码，然后到y的编码。如果指令接收多个坐标点，那么将以xyxy相接的方式表示。后续的字符中，第1比特位是符号位，1表示负数，0表示正数。坐标都乘以10后取整编码，也就是只保留1位小数，然后以二进制形式填到符号位后边的11个比特位或者17个比特位中。在解析时将相应的数除以10，就能还原为1位小数。记录整数比记录小数简单。

例如An0AAMAu4AAA，表示一个线段，从-150，0到150，0。

A–000000：前3比特位(000)表示moveTo，第4比特位(0)表示后续2字符表示一个坐标；

n0–110111011100：第1比特位表示负数，这个数为-1500，也就表示原来的绝对坐标x＝-150.0；

AA–000000000000：表示原来绝对坐标y＝0；

M–001100：前3比特位(001)表示lineTo，第4比特位(1)表示后续3字符表示一个坐标；

Au4–000000,101110,111000：表示300.0，但由于这里是相对前一个x的偏移值，那么实际绝对坐标x＝150.0；

AAA–000000,000000,000000：表示y偏移值为0。

步骤106，对该影片剪辑进行压缩处理，导出影片剪辑的帧操作指令。

该对该影片剪辑进行压缩处理的步骤包括：对该影片剪辑临时数据进行指令抽取处理和属性变化规律识别处理。

具体的，指令抽取包括放置元件指令、移出元件指令和缓动元件指令。

放置元件指令(placeElement)包含的操作有添加新元件，改变元件位置、缩放、旋转属性，增加改变或去掉投影或滤镜。当添加元件或元件属性变化时都会生成一条placeElement指令，指令内容包括指令名和包含元件属性的对象。元件对象的属性包括元件名称、定义ID、元件类型、深度、元件位置、缩放、旋转、透明度及滤镜信息，数据格式为{"action":"placeElement","instanceData":{"type":type,"definitionID":definitionID,"instanceName":instanceName,"depth":depth,"x":x,"y":y,"skewX":skewX,"skewY":skewY,"scaleX":scaleX,"scaleY":scaleY,"alpha":alpha,"isMask":isMask,"maskName":maskName,"shadow":{},"filters":[{},{}…]}}。通过定义ID从元件池里获取元件的定义，再通过元件类型生成影片剪辑元件或图形元件，并将元件定义传给新生成的元件用来提供帧数据(影片剪辑元件)或图形数据(图形元件)。原来的元件名称依然作为新生成的元件名，用来标识和查找该元件，省掉了元件管理的复杂过程，减小了javascript(脚本)运行库的大小。深度用来表示新元件的插入位置。在导出时做指令的排序removeElement指令优先输出，并且placeElement指令是从低层次子元件向高层次子元件遍历的顺序输出，保证了元件层次关系的正确，从而可以直接使用该深度值，不需进行深度计算，从而减小了解析程序代码。

移出元件指令removeElement，把元件从父容器移出的指令，指令内容包括指令名和元件名，数据格式为{"action"："removeElement","instanceName":instanceName}。

缓动元件指令tweenElement，用来描述有规律的属性变化。指令内容包括指令名、缓动时长和缓动对象。缓动对象记录缓动变化的属性及属性目标值，数据格式为{"action":"tweenElement","instanceName":instanceName,"duration":duration,"tweenData":{"x":targetX,"y":tagetY,"skewX":targetSkX,"skewY":targetSkY,"scaleX":targetScX,"scaleY":targetScY}}。缓动是描述一种线性的属性变化，由初始属性值、目标属性值和缓动帧数组成一个完整的缓动数据，中间经过的帧的属性值由缓动数据计算得出。属性的初始值是缓动指令开始执行时的元件的属性值，在还原动画的时候这些属性在执行了之前的指令后可计算出来，所以缓动对象只记录帧长和目标属性值。

属性变化规律识别用来生成缓动元件指令tweenElement。属性变化规律识别可识别线性的属性变化，包括x、y方向旋转，x、y位置变化，x、y方向缩放和透明度的线性变化缓动元件指令可将多条放置元件指令缩减为一条缓动元件指令，大大减小了数据尺寸。

进一步的，该对该影片剪辑临时数据进行指令抽取处理和属性变化规律识别处理的步骤包括：

(1)建立一个动态元件数组，记录当前帧中各元件信息，包括起始帧索引和每帧的属性信息。

具体的，元件信息以帧为单元存储在帧里面。动态元件数组是在连续的时间轴上分析元件的产生、消失以及中间的位置变化。

遍历影片剪辑临时数据得到临时数组。

例如，第一帧有A，B两个元件，临时数组记录下AB元件的元件类型、元件名、定义ID、坐标、深度、透明度等等属性信息，再到第二帧只有A元件了，影片剪辑临时数组记录下A元件的信息，再到第三帧有AC两个元件，此处对应动态元件数组里：A的起始帧索引(startIndex)是1，B的起始帧索引是1，C的起始帧索引是3。

动态元件数组是在遍历临时数组的时候动态更新的。例如，遍历到第一帧，动态元件数组是空的，而影片剪辑临时数组里有AB两个元件，那么第一帧做的事情是placeElementA，placeElementB，同时把AB的信息加到动态元件数组里，动态实例数组更新为[[{A的第一帧属性}],[{B的第一帧属性}]]；遍历到第二帧，动态元件数组有AB，而临时数组只有A，那么就是说B被remove了，去掉B并加上A的第二帧信息，动态实例数组更新为[[{A的第一帧属性},{A的第二帧属性}]]；遍历到第三帧时动态元件数组里有A，而临时数组里有AC，那么C是新加进来的，就要placeElementC，并更新动态实例数组为[[{A的第一帧属性},{A的第二帧属性}，{A的第三帧属性}],[{C的第一帧属性}]]。

动态元件数组格式如下：

[//动态元件数组

[//元件A的数组

{//元件A第一帧信息

startIndex:初始帧Index,//只在第一个元件中记录

name:XXX,

definitionId:XXX,

...其他属性,

},

{//元件A第二帧信息

name:XXX,

definitionId:XXX,

...其他属性,

},

…

],

[//元件B的数组

{//元件B第一帧信息

startIndex:初始帧Index,//只在第一个元件中记录

name:XXX,

definitionId:XXX,

...其他属性,

},

{//元件B第二帧信息

name:XXX,

definitionId:XXX,

...其他属性,

},

…

],

…

]

上述动态元件数组中元件A的第一帧属性包括初始帧索引、元件名称、定义ID和其他属性。其他属性包括透明度、形变矩阵、横向放缩值、纵向放缩值、横向歪斜值、纵向歪斜值、是否遮罩、遮罩名称、滤镜列表、颜色变换信息、混合模式。

(2)遍历影片剪辑临时数据得到临时数组，将该临时数组和动态元件数组进行比对查找得到元件被添加和移出的节点，生成放置元件指令和移出元件指令，并更新动态元件数组，且该放置元件指令是从低层次元件向高层次元件遍历的顺序输出的，该移出元件指令优先输出。

(3)在移出元件和影片剪辑帧结尾时处理元件的位置变化信息，从即将移出的动态元件数组中的元件信息的帧信息数组中找到位置突变的点，在突变点输出放置元件指令。

本实施例中，为了找到突变点，引入hasTween和sameTween的概念。hasTween表示前后两帧属性有无变化，sameTween检测前后两帧tween是否相同的变化，则突变点为：

！hasTween变成hasTween 前后两帧属性变化

sameTween＝false 前后两帧属性变化不同

(4)在突变点之前有缓动变化或元件帧结尾之前有缓动变化的元件生成缓动元件指令。

该对影片剪辑进行压缩处理还包括：

(1)对默认值不输出；

具体的，placeElement指令中属性、滤镜等参数是默认值的不输出。

(2)无变化不输出；

具体的，tweenElement指令中没有参数改变的属性不输出。

(3)对数字保留两位小数处理；

(4)关键帧输出；

具体的，关键帧是指有一个或多个操作的帧。MovieClipData(影片剪辑数据)的FrameActionList(帧操作列表)只对有指令的帧输出，输出格式为：

[

[frameIndex,

[

action,

…

]

(5)可执行化输出。

具体的，一个指令单元输出为[“指令名”，params]的数组形式，数组第一位为指令名，为Javascript运行库的函数名，第二位及以后的为Javascript运行库中相应函数的参数，输出顺序同参数顺序。数组化输出比对象化输出少了属性名的部分，输出数据大大缩减，同时输出可执行化让Javascript运行库也不必编写相应的解析代码，在一定程度上减小了运行库的大小。

步骤108，通过脚本运行库的应用函数调用压缩后的图形数据和影片剪辑的帧操作指令，还原为Canvas动画。

具体的，因canvas动画没有原生的显示列表，可采用flash的显示列表机制进行显示动画。图4为显示列表机制示意图。如图4所示，DispalyObject(显示对象)是所有显示元件的基类，封装了基本的矩阵操作、滤镜操作、缓存操作等。Shadow(阴影)和Filter(滤镜)实现各种滤镜功能。MovieClip对应Flash的影片剪辑，也就是时间轴元件，负责解析swf转化来的动画数据，其中主要是帧操作。Shape是最基本的矢量元件，拥有一个Graphics实例，Graphics可以理解为一个画板，负责具体的绘图。每个Shape在初始化时，需要解析SWF转化来的Graphics信息。Stage是整个动画的舞台，主要是负责基础数据解析、背景颜色处理、定时器驱动等。Filter(滤镜)包括BlurFilter(模糊滤镜)、ColorFilter(颜色滤镜)、ColorMatrixFilter(颜色矩阵滤镜)。

压缩后的图形数据都以[“f”，[参数列表]]的形式存储，在Javascript运行库中对图形数据进行解析。为了代码最小化，利用Javascript运行库中的apply(应用)函数调用图形数据。在Shape中对graphics对象执行如下操作：

this.graphics[字母缩写].apply(this.graphics,参数列表)

其中，“graphics[字母缩写]”可以动态索引到graphics对象的相应方法，而apply函数则可以动态调用该方法，并把相应的参数列表传递给该方法。

每个graphics方法和canvas的接口对应关系如表1所示。

表1

将影片剪辑的帧操作指令还原为动画，包括：在每一帧到来时将帧数加以一，推动动画向后播放；读取当前帧的帧操作指令，并执行；对处于缓动中的元件，更新缓动带来的元件属性变化。其中，影片剪辑的帧操作指令以[“指令名”，参数列表]的形式存储，和图形解析一样利用Javascript的apply函数，直接执行this[array[0]].apply(this,array,slice(1))方法。

上述将SWF转化为Canvas动画的方法，通过对SWF进行解析，获取各个元件，并将各个元件的定义存储到元件池中，然后对影片剪辑元件进行压缩处理，导出影片剪辑的帧操作指令，对图形元件压缩处理，导出图形数据，因元件池中对同一元件只需记录一次定义，缩减了数据尺寸，对元件进行压缩处理，减小了数据尺寸，通过脚本运行库的应用函数直接调用压缩后的图形数据和帧操作指令，不需条件判断，节省了计算时间，因数据尺寸小节省了下载时间，提高了播放流畅度；对图形数据采用简化处理，减小了数据尺寸；对影片剪辑进行指令抽取和属性变化规律识别，可将原本每帧都有的信息变成关键帧的信息大大减少了重复数据且保证了动画描述的完整性。

上述将SWF转化为Canvas动画的方法中导出的数据比Flashcc导出的数据小，部分数据可减小一半体积，且脚本运行库只有30KB，而Flashcc的运行库有100KB左右，大大缩小了运行库的体积。

此外，上述将SWF转化为Canvas动画的方法支持位图和兼容低版本系统。

图5为一个实施例中将SWF转化为Canvas动画的装置的结构框图。图5中的将SWF转化为Canvas动画的装置中的模块为对应于图1中的将SWF转化为Canvas动画的方法所构建的虚拟功能模块，其描述不尽详细的地方请参照方法中描述。如图5所示，该将SWF转化为Canvas动画的装置，包括遍历存储模块510、图形导出模块520、影片剪辑导出模块530和还原模块540。其中：

遍历存储模块510用于对SWF文件进行解析，遍历该SWF文件得到元件，该元件包括影片剪辑和图形，并将该元件定义存储到元件池中。

具体的，SWF文件由影片剪辑、图形、按钮组成。一个SWF中最上层的元件是一个影片剪辑，影片剪辑是一个容器，可以包含子影片剪辑、子图形或子按钮。

该遍历存储模块510还用于对SWF文件进行解析，抽离每个元件的定义，若元件为图形，生成图形数据，存储到元件池中；以及，若元件为影片剪辑，生成对应的影片剪辑定义，且不填充帧操作，存储到元件池中，并遍历该影片剪辑得到该影片剪辑临时数据，再根据元件池中的影片剪辑定义逐帧对该影片剪辑临时数据进行解析，得到帧操作列表信息，该帧操作列表信息包括元件名称、定义标识和帧操作信息，将该帧操作列表信息填充该影片剪辑定义，并将该填充后的影片剪辑定义存储到元件池中。

若元件为影片剪辑，则先生成影片剪辑定义，且该影片剪辑定义中不填充任何帧操作(Frame Action)，直接存储到元件池中，同时遍历存储模块510记录当前影片剪辑每一帧每个子元件的元件名称、定义ID(标识)、元件类型、深度、位置及其他属性信息。该其他属性信息包括透明度、形变矩阵、横向放缩值、纵向放缩值、横向歪斜值、纵向歪斜值、是否遮罩、遮罩名称、滤镜列表、颜色变换信息、混合模式。其中，深度是表示不同元件的叠放顺序。遍历存储模块510遍历影片剪辑得到影片剪辑临时数据，采用帧操作解析器根据影片剪辑定义对临时数据进行解析得到帧操作列表信息，将帧操作列表信息填充该影片剪辑定义，并将该填充后的影片剪辑定义存储到元件池中。此外，遇到未定义的子影片剪辑采用递归遍历，保证每个影片剪辑和图形都存储在元件池中，且相同的图形或影片剪辑仅对应一个定义。

图形导出模块520用于对该图形进行压缩处理，导出压缩后的图形数据。

本实施例中，该图形导出模块520还用于对该图形的矢量数据的多种指令分别采用相应的预设字符表示，以及将该图形的矢量数据的路径信息的每个子指令及所对应的坐标数值作为一个单位进行压缩编码。

影片剪辑导出模块530用于对该影片剪辑进行压缩处理，导出影片剪辑的帧操作指令。本实施例中，影片剪辑导出模块530还用于对该影片剪辑临时数据进行指令抽取处理和属性变化规律识别处理。

该影片剪辑导出模块530还用于建立一个动态元件数组，记录当前帧中各元件的起始帧索引和每帧的属性信息，遍历影片剪辑临时数据得到临时数组，将该临时数组和动态元件数组进行比对查找得到元件被添加和移出的节点，生成放置元件指令和移出元件指令，并更新动态元件数组，且该放置元件指令是从低层次元件向高层次元件遍历的顺序输出的，该移出元件指令优先输出，在移出元件和影片剪辑帧结尾时处理元件的位置变化信息，从即将移出的动态元件数组中的元件信息的帧信息数组中找到位置突变的点，在突变点输出放置元件指令，以及在突变点之前有缓动变化或元件帧结尾之前有缓动变化的元件生成缓动元件指令。

进一步的，该影片剪辑导出模块530还用于对默认值不输出；无变化不输出；对数字保留两位小数处理；关键帧输出；可执行化输出。

还原模块540用于通过脚本运行库的应用函数调用位图数据、压缩后的矢量数据和影片剪辑的帧操作指令，还原为Canvas动画。

this.graphics[字母缩写].apply(this.graphics,参数列表)

每个graphics方法和canvas的接口对应关系如表1所示。

上述将SWF转化为Canvas动画的装置，通过对SWF进行解析，获取各个元件，并将各个元件的定义存储到元件池中，然后对影片剪辑元件进行压缩处理，导出影片剪辑的帧操作指令，对图形元件压缩处理，导出图形数据，因元件池中对同一元件只需记录一次定义，缩减了数据尺寸，对元件进行压缩处理，减小了数据尺寸，通过脚本运行库的应用函数直接调用压缩后的图形数据和帧操作指令，不需条件判断，节省了计算时间，因数据尺寸小节省了下载时间，提高了播放流畅度；对图形数据采用简化处理，减小了数据尺寸；对影片剪辑进行指令抽取和属性变化规律识别，可将原本每帧都有的信息变成关键帧的信息大大减少了重复数据且保证了动画描述的完整性。

图6为另一个实施例中将SWF转化为Canvas动画的装置的结构框图。如图6所示，该将SWF转化为Canvas动画的装置，包括遍历存储模块510、图形导出模块520、影片剪辑导出模块530和还原模块540，还包括判断模块550。其中：判断模块550，用于在将元件定义存储到元件池之前，判断该元件池是否已存在该元件定义，若是，则跳过，若否，则该遍历存储模块将该元件定义存储到元件池。通过判断模块550进行判断，可确保元件池中对同一元件仅记录一次定义，减小数据大小。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述程序可存储于一计算机可读取存储介质中，如本发明实施例中，该程序可存储于计算机系统的存储介质中，并被该计算机系统中的至少一个处理器执行，以实现包括如上述各方法的实施例的流程。其中，所述存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random AccessMemory，RAM)等。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims

1.一种将SWF转化为Canvas动画的方法，包括以下步骤：

对所述图形进行压缩处理，导出压缩后的图形数据；

对所述影片剪辑进行压缩处理，导出影片剪辑的帧操作指令，所述帧操作指令包括放置元件指令、移出元件指令、缓动元件指令中至少一种；

2.根据权利要求1所述的方法，其特征在于，所述对SWF文件进行解析，遍历所述SWF文件得到元件，所述元件包括影片剪辑和图形，并将所述元件的定义存储到元件池中的步骤包括：

对SWF文件进行解析，抽离每个元件的定义，从根影片剪辑开始逐帧遍历每个元件，若元件为图形，生成图形数据，存储到元件池中；

若元件为影片剪辑，生成对应的影片剪辑定义，且不填充帧操作，存储到元件池中，并遍历所述影片剪辑得到所述影片剪辑临时数据，再根据元件池中的影片剪辑定义逐帧对所述影片剪辑临时数据进行解析，得到帧操作列表信息，所述帧操作列表信息包括元件名称、定义标识和帧操作信息，将所述帧操作列表信息填充所述影片剪辑定义，并将所述填充后的影片剪辑定义存储到元件池中。

3.根据权利要求2所述的方法，其特征在于，在将元件定义存储到元件池之前，所述方法还包括：

判断所述元件池是否已存在所述元件定义，若是，则跳过，若否，则将所述元件定义存储到元件池。

4.根据权利要求1所述的方法，其特征在于，所述对所述图形进行压缩处理的步骤包括：

对所述图形的多种指令分别采用相应的预设字符表示；

将所述图形的路径信息的每个子指令及所对应的坐标数值作为一个单位进行压缩编码。

5.根据权利要求2所述的方法，其特征在于，所述对所述影片剪辑进行压缩处理的步骤包括：

对所述影片剪辑临时数据进行指令抽取处理和属性变化规律识别处理。

6.根据权利要求5所述的方法，其特征在于，所述对所述影片剪辑临时数据进行指令抽取处理和属性变化规律识别处理的步骤包括：

建立一个动态元件数组，记录当前帧中各元件的起始帧索引和每帧的属性信息；

遍历影片剪辑临时数据得到临时数组，将所述临时数组和动态元件数组进行比对查找得到元件被添加和移出的节点，生成放置元件指令和移出元件指令，并更新动态元件数组，且所述放置元件指令是从低层次元件向高层次元件遍历的顺序输出的，所述移出元件指令优先输出；

在移出元件和影片剪辑帧结尾时处理元件的位置变化信息，从即将移出的动态元件数组中的元件信息的帧信息数组中找到位置突变的点，在突变点输出放置元件指令；

在突变点之前有缓动变化或元件帧结尾之前有缓动变化的元件生成缓动元件指令。

7.根据权利要求5所述的方法，其特征在于，对影片剪辑进行压缩处理，还包括：

对默认值不输出；

无变化不输出；

对数字保留两位小数处理；

关键帧输出；

可执行化输出。

8.一种将SWF转化为Canvas动画的装置，其特征在于，包括：

影片剪辑导出模块，用于对所述影片剪辑进行压缩处理，导出影片剪辑的帧操作指令，所述帧操作指令包括放置元件指令、移出元件指令、缓动元件指令中至少一种；

9.根据权利要求8所述的装置，其特征在于，所述遍历存储模块还用于对SWF文件进行解析，抽离每个元件的定义，从根影片剪辑开始逐帧遍历每个元件，若元件为图形，生成图形数据，存储到元件池中；以及，若元件为影片剪辑，生成对应的影片剪辑定义，且不填充帧操作，存储到元件池中，并遍历所述影片剪辑得到所述影片剪辑临时数据，再根据元件池中的影片剪辑定义逐帧对所述影片剪辑临时数据进行解析，得到帧操作列表信息，所述帧操作列表信息包括元件名称、定义标识和帧操作信息，将所述帧操作列表信息填充所述影片剪辑定义，并将所述填充后的影片剪辑定义存储到元件池中。

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

判断模块，用于在将元件定义存储到元件池之前，判断所述元件池是否已存在所述元件定义，若是，则跳过，若否，则所述遍历存储模块将所述元件定义存储到元件池。

11.根据权利要求8所述的装置，其特征在于，所述图形导出模块还用于对所述图形的多种指令分别采用相应的预设字符表示，以及将所述图形的路径信息的每个子指令及所对应的坐标数值作为一个单位进行压缩编码。

12.根据权利要求9所述的装置，其特征在于，所述影片剪辑导出模块还用于对所述影片剪辑临时数据进行指令抽取处理和属性变化规律识别处理。

13.根据权利要求12所述的装置，其特征在于，所述影片剪辑导出模块还用于建立一个动态元件数组，记录当前帧中各元件的起始帧索引和每帧的属性信息，遍历影片剪辑临时数据得到临时数组，将所述临时数组和动态元件数组进行比对查找得到元件被添加和移出的节点，生成放置元件指令和移出元件指令，并更新动态元件数组，且所述放置元件指令是从低层次元件向高层次元件遍历的顺序输出的，所述移出元件指令优先输出，在移出元件和影片剪辑帧结尾时处理元件的位置变化信息，从即将移出的动态元件数组中的元件信息的帧信息数组中找到位置突变的点，在突变点输出放置元件指令，以及在突变点之前有缓动变化或元件帧结尾之前有缓动变化的元件生成缓动元件指令。

14.根据权利要求12所述的装置，其特征在于，所述影片剪辑导出模块还用于对默认值不输出；无变化不输出；对数字保留两位小数处理；关键帧输出；可执行化输出。

15.一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时，使得所述处理器执行如权利要求1至7中任一项所述方法的步骤。

16.一种计算机系统，包括存储器和处理器，所述存储器存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行如权利要求1至7中任一项所述方法的步骤。