魏 博，邵 猛

?

手繪動(dòng)畫視頻中的手繪素材解析方式研究

魏 博，邵 猛

（深圳市前海手繪科技文化有限公司，廣東 深圳 518000）

在手繪動(dòng)畫視頻中，手繪素材是非常重要的部分，而手繪素材的主要形式是SVG格式文件，利用它可以在手繪動(dòng)畫視頻中實(shí)現(xiàn)手繪路徑還原和繪制，值得研究。而本文會(huì)以SVG文件為出發(fā)點(diǎn)，重點(diǎn)對(duì)SVG格式的文件組成，SVG元素在手繪動(dòng)畫視頻引擎中的解析方式，渲染方式和動(dòng)畫效果等多個(gè)方面進(jìn)行分析和論述，提出針對(duì)SVG文件格式標(biāo)準(zhǔn)的解析方法和渲染方法。利用SVG豐富的手繪路徑動(dòng)畫，手繪動(dòng)畫視頻的表現(xiàn)形式和表現(xiàn)力都得到了大量用戶的肯定和喜歡，成為了一種非常重要的演示和視頻表現(xiàn)形式。

手繪動(dòng)畫；手繪素材；SVG文件；演示視頻

0 引言

手繪動(dòng)畫視頻是動(dòng)畫視頻中的一部分，而手繪動(dòng)畫視頻中的手繪素材是手繪動(dòng)畫的重要組成部分。手繪素材的文件格式是SVG（Scalable Vector Graphics，可伸縮矢量圖形），是一種全新的標(biāo)準(zhǔn)開放的矢量圖形和動(dòng)畫格式。它支持繪畫路徑，文字，幾何圖形，色彩變化等多種效果。SVG的解析和動(dòng)畫展示，構(gòu)成了手繪動(dòng)畫研究的重要部分。

1 手繪動(dòng)畫視頻中的手繪素材

動(dòng)畫視頻可以分為MG動(dòng)畫視頻和手繪動(dòng)畫視頻。“MG”是Motion Graphics的縮寫，直譯為“動(dòng) 態(tài)圖形”，MG動(dòng)畫視頻就是我們?cè)诤芏鄤?dòng)畫影片中經(jīng)常能見(jiàn)到的動(dòng)畫形式。而手繪動(dòng)畫視頻，是以一只手出現(xiàn)在繪制過(guò)程中，以及手繪路徑的動(dòng)畫為標(biāo)志的一種動(dòng)畫形式。手繪動(dòng)畫視頻的主要制作過(guò)程，首先是故事腳本的編寫，然后是手繪動(dòng)畫素材的制作，普遍使用的工具為PhotoShop或Illustrator等繪圖工具，然后在After Effect或來(lái)畫手繪視頻創(chuàng)作平臺(tái)等手繪動(dòng)畫制作工具中進(jìn)行手繪素材的設(shè)置和動(dòng)畫的設(shè)置，最后進(jìn)行配音，形成一個(gè)完整的手繪動(dòng)畫視頻。而在整個(gè)手繪視頻創(chuàng)作過(guò)程中，手繪素材的制作和手繪素材的解析渲染是一個(gè)非常重要的部分，本文重點(diǎn)針對(duì)手繪動(dòng)畫視頻中的手繪素材的解析和渲染進(jìn)行分析。

2 手繪素材的解析和渲染

2.1 手繪素材的文件格式標(biāo)準(zhǔn)

手繪素材的主要格式是SVG（可縮放矢量圖形，Scalable Vector Graphics，SVG）格式文件，是一種基于可擴(kuò)展標(biāo)記語(yǔ)言（XML），用于描述二維矢量圖形的圖形格式，不依賴于圖像分辨率，圖形縮放時(shí)不會(huì)有失真現(xiàn)象。SVG標(biāo)準(zhǔn)由W3C制定，是一個(gè)開放標(biāo)準(zhǔn)，該標(biāo)準(zhǔn)于2003年1月14日成為W3C推薦標(biāo)準(zhǔn)，參與定義SVG的組織有：太陽(yáng)微系統(tǒng)、Adobe、蘋果公司、IBM以及柯達(dá)。SVG文件中可以包含三種形式：矢量圖、位圖和文本。矢量圖是 SVG 中最常見(jiàn)的組成部分，包括了矩形、圓形、多邊形，路徑等多種矢量圖形；位圖是我們常見(jiàn)的PNG JPEG等圖形格式，它可以作為SVG的背景圖片存在；文本則可以很方便的集成在XML中，作為SVG圖形展示中的文字展示。

