手繪動畫視頻中的手繪素材解析方式研究

魏 博，邵 猛

?

手繪動畫視頻中的手繪素材解析方式研究

魏 博，邵 猛

（深圳市前海手繪科技文化有限公司，廣東 深圳 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