基于XML文件的動(dòng)畫(huà)編輯與播放系統(tǒng)設(shè)計(jì)

李志巖等

摘要：該文所介紹的動(dòng)畫(huà)編輯和播放是一種“快速動(dòng)畫(huà)”，可應(yīng)用于教師上課的動(dòng)畫(huà)演示，學(xué)生的程序設(shè)計(jì)的邏輯能力培訓(xùn)等場(chǎng)景中。動(dòng)畫(huà)的編輯和播放是通過(guò)XML文件聯(lián)系的，動(dòng)畫(huà)數(shù)據(jù)存儲(chǔ)在XML文件中，播放器讀取XML文件數(shù)據(jù)進(jìn)行播放。整個(gè)過(guò)程不需要復(fù)雜的操作，制作簡(jiǎn)單。

關(guān)鍵詞：動(dòng)畫(huà)編輯；動(dòng)畫(huà)播放；XML

中圖分類(lèi)號(hào)：TP311 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1009-3044（2015）13-0195-02

Abstract：The animation editing and playing in this paper is a kind of“Fast animation”，which can be applied to some scenarios，like animation presentation on a class by teachers，training the logical skills of students in programming，and so on.The animation editing and playing are contacted by XML files，the data of animation is stored in XML files，and then the player read the data in XML files and play the animation.There are no complex operations in the whole process，and it is very convenient.

Key words：animation editing； animation playing； XML

近年來(lái)，隨著計(jì)算機(jī)知識(shí)的不斷普及，越來(lái)多的人投入到使用計(jì)算機(jī)工作的隊(duì)伍中。人們?cè)诠ぷ髦袦贤〞r(shí)往往需要直觀的動(dòng)畫(huà)來(lái)介紹、描述某個(gè)語(yǔ)言難以表達(dá)的信息或情景。

微軟發(fā)布的圖形子系統(tǒng)WPF（Windows Presentation Foundation ）為本類(lèi)軟件提供了技術(shù)基礎(chǔ)。而本文所謂的“快速動(dòng)畫(huà)”相較真正意義上的動(dòng)畫(huà)創(chuàng)作方式而言，這里的“快速”，指的是不必逐幀對(duì)動(dòng)畫(huà)進(jìn)行描繪，僅通過(guò)直觀的交互動(dòng)作設(shè)計(jì)或腳本編輯方式即可完成動(dòng)畫(huà)的設(shè)計(jì)工作。比如Scratch就是一款由麻省理工學(xué)院（MIT）研究開(kāi)發(fā)的動(dòng)畫(huà)編輯工具， MIT 做了相當(dāng)深入研究和頗具針對(duì)性的設(shè)計(jì)開(kāi)發(fā)，構(gòu)成程序的命令和參數(shù)通過(guò)積木形狀的模塊來(lái)實(shí)現(xiàn)此外這款軟件還提供了動(dòng)作預(yù)覽，可以很方便地隨時(shí)查看動(dòng)作效果。

本系統(tǒng)主要對(duì)簡(jiǎn)單的動(dòng)畫(huà)制作和播放進(jìn)行開(kāi)發(fā)，動(dòng)畫(huà)文件的存儲(chǔ)以及解析是本系統(tǒng)研究的核心。該系統(tǒng)主要的主要功能動(dòng)畫(huà)的制作和播放，具體包括：場(chǎng)景的添加，角色腳本的制作，角色動(dòng)作的編輯，動(dòng)畫(huà)的預(yù)覽，動(dòng)畫(huà)播放。

1 關(guān)鍵技術(shù)

1.1 XML文件

動(dòng)畫(huà)數(shù)據(jù)用XML文件存儲(chǔ)，其定義的標(biāo)簽有XML中的標(biāo)簽有：scences（總場(chǎng)景） scence （場(chǎng)景）players（總角色）player（角色），X，Y（坐標(biāo)）rolestyles（角色總造型）style（角色造型）rolemusics （角色音樂(lè)）roleactions （角色總動(dòng)作）roleaction（角色動(dòng)作）actionname（動(dòng)作名稱(chēng)）。文件結(jié)構(gòu)為：總場(chǎng)景中包含若干個(gè)場(chǎng)景，每個(gè)場(chǎng)景中包含若干個(gè)角色，每個(gè)角色又包含自己相應(yīng)的若干屬性。