SVG文件的簡(jiǎn)單示例組成如下：

可以看到，第一行是 XML 聲明，說(shuō)明了SVG的版本和對(duì)外部文件的引用。第二行和第三行引入了外部的SVG DTD，該DTD處于W3C之中，并且在其中包含有所有所允許的SVG元素。SVG代碼是以元素結(jié)尾，通過(guò)其中的根元素.width和height屬性可以對(duì)該SVG文檔的具體寬度以及高度進(jìn)行設(shè)置。version 屬性可定義所使用的 SVG 版本，xmlns屬性可定義SVG命名空間。SVG的用來(lái)創(chuàng)建一個(gè)圓。cx和cy屬性定義圓中心的x和y坐標(biāo)stroke和stroke-width屬性控制如何顯示形狀的輪廓。fill 屬性設(shè)置形狀內(nèi)的顏色。而SVG中最常見(jiàn)的是標(biāo)簽，也就是路徑，它能組成很多的形狀和圖案，讓SVG可以完成復(fù)雜圖形的繪制。而path中的d就是它的數(shù)據(jù)部分，如上面代碼中的d組成的是一個(gè)三角形。根據(jù)上面的說(shuō)明，該SVG展示效果是一個(gè)紅色填充色，黑色邊緣色的圓和三角形。如下 圖1所示。

圖1 簡(jiǎn)單SVG效果展示

因?yàn)镾VG是一個(gè)制定早且應(yīng)用廣泛的開放標(biāo)準(zhǔn)，所以目前有很多制作工具可以支持SVG的制作，設(shè)計(jì)師常用的有PhotoShop和Illustrator。在這兩種繪圖工具中，都可以制作并導(dǎo)出SVG格式的文件，用于展示和手繪動(dòng)畫繪制。

2.2 手繪素材的解析

針對(duì)手繪素材SVG文件的格式標(biāo)準(zhǔn)，我們需要進(jìn)行解析才能進(jìn)行加載和渲染等后續(xù)操作，解析的工作基于SVG文件的XML格式，我們使用DOM解析或者SAX解析的方式來(lái)完成。

DOM（Document Object Model，文檔對(duì)象模型）是W3C組織推薦的處理XML的標(biāo)準(zhǔn)編程接口。因?yàn)镾VG完全支持DOM標(biāo)準(zhǔn)，而DOM的解析過(guò)程，是將XML文件的所有節(jié)點(diǎn)全部載入，組裝成一棵DOM樹，然后按照節(jié)點(diǎn)間的關(guān)系來(lái)解析。這種情況下，節(jié)點(diǎn)較少，對(duì)應(yīng)SVG中線條減少的文件是沒(méi)有問(wèn)題的，可是當(dāng)SVG中線條很復(fù)雜時(shí)，解析的加載過(guò)程就會(huì)變得很慢。

對(duì)應(yīng)大文件處理的方式，是SAX（Simple API for XML）解析方式，其核心就是事件處理模式，主要是根據(jù)事件源并通過(guò)事件處理器來(lái)進(jìn)行工作的。當(dāng)事件源產(chǎn)生了事件之后，對(duì)事件處理器的相應(yīng)的處理方法進(jìn)行調(diào)用，一個(gè)事件就能夠得到處理。在對(duì)事件處理器中的特定的方法進(jìn)行調(diào)用的時(shí)候，還需要將相應(yīng)的事件狀態(tài)信息傳送給事件處理器，這樣事件處理器才能夠根據(jù)這些信息來(lái)決定具體的行為。SAX解析器的優(yōu)點(diǎn)就在于有著很快的解析析速度，并且占用內(nèi)存少。

