手绘动画视频中的手绘素材解析方式研究

魏 博，邵 猛



手绘动画视频中的手绘素材解析方式研究

魏 博，邵 猛

（深圳市前海手绘科技文化有限公司，广东 深圳 518000）

在手绘动画视频中，手绘素材是非常重要的部分，而手绘素材的主要形式是SVG格式文件，利用它可以在手绘动画视频中实现手绘路径还原和绘制，值得研究。而本文会以SVG文件为出发点，重点对SVG格式的文件组成，SVG元素在手绘动画视频引擎中的解析方式，渲染方式和动画效果等多个方面进行分析和论述，提出针对SVG文件格式标准的解析方法和渲染方法。利用SVG丰富的手绘路径动画，手绘动画视频的表现形式和表现力都得到了大量用户的肯定和喜欢，成为了一种非常重要的演示和视频表现形式。

手绘动画；手绘素材；SVG文件；演示视频

0 引言

手绘动画视频是动画视频中的一部分，而手绘动画视频中的手绘素材是手绘动画的重要组成部分。手绘素材的文件格式是SVG（Scalable Vector Graphics，可伸缩矢量图形），是一种全新的标准开放的矢量图形和动画格式。它支持绘画路径，文字，几何图形，色彩变化等多种效果。SVG的解析和动画展示，构成了手绘动画研究的重要部分。

1 手绘动画视频中的手绘素材

动画视频可以分为MG动画视频和手绘动画视频。“MG”是Motion Graphics的缩写，直译为“动 态图形”，MG动画视频就是我们在很多动画影片中经常能见到的动画形式。而手绘动画视频，是以一只手出现在绘制过程中，以及手绘路径的动画为标志的一种动画形式。手绘动画视频的主要制作过程，首先是故事脚本的编写，然后是手绘动画素材的制作，普遍使用的工具为PhotoShop或Illustrator等绘图工具，然后在After Effect或来画手绘视频创作平台等手绘动画制作工具中进行手绘素材的设置和动画的设置，最后进行配音，形成一个完整的手绘动画视频。而在整个手绘视频创作过程中，手绘素材的制作和手绘素材的解析渲染是一个非常重要的部分，本文重点针对手绘动画视频中的手绘素材的解析和渲染进行分析。

2 手绘素材的解析和渲染

2.1 手绘素材的文件格式标准

手绘素材的主要格式是SVG（可缩放矢量图形，Scalable Vector Graphics，SVG）格式文件，是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式，不依赖于图像分辨率，图形缩放时不会有失真现象。SVG标准由W3C制定，是一个开放标准，该标准于2003年1月14日成为W3C推荐标准，参与定义SVG的组织有：太阳微系统、Adobe、苹果公司、IBM以及柯达。SVG文件中可以包含三种形式：矢量图、位图和文本。矢量图是 SVG 中最常见的组成部分，包括了矩形、圆形、多边形，路径等多种矢量图形；位图是我们常见的PNG JPEG等图形格式，它可以作为SVG的背景图片存在；文本则可以很方便的集成在XML中，作为SVG图形展示中的文字展示。

SVG文件的简单示例组成如下：

可以看到，第一行是 XML 声明，说明了SVG的版本和对外部文件的引用。第二行和第三行引入了外部的SVG DTD，该DTD处于W3C之中，并且在其中包含有所有所允许的SVG元素。SVG代码是以元素结尾，通过其中的根元素.width和height属性可以对该SVG文档的具体宽度以及高度进行设置。version 属性可定义所使用的 SVG 版本，xmlns属性可定义SVG命名空间。SVG的用来创建一个圆。cx和cy属性定义圆中心的x和y坐标stroke和stroke-width属性控制如何显示形状的轮廓。fill 属性设置形状内的颜色。而SVG中最常见的是标签，也就是路径，它能组成很多的形状和图案，让SVG可以完成复杂图形的绘制。而path中的d就是它的数据部分，如上面代码中的d组成的是一个三角形。根据上面的说明，该SVG展示效果是一个红色填充色，黑色边缘色的圆和三角形。如下 图1所示。

