摘要: 传统的计算机动画都是采用点阵图像格式，这种格式存在不能缩放，不易于修改，占用存储空间大，不能进行自动处理等缺点。矢量图形格式能够克服这些问题，我们基于国际标准的SVG矢量图形格式设计并实现了一个二维矢量动画创作系统，该系统提供了丰富的创作工具，紧密结合动画创作流程，能够全程支持二维动画创作。
关键词: 卡通；矢量动画；SVG矢量图形格式

1.引言
   随着计算机的日渐普及，计算机应用已拓展到卡通动画产业。传统二维动画设计采用手绘方式，手工绘制的图片经过“线拍”（图像扫描过程）后进入计算机处理，国内外普遍采用的是SOFTIMAGE/TOONZ等软件。随之发展到利用鼠标和手写板直接进行卡通设计，国内动画产业界采用最为普遍的是Animator Pro，该软件绘制的是点阵图像。由原画人员先进行素描式的勾画，动画人员进行逐帧细化设计，输出二维卡通的线条稿。相对于“线拍”方式来说，该方式节约扫描成本、保存方便、易于修改，可直接在计算机上进行上色合成等处理。但该种方式改变了动画设计人员的设计方式，国内动画产业已经培养出大量在Animator Pro下创作的原画师和动画师。基于点阵图像的计算机动画尺寸不能很有效地放大，成品后很难在计算机上修改，占用空间大，造成合成不方便。为推动国产卡通产业的发展，需要在创作源头进行计算机动画的矢量化。
   商业矢量化图形处理系统有Flash创作系统、CorelDraw、Illustrator等。Flash是二维卡通的一种风格，电视卡通片一般不采用，而CorelDraw、Illustrator等系统的手感与Animator Pro不同，国内大多数二维卡通创作人员无法直接采用这些商用系统进行卡通创作。因此，必须开发一个界面风格、绘制手感与Animator Pro相一致的二维矢量动画创作系统。本文介绍了一种二维矢量动画创作系统的设计与实现。

2.系统设计
   2.1功能设计
   结合卡通产业化创作流程进行系统设计。实现故事板创作、原画创作、动画创作、动画上色、简单合成等5个功能。为满足以上功能，着重进行以下几部分设计。
   (1)文件处理。解析动画文件内容，动画文件包含整个动画的相关信息；
   (2)帧处理。在动画帧的层次上进行处理，注重手感的矢量绘制，提供丰富的绘图工具；
   (3)动画处理。动画帧之间的处理，动画序列缩放、动画合成、增加删除帧等；
   (4)格式转换。实现与传统计算机行业的通用格式与国际通用的动画格式之间的相互转换。
   2.2文件处理
   SVG是由W3C组织制订的二维矢量图形国际标准，它提供了强大的二维矢量绘制命令，可以绘制各种线条，文字，能对图元进行填色，并提供了图层等高级属性。SVG文件基于XML规范，具有很大的灵活性，处理也很方便。系统采用SVG作为动画帧的存储格式。采用国际标准文件格式能够使系统具有较好的兼容性，有利于推广应用。
   采用帧索引的SVG序列来描述二维矢量动画。帧索引文件中记录了动画中包括了哪些帧、每个帧文件的位置、每帧的时长等信息。帧索引文件就是一个大的帧索引表，表中的每一项都代表了动画中的一帧，如图1

图1  帧索引的SVG序列

   采用帧索引文件的方式存储动画具有以下优点：
   (1)有利于动画功能实现。对于插入删除帧等操作来说，就是增加或删除索引文件中的一项，对于某一个单帧的修改也不会影响整个动画。
   (2)有利于帧重用。可将一个动画帧用在不同的地方，类似的，场景的重用也是非常方便的。
   (3)有利于提高动画的安全性。单帧损坏不会影响整个动画；动画文件的损坏，仍然可以依据素材重建动画文件。
   (4)有利于文件交换。帧文件采用SVG，可使用第三方工具对其进行处理。
   针对帧文件和索引文件，设计相应处理模块,提供对外调用接口。
   2.3帧处理
   (1)图层
   将动画帧设计为一组图层的列表，如图2所示。在Z方向分成多个图层，每个图层中可以包含多个矢量元素，这种组织方法可以很好的与SVG格式的层次结构对应。支持诸如对象上下覆盖关系等。图层具有可修改性、可见性、是否透明、在图层列表中的位置等属性。系统时，将图层用一个容器类来实现，这个容器类中可以存放各个矢量图元对象。图层所具有的属性都设置成图层类的成员变量。

图2  动画帧图层

   (2)图形元素
   图形元素是指一个图层之内的各种图元或者一些图元的组合。图形元素可以嵌套，即一个图形元素中可以包括其它的图形元素。图形元素一般都包含位置、形状、颜色、透明度、子图形元素列表等属性。实现时，图形元素也用一个类来描述，如图3所示。
   (3)文字
   系统支持在动画帧中自动绘制文字，并加入了

图3  图形元素的类结构

   艺术字体支持，还可以将一行文字按照曲线的路径自动排列，实现多种多样的文字效果。
   (4)路径
   路径被用来描述许多基本图元形状、位置等。在系统中通过以下绘图命令来描述的：MoveTo（将画笔移动到某一个坐标点处）、LineTo（从当前画笔位置到指定的坐标位置绘制一条直线）、CurveTo（从当前画笔位置开始，根据指定的坐标点，绘制一段贝塞尔曲线）。在系统中，一个路径就是一系列的绘图命令，如图4所示。

