一種草圖動畫工具的設計與實現

(中國科學院 軟件研究所， 北京 100190)

摘要：針對當前計算機在中小學課堂應用中采用靜態幻燈片模式對學生缺乏吸引力、教學效率不高等不足，以及現有的動畫制作工具對于大部分教師難以使用的問題，探討了基于運動軌跡的動畫制作方法、草圖動畫中的動作協調，以及形變算法在草圖動畫中的應用等問題，實現了一個草圖動畫制作工具。該草圖動畫制作工具支持平移、旋轉、放縮等草圖動畫中常用的動作方式。基于運動軌跡的動畫制作方法和簡潔的用戶界面使得設置動作像繪制物體一樣簡單。使用形變動畫作為軌跡動畫的補充方式，可制作出更加生動的動畫。老師使用該工具可以快捷方便地制作出自己的動畫。

關鍵詞：草圖動畫；動作同步； 基于軌跡；形變動畫

中圖分類號：TP319文獻標志碼：A

文章編號：1001-3695(2008)11-3394-04



Design and implementation of sketching animation tool



WU Guang-yu，WANG Dan-li，DAI Guo-zhong

(Institute of Software， Chinese Academy of Sciences， Beijing 100190， China)

Abstract:Computer has become an important tool used in classroom. Yet there are some limitations. Most of them provide static slides in the project mode， which are not attractive to children， especially to the younger ones. And most of current animation tools are too complicated to common teachers. Aimed at removing the complexity barrier and allowing teachers to create a wide variety of animations quickly， this paper did some researches on the method of track-based animation， motion coordination of sketching animation， and the method of morphing. It also proposed a sketching animation system. The system supported translation， rotation，scale and other important motions of sketching animation. The track-based method made creating animations as easy as drawing. Morphing， as a supplement，could support more vivid animations. Teachers with this system could design and created their own animation quickly.



Key words:sketching animation; motion coordination; track-based; morphing

20世紀70年代開始計算機就已經進入課堂，計算機輔助教學給老師和學生都帶來了極大的好處。微軟的PowerPoint、蘋果公司的Keynote等都得到了廣泛的應用。這些都被認為是課堂教學最大的技術改革^[1]。然而它們都是播放靜態幻燈片的模式，越來越多的研究者意識到這種幻燈片的模式使得學生被動接受講課的內容，而不是積極思考，因為他們不能從老師那里得到及時的回應，不能很好地參與到課堂教學之中^[2]。而且靜態幻燈片的模式對兒童缺乏吸引力。如果老師能夠在課堂上適當地使用一些動畫可以使這種情況得到改善。首先，即使簡單的動畫也能夠表達豐富的內容，使用動畫能夠方便地表達動態的場景和概念，而且更加生動形象，也更具吸引力^[3]；其次，動畫可以使學生更加積極主動地參與到課堂的學習中去。

除了教學，動畫在原型設計、概念設計、娛樂、交流等方面也有著廣泛的應用。傳統的制作動畫的方式是繪制大量的幀，這種方式不僅費力而且乏味。雖然計算機已經被用來幫助動畫制作者消除這些乏味的工作，但是仍然存在問題：只有少數專業人員才能掌握這些動畫制作工具。現在的動畫制作工具都有著復雜的交互界面，提供專業的功能。它們雖然比手繪所有幀節省了大量時間，但對于大部分老師仍然難以使用。

1國內外研究現狀

認知科學、心理學和教育等領域的學者在動畫如何幫助用戶學習和理解，以及如何有效地使用動畫等方面做了大量的研究。Brown大學的Rieber描述了在什么樣的情況下使用動畫能夠幫助學習與運動和軌跡相關的概念。Tversky等人在論文“Can it be facility”中解釋了為什么有些動畫不能有效幫助交流，并且說明了重放（playback）的重要性。這些研究結果預示了將來什么樣的動畫能夠流行，很多地方都值得學習和借鑒。

