各種動態圖像設計方法的比較分析

張亦楠

摘 要:研究現有的多種動態圖像設計方法,分析其優缺點及適用性。將各種動態圖像設計方法匯總,根據采用設計語言及不同設計方法進行分類,詳盡闡述各種設計方法的原理,說明其使用模式。通過執行速度及程序復雜性等分析各種方法的優缺點及適用性。為各種操作系統(包括嵌入式系統)的開發者進行動態圖像設計拓寬了視野,并給出了方法選擇建議。

關鍵詞:動態圖像;高速平滑;第三方軟件;翻頁

中圖分類號:TP391文獻標識碼:A

文章編號:1004-373X(2009)12-073-05

Comparative Analysis on Varieties of Methods for Designing Animated-images

ZHANG Yinan

(Navy Submarine Academy,Qingdao,266071,China)

Abstract:Varieties of current methods for designing animated images are researched,and their superiorities and disadvantages are analysed.Varieties of current methods for designing animated images are enumerated,which are categorized basing on different designing languages and means,principles and using-modes.The superiorities and disadvantages of varieties of methods by comparing performing velocities and program complexities are analysed.It exploits visual field and provides suggestions of method-choices for kinds of OSs(including embedded systems) developer.

Keywords:animated-images;high-speed smoothness;third-party software;flip

0 引 言

動態圖像技術是計算機圖形學中的重要內容,它廣泛用于游戲娛樂、輔助教學、科學實驗模擬等計算機輔助設計。在程序設計中,動態圖像的設計是程序員經常遇到的問題,其設計語言和方法多種多樣。根據是否需要借助于其他應用軟件和程序,可以將這些方法分成兩大類。第一類是只使用各種編程語言及開發環境中包含的文件和框架實現的設計方法;第二類是安裝相關軟件(諸如Flash,DirectDraw等),在相關語言的開發環境中將這些軟件的功能文件包含進去,共同實現動態圖像設計的方法。

然而,有關動態圖像的設計,現有的教程資料中大都“各顧眼前人”,其方法分散(見于各種開發語言的編程指南中),很少將各種動態圖像的設計方法匯總成資料。本文正是做了這方面工作,希望幫助動態圖像設計的開發人員對動態圖像設計有一個清晰、宏觀的認識,拓寬視野,在選取設計方法時,能夠辨明利弊,靈活使用。這樣,使用者也可以看到更加賞心悅目的界面。

1 動態圖像設計的原理

程序設計中動態圖像設計的原理類似于電影中普通的動畫原理,都是利用人的視覺具有“暫留”的生理特點(即人眼對動態圖像的變化僅能分辨出時間間隔為25 ms左右的變化,如果圖像變化太快,則人眼無法分辨),使連續的靜止畫面看上去具有動感。在程序設計中可以在屏幕上畫出一張圖像,而這張圖像將在不同時間出現,然后一張張快速(時間間隔小于25 ms)呈現在屏幕上,從視覺效果上看這些畫面就如同電影在連續變化一樣,給人以動的視覺感覺。

2 不需安裝第三方軟件的動態圖像設計方法

2.1 最簡單的Logo程序語言設計方法

Logo是一種解釋型語言,與其他的語言不同,它內置了一套Turtle Graphics系統,令程序設計更加形象化,也更易于理解,使得用戶可以通過簡單的編程創作出豐富多彩的視覺效果或圖案。

Logo程序語言中,常用的圖像動態效果可以歸納為閃爍、旋轉和移動三種。

2.1.1 使圖像閃爍的編程技巧

使圖像閃爍的編程技巧如圖1所示。

圖1 使圖像閃爍的編程技巧

2.1.2 使圖像旋轉的編程技巧

下面給出畫一個金光四射太陽的程序實例,如圖2所示。

圖2 畫一個金光四射的太陽的過程

畫太陽光芒的程序如下:

TO TYG

SETPC 14

REPEAT 30[PU FD 60 PD FD 20 PU BK 80 PD

RT 360/30]

END

擦除太陽光芒的程序如下:

TO TYGPE

REPEAT 30[PU FD 60 PE FD 20 PU BK 80 PD

RT 360/30]

END

太陽光旋轉的程序如下:

TO SHINE

DRAW SETPC 12

(STAMPOVAL 50 50 “TRUE)

REPEAT 72[ TYG WAIT 10 TYGPE RT 360/72]

END

2.1.3 使圖像移動的編程技巧