图4  路径的表示方式

   (5)绘制工具
   系统需要提供丰富的绘制工具，方便动画的创作。
   基本形状工具：包括矩形、圆形等。
   线条工具：包括直线、手绘线、逼近曲线。
   填色工具 ：色彩选择。
   形状调整工具：用来调整图形对象的形状，进行旋转、反射等变换。
   画笔工具：毛笔、硬笔等。不同的笔触感知能力，渲染出不同的绘制路径。
   (6)绘制矢量化
   针对动画设计人员来说，不改变绘制习惯，能够按照点阵软件中的操作手感作画是系统实现的关键问题。软件利用贝塞尔曲线拟合的方法，实现了实时绘图曲线的转换。软件将鼠标（手写板）运动轨迹进行矢量转换，并在屏幕上即时显示转换后的矢量线条，算法能根据绘图人员的手感实时调整算法参数，实现了绘图手感的自适应调节。
   手感调节功能主要是根据绘制轨迹估计出绘制的笔的速度，按照画笔的速度和画笔的类型进行矢量化，如图5。

图5  贝塞尔曲线拟合实例

   2.4动画处理
   (1)动画编辑。动画编辑包括插入帧、删除帧、复制帧、调整各帧时长等，通过设置动画索引文件属性实现。
   (2) 动画合成。将多个创作人员制作的动画进行合成，系统支持多人协同创作模式。
   (3) 动画缩放。采用归一化坐标，定义各帧动画尺寸。动画放映时，根据尺寸对帧进行缩放。
   (4)动画预览。动画创作是一项艺术活动，创作者需要预览动画效果。
   2.5 格式转换
   系统实现了点阵图象线条的轮廓提取，并转化为矢量线条，可将大量的手绘动画、点阵动画转换为矢量格式，从而利用大量原有的点阵动画资源，将其融入矢量化动画制作流程中。
   系统支持多种动画和图形格式的转换。目前支持相互转换的动画格式有：FLC/FLI、SWF、AnimateGIF等；支持的图形格式有BMP、PCX、GIF、JPEG、PNG等。对多种动画和图形图像格式的支持更进一步提高了本系统的可用性。

3.系统实现
   3.1开发平台
   系统采用跨平台的编程语言和平台无关性设计，实现制作软件的跨平台设计。其开发平台如图6。

图6  系统开发平台

   采用流行的C++语言，采用面向对象的设计实现方法。GUI组件库选用Gtk/Gtkmm，Gtk/Gtkmm是跨平台的GUI组件库，组件丰富，功能强大，是目前Linux平台上的首选GUI组件库。
3.2软件结构
   在软件设计上，采用分层次，分模块的方式进行。其软件划分如图7。

图7  软件结构

   3.3软件应用
   系统在Windows和Linux操作系统下实现了故事板、原画创作、动画创作、上色、合成等功能。
   系统在卡通创作企业进行了试用，主要用于二维卡通原画创作、动画创作，使用实例如图8，9所示。

图8  原画人员创作实例

图9  动画人员创作实例

4.结论
   矢量图像相对于点阵图像来说具有很多的优点，将这些优点和计算机动画创作结合起来，就诞生了计算机二维矢量动画创作系统。矢量创作系统能够大大提高动画创作者的生产率，提高计算机动画的质量。

参考文献
[1] 苏步青.计算几何,上海:上海科学技术出版社,1981
[2] 王飞,计算机图形学基础,北京:北京邮电大学出版社,2000
[3] Eric Gamma, Richard Helm, Ralph Johnson, John Vlissides, Design Patterns, 2000.9
[4] Donald Hearn , M.Pauline Baker, Computer Graphics Second Edition,电子工业出版社2002
[5] http://www.gtkmm.org
[6] Owen, M., Willis, P., Modelling and interpolating cartoon characters, Proc. of Computer Animation '94, 1994
[7] Witkin, A., Popovic, Z.,Motion warping, Proc. of Siggraph’95, 1995
[8] Fekete, J. D., Bizouarn, E., Cournaire, E., Galas, T.,  Taillefer, F., Tic Tac Toon: A paperless system for professional 2D animation, Proc. of Siggraph’95, 1995
[9] Litwinowicz, P.C., Inkwell: a 2/1/2-D animation system, Computer Graphics, Vol. 25/4, 1991
[10]Van Reeth, F.,Integrating 21/2-D computer animation techniques for supporting traditional animation,Proc. of Computer Animation’96, 1996
[11]CONCOLATO C., MOISSINAC J. C., DUFOURD J. C.,Representing 2d cartoons using svg, Proc. SMIL European Conference ’03 ,2003
[12]FERRAIOLO J., JUN F., JACKSON D.,Scalable vector graphics (svg) 1.1,specifications. W3C Recommendation, 2003
[13]HERMAN I., HOPGOOD B., DUCE D.. Svg: Scalable vector graphics,tutorial notes, WWW2002 Conference, 2002
[14]Mansfield P.A., Common graphical object models and how to translate them to SVG., SVG Open, 2002
[15]Peiya Liu, Scalable Vector Graphics “Standards”, http://www.w3.org/TR/ SVG/,http://www.w3.org/TR/SVG11/,http://www.w3.org/TR/SVGMobile/, http://www.w3.org/TR/SVG12/, 2004
[16]SpareParts.SVG Notes (MX), http://actionscripttoolbox.com/svgnotes. php, 2004