图1 简单SVG效果展示

因为SVG是一个制定早且应用广泛的开放标准，所以目前有很多制作工具可以支持SVG的制作，设计师常用的有PhotoShop和Illustrator。在这两种绘图工具中，都可以制作并导出SVG格式的文件，用于展示和手绘动画绘制。

2.2 手绘素材的解析

针对手绘素材SVG文件的格式标准，我们需要进行解析才能进行加载和渲染等后续操作，解析的工作基于SVG文件的XML格式，我们使用DOM解析或者SAX解析的方式来完成。

DOM（Document Object Model，文档对象模型）是W3C组织推荐的处理XML的标准编程接口。因为SVG完全支持DOM标准，而DOM的解析过程，是将XML文件的所有节点全部载入，组装成一棵DOM树，然后按照节点间的关系来解析。这种情况下，节点较少，对应SVG中线条减少的文件是没有问题的，可是当SVG中线条很复杂时，解析的加载过程就会变得很慢。

对应大文件处理的方式，是SAX（Simple API for XML）解析方式，其核心就是事件处理模式，主要是根据事件源并通过事件处理器来进行工作的。当事件源产生了事件之后，对事件处理器的相应的处理方法进行调用，一个事件就能够得到处理。在对事件处理器中的特定的方法进行调用的时候，还需要将相应的事件状态信息传送给事件处理器，这样事件处理器才能够根据这些信息来决定具体的行为。SAX解析器的优点就在于有着很快的解析析速度，并且占用内存少。

上述两种解析方式，虽然解析的加载和解析过程不尽相同，但是它们的实现目标，都是把SVG的XML文本装载并解析为当前系统中可以识别、加载并用于渲染的对象。其核心部分，是对SVG XML文件中标签的识别和解析，特别需要注意的是SVG中style样式表的解析，因为样式之间存在互相引用的问题，所以解析的顺序很重要。另外就是SVG中 标签的解析，因为 标签也会存在互相引用，并在多个引用间传递值和计算方法的情况。

2.3 手绘素材的渲染和绘制

在SVG文件解析为系统对象后，可以利用系统对象的渲染机制进行静态渲染，根据读取的和的类型，以及、、等属性，对尺寸、位置、线条和填充色进行显示。而要实现手绘素材的绘制，除了前面讲述的解析和静态渲染，还需要对解析后的系统对象做特殊的计算和处理。因为SVG文件中虽然包含了路径和颜色等数据，但是文件中的数据组成和排列顺序和实际绘制时的正常顺序有差异。

具体的计算和处理过程，会包括以下几个大的步骤：

（1）分离SVG中的路径数据和填充数据，分别进行数据重组

因为正常的绘制过程，应该是先绘制线条，在线条绘制完成后，再进行统一填色处理，所以这里我们需要对SVG进行路径数据和填充色数据的分离；并且按照正常绘画的顺序和方向，对数据进行重新的排列和分组，排列会影响SVG线条和颜色出现的顺序，而分组会影响绘制时的停顿；

（2）根据动画时长，计算每一帧需要绘制的 内容

因为用户对动画视频播放的感知，是对每一帧图像连续播放时的相差的感知，所以我们对手绘动画的处理，其实就是对动画在每一帧中显示的变化控制。首先我们需要根据动画时长，结合路径和填充色数据的数量进行时间分配，并分别处理。

针对路径数据，需要计算每一帧需要绘制的路径长度，以及已经绘制的路径长度，让路径不断的以一定速度展示出来，针对一帧中涉及到跨越路径分组，或者路径有线条间断的情况，需要处理分组或间断的绘制间隔，这样绘制过程才能更加真实 合理。

针对填充数据，处理会和线条数据不同。这里需要根据填充色对应的区域，按照左上到右下的绘制顺序，在每一帧图像中计算当前应该绘制的区域范围，以及已经绘制的范围，逐帧不断的绘制连续的区域出来，对于涉及到跨域填充区域分组或填充有间断的情况，同样需要处理间隔时间。

（3）动画顺序播放和倒序播放的处理