上述兩種解析方式，雖然解析的加載和解析過(guò)程不盡相同，但是它們的實(shí)現(xiàn)目標(biāo)，都是把SVG的XML文本裝載并解析為當(dāng)前系統(tǒng)中可以識(shí)別、加載并用于渲染的對(duì)象。其核心部分，是對(duì)SVG XML文件中標(biāo)簽的識(shí)別和解析，特別需要注意的是SVG中style樣式表的解析，因?yàn)闃邮街g存在互相引用的問(wèn)題，所以解析的順序很重要。另外就是SVG中 標(biāo)簽的解析，因?yàn)? 標(biāo)簽也會(huì)存在互相引用，并在多個(gè)引用間傳遞值和計(jì)算方法的情況。

2.3 手繪素材的渲染和繪制

在SVG文件解析為系統(tǒng)對(duì)象后，可以利用系統(tǒng)對(duì)象的渲染機(jī)制進(jìn)行靜態(tài)渲染，根據(jù)讀取的和的類型，以及、、等屬性，對(duì)尺寸、位置、線條和填充色進(jìn)行顯示。而要實(shí)現(xiàn)手繪素材的繪制，除了前面講述的解析和靜態(tài)渲染，還需要對(duì)解析后的系統(tǒng)對(duì)象做特殊的計(jì)算和處理。因?yàn)镾VG文件中雖然包含了路徑和顏色等數(shù)據(jù)，但是文件中的數(shù)據(jù)組成和排列順序和實(shí)際繪制時(shí)的正常順序有差異。

具體的計(jì)算和處理過(guò)程，會(huì)包括以下幾個(gè)大的步驟：

（1）分離SVG中的路徑數(shù)據(jù)和填充數(shù)據(jù)，分別進(jìn)行數(shù)據(jù)重組

因?yàn)檎５睦L制過(guò)程，應(yīng)該是先繪制線條，在線條繪制完成后，再進(jìn)行統(tǒng)一填色處理，所以這里我們需要對(duì)SVG進(jìn)行路徑數(shù)據(jù)和填充色數(shù)據(jù)的分離；并且按照正常繪畫的順序和方向，對(duì)數(shù)據(jù)進(jìn)行重新的排列和分組，排列會(huì)影響SVG線條和顏色出現(xiàn)的順序，而分組會(huì)影響繪制時(shí)的停頓；

（2）根據(jù)動(dòng)畫時(shí)長(zhǎng)，計(jì)算每一幀需要繪制的 內(nèi)容

因?yàn)橛脩魧?duì)動(dòng)畫視頻播放的感知，是對(duì)每一幀圖像連續(xù)播放時(shí)的相差的感知，所以我們對(duì)手繪動(dòng)畫的處理，其實(shí)就是對(duì)動(dòng)畫在每一幀中顯示的變化控制。首先我們需要根據(jù)動(dòng)畫時(shí)長(zhǎng)，結(jié)合路徑和填充色數(shù)據(jù)的數(shù)量進(jìn)行時(shí)間分配，并分別處理。

針對(duì)路徑數(shù)據(jù)，需要計(jì)算每一幀需要繪制的路徑長(zhǎng)度，以及已經(jīng)繪制的路徑長(zhǎng)度，讓路徑不斷的以一定速度展示出來(lái)，針對(duì)一幀中涉及到跨越路徑分組，或者路徑有線條間斷的情況，需要處理分組或間斷的繪制間隔，這樣繪制過(guò)程才能更加真實(shí) 合理。

針對(duì)填充數(shù)據(jù)，處理會(huì)和線條數(shù)據(jù)不同。這里需要根據(jù)填充色對(duì)應(yīng)的區(qū)域，按照左上到右下的繪制順序，在每一幀圖像中計(jì)算當(dāng)前應(yīng)該繪制的區(qū)域范圍，以及已經(jīng)繪制的范圍，逐幀不斷的繪制連續(xù)的區(qū)域出來(lái)，對(duì)于涉及到跨域填充區(qū)域分組或填充有間斷的情況，同樣需要處理間隔時(shí)間。

（3）動(dòng)畫順序播放和倒序播放的處理