很多研究者很早就試圖開發一種有用的草圖動畫工具。最早的草圖動畫工具是Baecker的Genesys 系統^[4]。最近幾年，使用自由繪制的方式生成2D動畫開始流行起來。Richard C.Davis 和James A.Landay 對草圖動畫工具的潛在用戶需求進行了領域研究。他們提出了草圖動畫最重要的幾種操作，并實現了一個原型系統，該系統能支持他們提出的最重要的幾種需求^[5]，但是他們忽略了動作同步。動作的同步也是草圖動畫中非常重要的一個方面。Tomer Moscovich和John F. Hughes 提出了能使草圖動畫更容易使用的幾種方法，即實例驅動（motion by example）的方法和事件同步^[6]。除此之外還有一些復雜的系統，如TicTacToon^[7]、Fabian Di Fiore等人^[8]的multi-level sketching tool。雖然動畫制作者使用這些系統能夠制作復雜生動的動畫，但是他們對于普通用戶來說難以使用。在教育領域也有一些很有價值的系統，如Davis^[9]的用于機械教學的系統和LaViola等人^[10]的數學公式系統。但是這些系統都是限于特殊領域的2D動畫系統。自由繪制的方式也被用到了3D建模和3D動畫制作。Igarashi等人^[11]的3D建模系統Teddy能夠通過2D手繪輸入生成3D模型，后來他們又提出了空間幀動畫的概念來生成3D動畫^[12]。這種方式對于虛構的角色比人物角色更適合，因為它不是基于運動捕捉的數據。相反，M. Thorne等人^[13]的Matthew Thorne更適合控制人物角色的動畫。雖然草圖被廣泛地用于三維系統，制作三維的物體和動畫仍然比二維的困難很多，而且三維系統大多數只能支持很少的幾種運動方式。

2草圖動畫方法研究

筆者提出草圖動畫的方法由三個階段組成，即繪制物體、設置動作和動作同步。第一階段用戶首先繪制物體。物體既可以是一條簡單的曲線，也可以由多條曲線組合而成（圖1）。在動作設置階段采用了基于運動軌跡的思想。所有基本動作（平移、旋轉、放縮）都采用了記錄運動軌跡的方式。用戶只需按照自己想要的方式移動（或旋轉、放縮）一個物體，系統記錄時間和位置信息。利用這些信息可以回放用戶移動（或旋轉、放縮）物體的過程，從而形成動畫。動作同步階段的主要任務是調整動作的時間，使得不同物體的動作或者同一物體的不同動作能夠達到同步的效果。

21基于軌跡的動畫方式

為了描述方便，首先簡要介紹物體的建模方式。本文用樹型結構來建模復雜的物體，樹的葉子節點表示一條筆跡。圖2給出了圖1中鐘表的樹型結構。當用戶進行選擇操作時，如果一次選中多條筆跡，那么這些筆記就會被組合成一個新的節點。然而樹型結構的生成過程對于用戶是透明的，用戶只需要選擇物體，然后為它們設置動作，無須知道樹型結構生成的過程。本文采用了基于軌跡的動作方式。使用這種方式，用戶只需要選中感興趣的物體，然后按照想要的方式移動（旋轉、放縮）該物體。系統會記錄用戶動作的時間和位置信息。所有動作（移動、旋轉、放縮）都被記錄成一條運動軌跡。播放動畫時只需要重現用戶移動的軌跡。用這種方式可以很簡單地創作動畫。圖3中，用戶給長方形物體設置了兩個動作：平移和旋轉。

假如用戶在畫布上畫了一條筆跡，然后給它設置了N個動作。用S0表示用戶畫的原始筆跡，用Mi表示第i個動作（1≤i≤N），使用Ti(t)是在時間t時動作Mi的變化矩陣。使用式（1）來計算S0在時間t時的變化矩陣：

T(t)=(Ni=1Ti(t))×Tp(t)（1）

其中:Tp(t)是S0的父節點在時間t時的變化矩陣。一個動作的軌跡用path=P1 P2…Pn來表示。其中Pi= (xi，yi，ti)。xi和yi記錄軌跡上第i個點的位置；ti是該點的時間標記。那么該運動軌跡在時間t時的變換矩陣可以通過Pj和P1計算出來，j=max(i，1≤i≤n ti≤t) 。最后使用式（2）計算出S0在時間t時的形狀和位置：

S(t)=S0×T(t)(2)

22動作同步