1.2 WPF

WPF（Windows Presentation Foundation）是微軟推出的基于Windows Vista的用戶(hù)界面框架一部分。他提供了統(tǒng)一的編程模型、語(yǔ)言和框架，真正做到了分離界面設(shè)計(jì)人員與開(kāi)發(fā)人員的工作交互用戶(hù)界面。其的核心是一個(gè)與分辨率無(wú)關(guān)并且基于向量的呈現(xiàn)引擎，旨在利用現(xiàn)代圖形硬件的優(yōu)勢(shì)。WPF 通過(guò)一整套應(yīng)用程序開(kāi)發(fā)功能擴(kuò)展了這個(gè)核心，這些功能包括可擴(kuò)展應(yīng)用程序標(biāo)記語(yǔ)言 （XAML）、控件、數(shù)據(jù)綁定、布局、二維和三維圖形、動(dòng)畫(huà)、樣式、模板、文檔、媒體、文本和版式。本文中的動(dòng)畫(huà)的播放和控制是基于WPF平臺(tái)做的二次動(dòng)畫(huà)開(kāi)發(fā)。

2 系統(tǒng)設(shè)計(jì)

2.1 整體架構(gòu)

系統(tǒng)的整體框架如圖1所示：

動(dòng)作庫(kù)、人物庫(kù)、場(chǎng)景庫(kù)、音樂(lè)庫(kù)，作為動(dòng)畫(huà)制作的資源，舞臺(tái)是實(shí)現(xiàn)制作過(guò)程中的實(shí)時(shí)顯示。XML文件作為制作平臺(tái)和播放器之間的橋梁，有著至關(guān)重要的作用。

2.2動(dòng)畫(huà)編輯流程

動(dòng)畫(huà)編輯的過(guò)程包括：素材的載入、動(dòng)作的編輯、整體的預(yù)覽3部分。

動(dòng)畫(huà)編輯中所需的素材在相應(yīng)的庫(kù)中保存，直接在相應(yīng)的庫(kù)中打開(kāi)預(yù)覽效果，滿(mǎn)足動(dòng)畫(huà)編輯的效果時(shí)才載入素材，當(dāng)沒(méi)有素材滿(mǎn)足時(shí)，可以將相應(yīng)的素材導(dǎo)入素材庫(kù)，之后可以方便的從素材庫(kù)中載入。

動(dòng)作的編輯是動(dòng)畫(huà)制作的靈魂。在動(dòng)作庫(kù)中已存在動(dòng)畫(huà)編輯所需的所有的動(dòng)作，可以直接通過(guò)點(diǎn)擊相應(yīng)的按鈕來(lái)觸發(fā)相應(yīng)的動(dòng)作。至于某些動(dòng)作比較復(fù)雜，可以在控制類(lèi)動(dòng)作中選擇相應(yīng)的控制選項(xiàng)來(lái)完成復(fù)雜的動(dòng)作，類(lèi)似于高級(jí)語(yǔ)言的編輯。

動(dòng)畫(huà)編輯完成后，可以進(jìn)行整體的預(yù)覽，讓動(dòng)畫(huà)預(yù)覽到某一動(dòng)作后停止，查看效果。如果動(dòng)畫(huà)的播放效果滿(mǎn)意則播放下一段動(dòng)作；如果不滿(mǎn)意可以進(jìn)行局部的微型調(diào)整，以滿(mǎn)足動(dòng)畫(huà)的效果。整體預(yù)覽的效果如圖2所示。

2.3 解析流程

解析流程主要分為3個(gè)步驟：解析XML文件、查詢(xún)動(dòng)作庫(kù)、讀入數(shù)據(jù)。