使圖像移動的編程技巧如圖3所示。

圖3 使圖像移動的編程技巧

2.2 C程序設計方法

2.2.1 四種常用方法

使用C語言來設計動態圖像的方法有很多:

(1) 利用動態開辟圖視口方法。在位置動態變化,但大小不變的圖視口中(用setviewpot()函數)設置固定圖形。這樣,呈現在觀察者面前的是當前圖視口位置在動態變化,因而在屏上看到的圖像就好像在動態變化一樣。

(2) 利用顯示頁和編輯頁交替變化。將當前顯示頁和編輯頁分開(用setvisualpage()和setactivepage()函數),在編輯頁上畫好圖形后,立即令該頁變為顯示頁;然后在上次顯示頁上進行畫圖,畫好后,再交換;如此反復,觀察者的視覺上就出現了動態變化的效果。

(3) 利用畫面存儲再重放的方法。像制作幻燈片一樣,將整個動畫過程變成一個個片斷,然后存儲到顯示緩沖區內。當它們按順序重放到屏幕上時,就出現了動態變化效果。

(4) 直接對圖像動態存儲器進行操作。利用顯示適配器上控制圖像顯示的各種寄存器和圖像存儲器VRAM,對其進行直接操作和控制,從而高效且快速地實現圖像動態效果。

利用上述4種方法均可以設計動態圖像,但其操作比較復雜,且在程序中要對圖像不斷進行存取操作,需要耗費大量內存資源。利用擦除法動態圖像設計可以解決上述問題。

2.2.2 擦除法動態圖像設計

擦除法動態圖像設計在很多動畫制作工具(如Flash)中大量使用,但在程序設計中卻少有人用。它的設計原理是利用同色原理,在圖形色與背景色相同時人眼不能感知。在程序設計中,當一個位置畫了一張圖像時,使圖像色與背景色相異;然后再到另一個位置畫一張圖像并使圖像色與背景色也相異。此時,將先前畫的圖像在原位置再畫一張,并使圖像色與背景色相同,這樣人眼只能看到新畫的一張圖像而看不到先前畫的圖像,從而先前畫的圖像感覺被擦除了。這樣連續畫多張圖像,并在每畫一張新的圖像時將原有的圖像擦除,即可實現觀察者角度的動態效果。

2.3 CBuilder中進行動態圖像設計

動態圖像設計中兩個非常重要的方面就是圖形的產生及對時間的控制。CBuilder 5為解決這兩個問題提供了良好的方案:一方面,可以利用現成的Shape組件產生常見的圖像形體;另一個方面,可以利用Timer組件,對動畫的時間進行準確的控制。

讀者可以自行查找CBuilder 5應用指南中的相關示例應用程序,以了解其設計方法。

2.4 利用Java Applet編程實現圖像動態

2.4.1 Java中實現動態圖像的原理

在Java中實現動態圖像有很多種辦法,但其基本原理是一樣的,即在屏幕上畫出一系列的幀來造成運動的感覺。為了每秒鐘多次更新屏幕,必須創建一個線程來實現動態圖像的循環,這個循環要跟蹤當前幀,并響應周期性屏幕更新的要求。

動態圖像設計中最常遇到的問題便是屏幕會出現閃爍現象。閃爍有兩個原因:一是繪制每一幀花費的時間太長(因為重繪時要求的計算量大);二是在每次調用Pain()前,Java 會用背景顏色重畫整個畫面,當進行下一幀計算時,用戶看到的是背景。

有兩種方法可以明顯地減弱閃爍:重載 update()或使用雙緩沖。

2.4.2 重載update()方法減弱閃爍

當AWT接收到一個applet的重繪請求時,它就調用applet的 update();默認地用update() 清除applet的背景,然后調用 paint()。重載 update(),將以前在paint()中的繪圖代碼包含在update()中,從而避免每次重繪時將整個區域清除。

使用update()方法不會清除整個畫面,只是消除必要的部分。

2.4.3 使用雙緩沖方法減弱閃爍

雙緩沖方法在許多Applet中被使用。其主要原理是創建一個后臺圖像,將需要繪制的一幀畫入圖像,然后調用DrawImage()將整個圖像一次畫到屏幕上去;其好處是大部分繪制是離屏的,將離屏圖像一次繪至屏幕上比直接在屏幕上繪制要有效得多,大大提高了做圖的性能。