基于軌跡的動畫方式的問題之一是動作同步。在關鍵幀動畫技術中，制作者只需要在相應的幀中繪制它們就能在表示動作的同時發生或先后發生關系。在基于軌跡的運動方式中，動畫制作者不得不依靠他們對時間的感覺和動作控制能力。例如在圖3中，用戶想讓長方形的平移和旋轉動作同時開始、同時結束。首先，用戶給該長方形設置了一個旋轉動作，然后開始設置平移動作。當看到該長方形開始旋轉時，用戶同時拖動該長方形平移，直到他看到旋轉停止時就停止拖動操作。這個過程的準確程度依賴于用戶的感覺和反應速度，平移操作的開始和結束時間都不可避免地落后于旋轉操作。為了幫助用戶更好地完成這個任務，提供了時間編輯工具，以使用戶能夠重新設置動作的開始和結束時間。假設一個動作軌跡上有m個點，各個點的原始時間分別是t1，t2，…，tm。其中：t1是開始時間；tm是結束時間。用戶重新設置開始和結束時間以后，開始和結束時間變成了t*1和t*m。使用式（3）重新計算該軌跡上所有點的時間。 

t*i=t*1+(t*m-t*1)(ti-t1)/(tm-t1)(3)

雖然重新設置開始和結束時間很簡單，但是很多時候這還不夠。例如圖4（a）中小方塊沿正弦線移動的同時，(b)中的箭頭圍繞原點旋轉。用戶希望當小方塊移動到某個位置的同時箭頭旋轉相應的角度（特別是0、π/2、π、3π/2、2π）。當用戶重新設置了開始和結束時間以后，雖然他們能夠同時開始和結束，但是中間過程卻不能正確地同步（圖5（b））。

圖5(a)是用戶設置了小方塊的平移動作和箭頭的旋轉動作;(b)是 小方塊已經移動到α=π 的位置， 但是箭頭還沒有旋轉到π的角度。

為了解決這類問題引入了另外一個概念：關鍵點。用戶可以為一個動作軌跡上設置若干關鍵點。圖4中分別給小方塊的平移動作軌跡和箭頭的旋轉動作軌跡設置了三個關鍵點。然后用戶可以重新設置這些關鍵點的時間，只需要把相應的關鍵點設置成相同的時間（1和4、2和5、4和6），這兩個動作就能很好地協作了。開始點和結束點是特殊的關鍵點。雖然一個動作可以設置的關鍵點沒有數量上的限制，關鍵點越多，控制越精確，相應的動作協作就越好，但是大多數簡單的運動協作，三到五個關鍵點就足夠了。

23跟形變動畫的結合

前面的章節中介紹了草圖動畫工具的軌跡動畫功能，這一節將介紹另外一種動畫方式：形變動畫。使用形變動畫作為軌跡動畫的補充，用戶可以創作出更加生動多變的動畫。本文的目標是盡量簡化用戶操作，不使用戶陷入到復雜的形變過程中。本文中的形變動畫根據控制方式的不同又分為基于特征曲線的形變動畫（圖6）和基于特征點的形變動畫（圖7）。本文感興趣的是交互式系統，用戶控制物體的形變，因此選擇了基于特征（feature-based）的形變方式，由用戶輸入的特征控制物體的形變。為了把基于特征曲線的形變動畫和基于特征點的形變動畫融合到一起，筆者參考了T. Milliron等人^[14]提出的通用形變框架。可以把該框架理解成一個黑盒系統，輸入部分是原模型和用戶的控制信息，輸出部分是形變后的模型（圖8）。形變過程使用用戶輸入的控制信息計算從原模型到形變模型之間的點到點的映射關系。

特征曲線控制的形變動畫，用戶通過輸入曲線特征控制物體的形變過程。用戶首先繪制一條源特征(source feature)曲線，它表示物體的原始狀態，記為C；然后為了改變物體的形狀，用戶需要繪制一條目標特征(target feature)曲線，它表示物體形狀改變后的狀態，記為C*。這兩條特征曲線組成一個特征對F=（C，C*）。使用特征對F，可以計算出對原模型就行形變的函數D(M)。D（M）的計算方法在T. Milliron等人的工作中有詳細描述。通過對原模型上的所有點使用D(M)進行變換就可以得到形變后的模型。

基于特征點的形變動畫，用戶使用一組特征點控制物體的形變過程。與基于特征曲線的形變動畫不同，用戶首先為模型設置一組特征點，然后通過拖動這些特征點來改變模型的形狀。為了盡量減小形變后物體的失真程度，本文使用了Scott Schaefer等人^[15]提出的最小移動平方的思想（moving least squares deformation）。