解析XML文件過(guò)程就是讀取動(dòng)畫(huà)的腳本文件，解析出動(dòng)作類(lèi)型及其概念上的數(shù)據(jù)。由于動(dòng)作的類(lèi)型和動(dòng)作的數(shù)據(jù)是分開(kāi)的，所以需要從動(dòng)作庫(kù)中查詢(xún)動(dòng)作類(lèi)型所對(duì)應(yīng)的數(shù)據(jù)。就像是上文所示的XML文件中“向下移動(dòng)10步”這個(gè)動(dòng)作，這是一個(gè)移動(dòng)動(dòng)作的類(lèi)型，具體的“向上”、“10步”的概念，計(jì)算機(jī)并不能直接識(shí)別，所以需要把這個(gè)動(dòng)作映射到動(dòng)作類(lèi)中。動(dòng)作類(lèi)中存儲(chǔ)有具體操作的數(shù)據(jù)，“向上”涉及到方向的問(wèn)題，“10步”涉及到到底體現(xiàn)在計(jì)算機(jī)中是多少像素的問(wèn)題等等。所以查詢(xún)動(dòng)作庫(kù)的目的就是讀出各個(gè)動(dòng)作的操作數(shù)據(jù)。最后就是將讀出的數(shù)據(jù)動(dòng)態(tài)加載系統(tǒng)中。

2.4播放處理流程

整個(gè)動(dòng)畫(huà)過(guò)程是許多個(gè)動(dòng)畫(huà)單位（如一個(gè)移動(dòng)就是一個(gè)動(dòng)畫(huà)單位）連續(xù)播放而成的，XML文件的解析以及動(dòng)畫(huà)的還原，只是一個(gè)動(dòng)畫(huà)單位的過(guò)程，在整個(gè)動(dòng)畫(huà)的播放過(guò)程中一直在不斷的進(jìn)行著“解析——還原”的過(guò)程直到所有的動(dòng)畫(huà)播放完成。如圖3所示：

這種控制的方式有一個(gè)好處，可以?xún)?yōu)化動(dòng)畫(huà)播放時(shí)對(duì)內(nèi)存的利用。由于在動(dòng)畫(huà)播放的時(shí)候，主要加載的是圖片資源，并且還要需要時(shí)間控制，如果事先把所有的資源都加在進(jìn)來(lái)，放在一條時(shí)間軸上，就會(huì)使消耗掉大量的內(nèi)存，對(duì)電腦造成一定的負(fù)面影響。但是本文中采用的是一邊解析一邊播放的方式：先解析一個(gè)單位的動(dòng)畫(huà)，然后播放，播放完成后釋放資源，再解析另一個(gè)動(dòng)畫(huà)播放，這樣就可以降低內(nèi)存的使用率。其播放效果圖如圖4 所示。

3 結(jié)束語(yǔ)

動(dòng)畫(huà)編輯與播放平臺(tái)就是一個(gè)集動(dòng)畫(huà)劇本創(chuàng)作和動(dòng)畫(huà)交互式演播于一體的多媒體動(dòng)畫(huà)創(chuàng)作系統(tǒng)。此動(dòng)畫(huà)編輯與播放系統(tǒng)操作簡(jiǎn)單，易于使用，可以幫助人們快速建立動(dòng)畫(huà)原型、快速建立動(dòng)畫(huà)劇本，從而達(dá)到便捷建立動(dòng)畫(huà)演示的目的。

在實(shí)際的應(yīng)用中，它可以幫助人們快速展示課件中無(wú)法建立的動(dòng)畫(huà)效果，可以輔助商業(yè)用戶(hù)進(jìn)行多媒體展示，可以用來(lái)培養(yǎng)學(xué)生的程序設(shè)計(jì)的邏輯能力，也可以用來(lái)培養(yǎng)兒童們的動(dòng)手能力。

參考文獻(xiàn)：

[1] Matthew MACDonald. WPF編程寶典-C#2010版[M]. 王德才，譯.北京：清華大學(xué)出版社，2011.

[2] 嚴(yán)蔚敏，李冬梅，吳偉民，等. 數(shù)據(jù)結(jié)構(gòu)（C語(yǔ)言版）[M].北京：人民郵電出版社， 2013.

[3] 王小科，王軍，趙會(huì)東. C#編程寶典（十年珍藏版）[M].北京：人民郵電出版社， 2011.

[4] Kolko. 交互設(shè)計(jì)沉思錄[M]. 方舟，譯.北京：機(jī)械工業(yè)出版社，2013.

[5] Introduction to WPF，MSDN Library[Z].