上述方法更多是针对SVG素材从无到有的绘制过程，在手绘视频中很多场景也会存在一个素材从完全展示到慢慢被手绘“擦除”的过程。这个处理和顺序绘制的过程类似，也需要分离、分组和逐帧计算，不同点在于绘制时的顺序是每一帧在上一帧的基础上，逐帧减少对应的内容。或者更简单的倒序播放处理，在填充色擦除时，路径数据对应一起擦除。这个处理需要在擦除填充色时，匹配对应的线条数据，并同步进行并行的擦除处理。

实际的手绘过程，如下图2和图3所示。

图2 SVG手绘动画过程前半部分

图3 SVG手绘动画过程中间部分

2.4 手绘素材在手绘动画视频中的应用

做上述手绘素材的解析、渲染和绘制过程后，手绘素材的动画就可以出现在手绘动画视频中了。手绘动画的展现形式也有很多种：图像的涂抹动画、手绘图像的绘制动画、手绘图像带有手势的绘制动画等，这些动画让手绘动画视频的展现形式更加丰富，手绘的手势也可以让视频中的焦点更加突出。如下图4是有手势的手绘动画效果。

图4 SVG手绘动画中的手势

3 结语

SVG素材作为手绘素材的最主要组成，以它丰富的手绘动画效果实现，以及通用的设计工具使用方式，正在手绘动画视频中发挥着越来越重要的作用。而通过对SVG文件深入的解析和动画渲染，也让SVG的动画效果可以得到最大程度的发挥。这也让手绘动画视频成为和MG动画视频并存的重要动画形式，并会在未来更多的场景中得到更广泛的应用，所以对于手绘动画素材的原理和应用的研究，变得很有意义。

[1] W3C[Z] https://www.w3.org.

[2] W3School[Z] http://www.w3school.com.cn/.

[3] 宋善德, 彭方娟. 基于SVG及DOM的电力实时信息系统模型[J]. 计算机工程与科学. 2003, 25(3): 94-97.

[4] 刘啸, 毕永年编著. 基于XML的SVG应用指南. 北京科海集团公司. 2001. 3.

[5] 吴於茜. 在平面设计软件中实现SVG格式文档输出. 计算机应用与工程. 2001. 9.

[6] 于鹏飞. 互联网在线视频的用户需求分析[D]. 华东理工大学. 2016.

[7] 周贤波. 基于学习者角度的微课建设策略研究[J]. 中国电化教育. 2015(04).

[8] 陈睿芬. 以做促学做学教合Flash动画教学的探索与尝试[J]. 中小学电教. 2011(Z2).

[9] 邵荣. 基于SVG的数据可视化的研究与应用[J]. 电脑开发与应用. 2009(04).

[10] 李万春. SVG在远程教育中的技术应用[J]. 电子技术与软件工程. 2013(14).

Study on Analysis Methods of Hand-drawn Material in Hand-drawn Animation Video

WEI Bo, SHAO Meng

(Shenzhen qianhai hand-painted technology and culture co. LTD Guangdong Shenzhen 518000)

In the hand-drawn animation video, hand-drawn material is a very important part, while the main form of hand-drawn material is SVG format file, which can be used to realize the hand-drawn path restoration and drawing in the hand-drawn animation video, which is worth studying. In this paper, SVG file is taken as the starting point, focusing on the composition of files in SVG format. The analysis and discussion of SVG elements in the hand-drawn animation video engine are carried out in terms of the parsing mode, rendering mode and animation effect, etc., to propose the parsing method and rendering method for SVG file format standard. Using SVG's rich hand-drawn path animation, the presentation and expressiveness of hand-drawn animation video has been recognized and liked by a large number of users, becoming a very important presentation and video presentation.

Hand-drawn animation; Hand-painted materials; SVG files; Demonstrate video

魏博(1991-)，男，汉族，CEO，来画手绘动画视频创作营销平台。

TP391.7

B

10.3969/j.issn.1003-6970.2018.11.037

魏博，邵猛. 手绘动画视频中的手绘素材解析方式研究[J]. 软件，2018，39（11）：178-181