自由形式的形變動畫作為軌跡動畫的補充，將其與基于軌跡的草圖動畫結合起來可以制作出更具吸引力和生動形象的動畫。例如，在一個動畫中使用基于軌跡的動畫方式控制物體的運動路徑，同時使用形變的方式控制物體的形狀變化。本文中的兩種控制形變的方式均具有操作簡單的特點，不會給用戶帶來太多交互負擔。

3實現和應用

本文實現了一個草圖動畫制作工具，支持基于軌跡的動畫方式和形變動畫。用戶可以使用筆、鼠標或者其他能夠支持自由手繪的設備。該系統支持的動作方式包括物體的平移、旋轉、放縮以及它們的組合，還支持物體的出現與消失、動作重復等。這些基本包括了Davis等人提到的草圖動畫中最重要的幾種動畫方式^[5]。其次該系統實現了基于特征的形變動畫作為補充，讓用戶有了更多的選擇。

31手勢輸入和草圖繪制的處理過程

為了使用戶使用方便，筆者設計了幾種操作手勢，包括選擇物體、設置關鍵點、刪除運動等。用戶輸入的一條筆跡既可能是繪制草圖，也可能是設置的動作軌跡或其他手勢命令。手勢輸入和草圖繪制處理模塊根據用戶輸入筆記的特征和用戶操作的上下文信息把輸入的筆跡分為手勢、繪制物體以及動作設置三類（圖9）。手勢輸入和草圖繪制處理模塊的第一部分是一個預處理器，它能夠取得用戶操作的信息。筆是這個系統的主要輸入工具，因此不管系統處于繪制狀態還是動作設置狀態，筆（或鼠標）移動和其他一些信息都會被記錄下來。筆（或鼠標）的運動軌跡被記錄成一條筆跡，同時它運動的速度也被記錄下來，這些信息可以用于后面的處理過程。筆跡信息被預處理器收集后實時發送給分類器。另外，為了取得更好的視覺效果，預處理器在不改變筆跡形狀的基礎上還對筆跡作一些光滑處理。本文采用了Sezgin等人^[16]所描述的預處理算法。預處理器把筆跡信息傳遞給分類器，然后由分類器根據上下文信息以及預定義的規則把它們分成手勢、繪制物體和動作軌跡三類。分類后的筆跡分別由運動處理模塊、繪制模塊和手勢命令處理模塊加以處理。

32一個使用實例

本文提供了一個簡潔的用戶界面，用戶可以方便快捷地繪制物體并為它們設置動作，以及設置運動的重復次數。下面介紹一個簡單的應用實例。假設幼兒園老師想給小朋友講一個鯉魚跳龍門的故事，單純的文字講述會比較枯燥，對小朋友缺乏吸引力，如果使用一個鯉魚跳躍的動畫可以改善講課效果。為了創作一個鯉魚跳躍的動畫，首先用戶在畫布區畫下一條鯉魚；然后為鯉魚設置了一條跳躍的軌跡（圖10（a））。此時一個簡單的基于軌跡的動畫就完成了。雖然鯉魚能夠沿用戶設置的軌跡運動，但是其形態不變，動畫顯得有些僵硬。為了使動畫效果更加生動，用戶可以用基于特征曲線的形變動畫控制鯉魚的形態：首先給鯉魚添加一條特征曲線，然后在不同時間設置不同的特征曲線（圖10（b）中的黑色粗線）。圖11給出了基于軌跡的動畫與基于特征的形變動畫相結合后的效果。鯉魚在位置改變的同時，其身體的形態也在不斷變化。運動的位置由設置的軌跡決定，身體形態則取決于用戶設置的特征曲線。通過上面的描述可以看出這樣一個動畫的創作過程非常簡單快捷。

33簡單評估

筆者邀請了幾個用戶使用草圖動畫工具，其中包括兩個有動畫制作經驗的課件制作人員和其他三個無動畫制作經驗的用戶。他們在經過簡單的學習和練習之后都能夠熟練使用該工具，并認為該工具很有趣，簡單易用，可以快捷地制作簡單動畫。兩個課件制作人員表示愿意使用該工具作為他們的輔助工具。同時，也給筆者提出了以下改進意見：a）該工具支持的動作方式較少，制作復雜的動畫比較困難；b）不同軌跡動作的組合效果依賴于它們的設置順序，有時使用戶感到困惑；c）交互式動畫可以增加動畫的趣味性和學生的參與程度。在將來的工作中筆者將認真考慮這些意見。