雙緩沖可以使圖像動得平滑,但有一個缺點是它需要分配一張后臺圖像,所以,如果圖像相當大,就將需要很大的內存。

2.5 Windows API實現動態圖像的基本方法

在Windows中實現動態圖像的方式有很多種,但基本原理卻非常類似。即:在初始位置顯示初始圖形,經過短暫的延時后,去除掉初始圖形,并在新的位置顯示新的圖形;這些步驟加以循環,便形成了動態的效果(這里應該首先掌握Windows調色板及三元光柵操作的基本概念)。

比如,計算機上實現“淡入淡出”技術,采用的辦法是在已顯示的位圖A上,不斷開些小洞,在小洞內顯示位圖B的像素,隨著小洞逐漸增多,位圖A越來越模糊,位圖B越來越清晰,最后,位圖A消失,位圖B完整地顯示出來。

以下為常用動態圖像設計方法:

接下來結合C++程序介紹一些Windows下常用的動態圖像設計方法。

(1) 底色覆蓋法

底色覆蓋法是利用屏幕底色將原始圖形覆蓋掉,該法實現的動態圖像具有明顯的閃爍效果。

(2) 多圖片切換法

這種動態圖像實現方法的效果類似于Gif動態圖像的效果。其原理是將動態圖像的幀事先繪制出來,存為位圖文件或位圖資源,并按照動態圖像的順序為這些幀加以編號。當要顯示動態圖像時,在指定的位置,間隔適當的時間,按照順序顯示已經繪制好的位圖幀,從而達到動態圖像的目的。

下面是利用這種方式實現的動態圖像程序框架:

// bm[ ]為多張位圖文件的路徑及文件名數組,按照順序儲存了多張位圖

// picBox為PictureBox控件的一個實例