上述方法更多是針對(duì)SVG素材從無(wú)到有的繪制過(guò)程，在手繪視頻中很多場(chǎng)景也會(huì)存在一個(gè)素材從完全展示到慢慢被手繪“擦除”的過(guò)程。這個(gè)處理和順序繪制的過(guò)程類似，也需要分離、分組和逐幀計(jì)算，不同點(diǎn)在于繪制時(shí)的順序是每一幀在上一幀的基礎(chǔ)上，逐幀減少對(duì)應(yīng)的內(nèi)容?；蛘吒?jiǎn)單的倒序播放處理，在填充色擦除時(shí)，路徑數(shù)據(jù)對(duì)應(yīng)一起擦除。這個(gè)處理需要在擦除填充色時(shí)，匹配對(duì)應(yīng)的線條數(shù)據(jù)，并同步進(jìn)行并行的擦除處理。

實(shí)際的手繪過(guò)程，如下圖2和圖3所示。

圖2 SVG手繪動(dòng)畫過(guò)程前半部分

圖3 SVG手繪動(dòng)畫過(guò)程中間部分

2.4 手繪素材在手繪動(dòng)畫視頻中的應(yīng)用

做上述手繪素材的解析、渲染和繪制過(guò)程后，手繪素材的動(dòng)畫就可以出現(xiàn)在手繪動(dòng)畫視頻中了。手繪動(dòng)畫的展現(xiàn)形式也有很多種：圖像的涂抹動(dòng)畫、手繪圖像的繪制動(dòng)畫、手繪圖像帶有手勢(shì)的繪制動(dòng)畫等，這些動(dòng)畫讓手繪動(dòng)畫視頻的展現(xiàn)形式更加豐富，手繪的手勢(shì)也可以讓視頻中的焦點(diǎn)更加突出。如下圖4是有手勢(shì)的手繪動(dòng)畫效果。

圖4 SVG手繪動(dòng)畫中的手勢(shì)

3 結(jié)語(yǔ)

SVG素材作為手繪素材的最主要組成，以它豐富的手繪動(dòng)畫效果實(shí)現(xiàn)，以及通用的設(shè)計(jì)工具使用方式，正在手繪動(dòng)畫視頻中發(fā)揮著越來(lái)越重要的作用。而通過(guò)對(duì)SVG文件深入的解析和動(dòng)畫渲染，也讓SVG的動(dòng)畫效果可以得到最大程度的發(fā)揮。這也讓手繪動(dòng)畫視頻成為和MG動(dòng)畫視頻并存的重要?jiǎng)赢嬓问剑?huì)在未來(lái)更多的場(chǎng)景中得到更廣泛的應(yīng)用，所以對(duì)于手繪動(dòng)畫素材的原理和應(yīng)用的研究，變得很有意義。

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

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

[3] 宋善德, 彭方娟. 基于SVG及DOM的電力實(shí)時(shí)信息系統(tǒng)模型[J]. 計(jì)算機(jī)工程與科學(xué). 2003, 25(3): 94-97.

[4] 劉嘯, 畢永年編著. 基于XML的SVG應(yīng)用指南. 北京科海集團(tuán)公司. 2001. 3.

[5] 吳於茜. 在平面設(shè)計(jì)軟件中實(shí)現(xiàn)SVG格式文檔輸出. 計(jì)算機(jī)應(yīng)用與工程. 2001. 9.

[6] 于鵬飛. 互聯(lián)網(wǎng)在線視頻的用戶需求分析[D]. 華東理工大學(xué). 2016.

[7] 周賢波. 基于學(xué)習(xí)者角度的微課建設(shè)策略研究[J]. 中國(guó)電化教育. 2015(04).

[8] 陳睿芬. 以做促學(xué)做學(xué)教合Flash動(dòng)畫教學(xué)的探索與嘗試[J]. 中小學(xué)電教. 2011(Z2).

[9] 邵榮. 基于SVG的數(shù)據(jù)可視化的研究與應(yīng)用[J]. 電腦開發(fā)與應(yīng)用. 2009(04).

[10] 李萬(wàn)春. SVG在遠(yuǎn)程教育中的技術(shù)應(yīng)用[J]. 電子技術(shù)與軟件工程. 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，來(lái)畫手繪動(dòng)畫視頻創(chuàng)作營(yíng)銷平臺(tái)。

TP391.7

B

10.3969/j.issn.1003-6970.2018.11.037

魏博，邵猛. 手繪動(dòng)畫視頻中的手繪素材解析方式研究[J]. 軟件，2018，39（11）：178-181