4結束語

在本文中提出了一個基于軌跡的草圖動畫制作工具。使用該工具用戶可以方便快捷地制作簡單的動畫。基于軌跡的方式簡化了動畫制作的復雜過程，同時又能滿足大部分草圖動畫的需求；基于特征的形變動畫與基于軌跡動畫的結合，使得用戶可以方便地制作出更加生動多變的草圖動畫。該工具還提供了一個簡潔的用戶界面，使得用戶能夠隨意繪制物體和快捷地設置動作。使用該動畫工具，老師可以快捷方便地制作自己的動畫，學生也可以制作一些簡單的小動畫。然而草圖動畫還有很多方面需要繼續探討和研究：首先自由形式的骨架動畫也是草圖動畫的重要方法，因此下一步的工作是擴展該動畫制作工具，使其能夠支持自由形式的骨架動畫，同時還要保持界面簡潔和操作簡單；其次，設置多個物體之間的復雜同步比較困難，調整多個關鍵點的時間也很乏味。

參考文獻：

［1］BONWELL C C，EISON J A.Active learning:creating excitement in the classroom， ED340272[R].Washington DC:ERIC Digest，1991.

［2］BRANSFORD J，BROWN A，COCKING R.How people learn:brain，mind，experience， and school[M].Washington DC:National Academy Press，1999.

［3］PARK O，HOPKINS R.Instructional conditions for using dynamic visual displays:a review[J].Instructional Science，1992，21（6）:427-448.

［4］BAECKER R.Picture-driven animation[C]//Proc of AFIPS Spring Joint Computer Conference.Montavale，NJ:AFIPS Press，1969:273-288.

［5］DAVIS R C，LANDAY J A.Informal animation sketching:requirements and design[C]//Proc of AAAI Fall Symp on Making Pen-based Interaction Intelligent and Natural.Washington DC:AAAI Press，2004:42-48.

［6］MOSCOVICH T，HUGHES J F.Animation sketching:an approach to accessible animation[R].[S.l.]:Brown University，2003.

［7］FEKETE J D，BIZOUARN ，COURNARIE E，et al.TicTacToon:a paperless system for professional 2D animation[C]//Proc ofSIGGRAPH 1995.Los Angeles:ACM Press，1995:79-90.

［8］DiFIORE，REETH F van.A multi-level sketching tool for pencil-and-paper animation[C]//Proc of AAAI(2002) Spring Symposium.Washington DC:AAAI Press，2002.

［9］DAVIS R.Sketch understanding in design:overview of work at the MIT AI Lab[C]//Proc of AAAI Spring Symposium on Sketch Understanding.Washington DC:AAAI Press，2002:24-31.

［10］LaVIOLA J J，ZELEZNIK R C.MathPad2:a system for the creation and exploration of mathematical sketches[J].ACM Trans on Graphics，2004，23(3):432-440.

［11］IGARASHI T，MATSUOKA S，TANAKA H.Teddy:a sketching interface for 3D freeform design[C]//Proc of SiGGRAPH.New York:ACM Press，1999:409-416.

［12］IGARASHI T，MOSCOVICH T，HUGHES J F.Spatial keyframing for performance-driven animation[C]//Proc of ACMSIGGRAPH Symposium on Computer Animation.Los Angeles:[s.n.]，2005:107-115.

［13］THORNE M，BURKE D，PANNE M van de.Motion doodles:an interface for sketching character motion[C]//Proc of SIGGRAPH.New York:ACM Press，2004:424-431.

［14］MILLIRON T，JENSEN R J，BARZEL R，et al.A framework for geometric warps and deformations[J].ACM Trans on Graphics，2002，21(1):20-51.

［15］SCHAEFER S，McPHAIL T，WARREN J.Image deformation using moving least squares[J].ACM Trans on Graphics，2006，25(3):533-540.

［16］SEZGIN T M，STAHOVICH T，DAVIS R.Sketch based interfaces:early processing for sketch understanding[C]//Proc of Workshop Perceptive User Interface.New York:ACM Press，2001:1-8.