for( i=0; i

{

picBox->Picture = bm[i];//選中位圖

::Seep(100); // 延時

if( i == len(hbm) - 1 ) i = -1

}

(3) 異或方式

利用異或方式實現動態圖像的例子比較多,比如繪圖軟件中的“橡皮筋技術”。

“異或”是一種邏輯組合的方式(在Windows編程中,繪圖顏色的各種邏輯組合操作被稱為“光柵操作”)。在這種繪圖模式下進行繪圖,源顏色與屏幕底色將會進行異或邏輯組合,實際顯示的顏色將會是邏輯組合后的顏色,而且用相同的顏色在同一位置繪圖兩次,其效果和沒有繪圖時完全相同。下面是利用異或方式進行繪圖的程序結構框架。

// 設置當前繪圖方式為異或方式,hDC為用來繪圖的設備對象HDC

::SetROP2(hDC,R2_XORPEN);

while( 條件 )

{

在(x,y)位置用顏色color繪圖。

延時。

重新在(x,y)位置用顏色color繪圖,這時原來繪制的圖形將會被消除。

更新(x,y)坐標或color顏色,為在下一個循環中繪圖做準備。

}

(4) 像素操作

首先用GetPixel()函數得到初始屏幕某位置像素的顏色,并保存起來;然后在該位置進行繪圖;經過延時后,利用SetPixel()函數,用事先保存好的顏色在原位置上覆蓋掉已經繪制的圖形,并更新位置參數;接著進行下一個循環。

(5) 多緩沖技術

多緩沖技術是將圖形繪制在不同的幀中,通過將屏幕在這些不同的幀之間進行切換來達到動態圖像效果。具體的幀數目可以根據實際動態圖像的需要自行確定。

在Nord-Tec SoftWare開發的Nord-Tec Snow Flakes屏幕保護程序中,逼真的雪花動態圖像便是利用這種技術實現的。

3 需要安裝第三方軟件的動態圖像設計方法

3.1 可以快速生成圖論模型的Ubigraph

Ubigraph是一個全新的圖論生成軟件。還有一個類似的軟件graphviz,但Ubigraph顯然更強大一些,并且也相當易用。graphviz有它自己的語法規則,而Ubigraph則直接支持Python,Ruby, PHP,Java,C,C++等幾乎所有主流語言,因此不管原先使用的是什么語言,都可以很快地融入到Ubigraph中來。例如,在C語言中包含一個頭文件UbigraphAPI.h,便可以像往常一樣用循環語句“畫”一個環。

#include

int main(int const argc,const char ** const argv)

{

int i;

for (i=0; i < 10; ++i)

ubigraph_new_vertex_w_id(i);

for (i=0; i < 10; ++i)

ubigraph_new_edge(i,(i+1)%10);

sleep(2);

ubigraph_clear();

}

3.2 利用Flash設計動態圖像

Flash是一種功能強大的矢量動畫軟件,如果在VC程序中能夠播放FLASH,將為程序增色不少,而且可以輕松實現許多原本不易實現的功能(金山詞霸的安裝程序主控界面就利用了FLASH,效果相當好)。

這樣可以通過FLASH教材中實現一個完整多媒體軟件的具體方法來了解它的一些關鍵性技術,以及在VC中如何使用COM接口對ms agent 進行操作,如何使用信號燈來實現同步問題等高級話題。

3.3 DirectDraw技術

3.3.1 DirectDraw的概念

DirectX又名Game SDK,其最大特點是直接對硬件的抽象層(HAL)進行操作,利用該特點可制作出高性能的Windows游戲。DirectDraw就是DirectX的6個組件之一,是DirectX的基礎。

3.3.2 應用DirectDraw進行動態圖像設計的原理

DirectDraw使用頁面切換的方法實現圖像動態。它不僅可以訪問系統內存,還可以訪問顯示內存,這是以往的Windows程序所不能的。如果采用MFC中的CDC類進行繪圖,則不能直接訪問顯存。另外,利用DirectDraw還可以生成、移動、剪切、轉換、合成圖像數據,從而編寫出各種“炫麗多彩”圖形的應用程序。

在用DirectDraw編寫程序時,先要創建若干個圖形數據緩沖區,這些緩沖區稱為表面。當發生表面翻頁時,后備緩沖區就成為可見的,而以前的可見主表面則成為后備緩沖區,如圖4所示。

圖4 創建圖形數據緩沖區

雖然顯示器屏幕每秒鐘刷新很多次,但每次都是反復讀取可見主表面中存儲的顯示頁信息。只有當施行翻頁操作后,兩頁的內容互換。已經完成了的在原后備緩沖區的改動才會顯示在屏幕上,而這個互相拷貝的過程幾乎是瞬間完成的,與每次刷新所用的時間差了幾乎幾十萬個數量級,人眼根本察覺不到,所以用這種方法可以實現不閃爍、平滑、優質的動畫效果。

在DirectDraw中,典型的blt操作(Bltting是用于復制圖形的語言,可以將圖像從一處拷貝到另一處,例如CDC類的BitBlt()就是具有這樣功能的函數。)是將離屏表面的內容拷貝到一個后備緩沖區,如圖5所示。

圖5 blt操作

3.3.3 編寫DirectDraw應用程序的流程

DirectDraw程序的大概流程如下:先創建DDraw對象,再進行相關的設置,然后繪制后備緩沖區頁,最后執行翻頁操作。這樣循環就會產生很好的動態圖像效果。

4 用于動態圖像設計的幾種腳本語言

4.1 JSP技術

JSP(Java Server Pages)是一種動態網頁技術標準,Web服務器在遇到訪問JSP網頁的請求時,首先執行其中的程序片段,然后將執行結果以HTML格式返回給客戶。程序片段可以操作數據庫,重新定向網頁以及發送 email 等,這就是建立動態網站所需要的功能。在JSP頁面(或者servlet)可以繪制并發送動態圖像。

4.2 PHP語言

超文本預處理器(Hypertext Preprocessor,PHP)是一種簡單、面向對象、解釋型、健壯、安全、性能非常高、獨立于架構、可移植、動態服務器端的 HTML 腳本/編程語言。它最有意義的特性是支持大范圍的數據庫(當前支持的數據庫包括:Adabas D InterBase Solid,dBase mSQL Sybase,Empress MySQL Velocis,FilePro Oracle Unix dbm,Informix PostgreSQL)。

只要安裝一些第三方的庫文件,并具有一定的幾何知識,利用PHP創建動態圖像是相當容易的一件事情(具體方法參加PHP相關教程)。

4.3 年輕的Python

這種語言具有非常簡捷而清晰的語法特點,適合完成各種高層任務,幾乎可以在所有的操作系統中運行。在Nokia智能手機所采用的Symbian操作系統上,Python成為繼C++,Java之后的第三個編程語言,它完全可以編寫動態圖像。雖然Python的運行速度比Java快,但無法和需要編譯的語言相比。

在實際開發中常見的一種應用情形是使用Python快速生成程序的原型(有時甚至是程序的最終界面);然后對其中有特別要求的部分,用更合適的語言改寫,比如3D游戲中的圖形渲染模塊,其速度要求非常高,所以可以用C++重寫。

5 諸多動畫設計方法的比較分析

上文已經對各種動態圖像設計方法進行了較為詳細的羅列比較,此處做一匯總。

Logo語言的設計方法最為簡單,并且其本身就是一種繪畫語言,但相應地也就不勝任制作較為復雜的動態圖像。

C語言有5種用以設計動態圖像的常用方法,是耗費資源比較少,而執行速度比較快的首選擦除法。C語言是嵌入式系統開發使用最多的語言,并且在高中低檔的系統都可以使用,因而采用C語言的所有動態圖像設計方法理論上均適用于嵌入式系統的屏幕開發。

采用CBuilder語言設計動態圖像,可以方便地利用現成的組件產生圖像及控制時間。

Java通過定義線程的方法來控制動畫時間,然而使用圖像動的平滑的雙緩沖方法需要很大內存,因而更常用的消除畫面閃爍的辦法是重載update()。

C++中可供選擇的方法很多。簡單的動態圖像(如不斷閃爍的星星)可以采用底色覆蓋法;在屏幕的固定位置顯示動態圖像時可以選擇多圖片切換法;利用異或方式進行繪圖,不會發生全屏幕閃動,通常效果較好,但若反復使用,在所清除圖像處會產生閃爍,仍不是很完美;像素操作一般與其他動態圖像實現方法(如底色覆蓋)相結合使用;多緩沖技術類似C中的雙緩沖技術原理,只不過雙緩沖只繪制一份備用圖像作為離屏圖像,而多緩沖則將圖形繪制在多個不同幀中,將屏幕在這些幀之間進行切換。Graphviz和Ubigraph都是圖論生成軟件,但Ubigraph功能更強。利用它可以快速生成圖論模型的圖形和動態圖像,直觀地展示出各種圖論模型的三維結構,演示各種圖論算法的過程,非常適合用于研究和教學。

Flash所用到的高級技術比較多,不過為了能夠做出精美的電影特技效果的動態圖像,還是值得對其進行深入研究的。

DirectDraw使用頁面切換的方法實現圖像動態,它不僅可以訪問系統內存,還可以訪問顯示內存,在實現圖像動態的同時不會使畫面閃爍,是一種“完美切換”技術(直接從第一個畫面切換到第二個畫面),因此DirectDraw技術很受程序員青睞,尤其在虛擬現實技術中應用廣泛。

當然,若對美術工藝有特殊要求,則需要掌握更專業的技術,如顏色鎖結及用于3D效果的Z排序與視差等。

當動態圖像應用于網絡時,可以選擇直接使用腳本語言設計,譬如JSP,PHP等。

Python可作為嵌入式系統的開發語言,在Nokia智能手機所采用的Symbian操作系統上已得到證明。它的最大優勢是能夠很輕松地把使用其他語言制作的各種模塊(尤其是C/C++)輕松地聯結在一起。由此既可以直接使用Python設計簡單的動態圖像,也可以將對速度要求更高的復雜動態圖像通過C++編寫后嵌入到Python程序中。

6 結 語

最后值得提及的是,動態圖像的實現涉及到許多難度各異的相關技術。程序設計中在考慮采用何種方法實現動態圖像的同時,也要了解一些相關領域的知識,如美學、數學等,只有這樣,才能使制作出的動態圖像更加逼真,更加吸引人。

參考文獻

[1]李笑緣.動畫設計教程[M].上海:上海人民美術出版社,2007.

[2]莫治雄,熊偉建.FlashMX網上動畫編程指南[M].北京:北京希望電子出版社,2003.

[3]甘泉.PC游戲編程[M].北京:清華大學出版社,2003.

[4]徐保民.PHP編程基礎及應用實例集錦[M].北京:人民郵電出版社,2001.

[5]楊勇.3DS MAX5基礎教程[M].北京:中國水利水電出版社,2003.

[6]孫兆林.VB.NET多媒體編程[M].北京:北京希望電子出版社,2002.

[7]呂傳興,王能.Logo程序設計[M].上海:上?？茖W技術文獻出版社,2006.

[8]求是科技.Windows API程序設計參考大全[M].北京:人民郵電出版社,2006.

[9]Paul Tremblett.JSP即時應用[M].北京:人民郵電出版社,2001.

[10]Martin C.Brown.Python技術參考大全[M].北京:清華大學出版社,2002.