《多媒體軟件設(shè)計(jì)技術(shù)》課件第8章

8.1動(dòng)畫的幾種形式及其編程技術(shù)8.2VB實(shí)現(xiàn)圖形動(dòng)畫的四種方法8.3高層次的動(dòng)畫編程技術(shù)本章小結(jié)練習(xí)八8.1.1畫圖動(dòng)畫

利用VB的畫圖方法可以很容易地實(shí)現(xiàn)簡單的“動(dòng)畫”。

下面使用VB的Line畫線方法做一示例。程序運(yùn)行后，屏幕上有三束光線平行進(jìn)入一玻璃管，在管中有一散射器，光線射到散射器后反射到管的初始端。

初始窗體設(shè)計(jì)如圖8-1所示。8.1動(dòng)畫的幾種形式及其編程技術(shù)圖8-1畫圖動(dòng)畫設(shè)計(jì)圖8-2畫圖動(dòng)畫效果8.1.2無位移動(dòng)畫圖8-3無位移動(dòng)畫示例設(shè)計(jì)

無位移動(dòng)畫是指動(dòng)畫對象不移動(dòng)，但圖像不斷變化，其典型例子是翻書。實(shí)現(xiàn)無位移動(dòng)畫的方法是，設(shè)置好Image對象和Timer對象后，在Timer事件過程中調(diào)用LoadPicture函數(shù)裝載不同的圖像，并賦予Image對象Picture屬性，使Image對象顯示不同的圖像，即可實(shí)現(xiàn)無位移動(dòng)畫。下面是翻書動(dòng)畫的例子。程序啟動(dòng)時(shí)，在窗體中顯示一本翻開的書，用鼠標(biāo)左鍵點(diǎn)擊書，則開始翻書；再用鼠標(biāo)左鍵點(diǎn)擊書，則書停止翻動(dòng)。位圖文件book1.bmp～book4.bmp(見圖8-3)分別表現(xiàn)了翻書時(shí)，正在翻的書頁的不同位置，它們存放在當(dāng)前工程所在的目錄中。

本例使用定時(shí)器控件連續(xù)顯示BMP文件，在需要顯示動(dòng)畫的窗體(Form1)中設(shè)置Image對象Image1和Timer對象Timer1。圖8-3無位移動(dòng)畫示例設(shè)計(jì)圖8-4無位移動(dòng)畫示例效果8.1.3多幀位移動(dòng)畫

自然界的運(yùn)動(dòng)大多數(shù)都具有多幀位移的特點(diǎn)，如小鳥的飛翔，在小鳥位置移動(dòng)的同時(shí)，其翅膀也在扇動(dòng)。實(shí)現(xiàn)多幀位移動(dòng)畫需要在Timer事件過程中同時(shí)處理Image對象的圖像交替和調(diào)用Move方法產(chǎn)生位置的移動(dòng)。

下面是小鳥飛翔的例子。程序啟動(dòng)時(shí)，在窗體中顯示一只小鳥，用鼠標(biāo)左鍵點(diǎn)擊它，小鳥將展翅飛翔，如碰到窗體的邊界，小鳥將改變飛翔方向；再用鼠標(biāo)左鍵點(diǎn)擊小鳥，小鳥將停止飛翔。圖像文件bird1.jpg～bird5.jpg(見圖8-5)分別表現(xiàn)了小鳥飛翔時(shí)其翅膀的不同位置，它們存放在當(dāng)前工程所在的目錄中。圖8-5圖像文件bird1.jpg～bird5.jpg8.1.4縮放動(dòng)畫

氣球的膨脹或縮小是縮放動(dòng)畫的典型例子。在Timer事件過程中修改Image對象的Width和Height屬性，便可實(shí)現(xiàn)縮放動(dòng)畫。

下面是模擬氣球在空中同心縮放的例子。程序啟動(dòng)時(shí)，在窗體背景圖片中顯示一只氣球，用鼠標(biāo)左鍵點(diǎn)擊它，氣球開始膨脹，如碰到窗體的邊界，氣球?qū)⒖s小，縮小到原來大小時(shí)，又將膨脹；再用鼠標(biāo)左鍵點(diǎn)擊氣球，氣球?qū)⑼Ｖ箍s放。位圖文件Balls.bmp存放在當(dāng)前工程所在的目錄中。

縮放動(dòng)畫的窗體如圖8-6所示。圖8-6縮放動(dòng)畫示例設(shè)計(jì)

在定義對象屬性時(shí)，需注意：必須將Image1的Stretch屬性設(shè)置為True，這樣才會(huì)有縮放的效果。

程序代碼如下：圖8-7動(dòng)畫縮放示例效果8.1.5文字動(dòng)畫

在窗體內(nèi)顯示文字是一件容易的事情，且有很多方法，比如使用TextBox或Label控件等。下面以Label為例來說明文字水平移動(dòng)和縮放的實(shí)現(xiàn)方法。

1．文字的水平移動(dòng)

我們知道，窗體內(nèi)的任何對象均有坐標(biāo)屬性，只要在定時(shí)器控件中的Timer事件里不斷地改變Label對象的Left坐標(biāo)屬性，就能達(dá)到文字水平移動(dòng)的效果。程序代碼如下：程序運(yùn)行后，我們可以看到文字“廈門大學(xué)軟件工程中心”不斷地從右邊往左邊移動(dòng)(見圖8-8)。圖8-8文字不斷地從右邊往左邊移動(dòng)

2．文字的動(dòng)態(tài)縮放

文字對象中有一個(gè)FontSize屬性，不斷增加FontSize的值就達(dá)到了動(dòng)態(tài)縮放的效果。

窗體設(shè)計(jì)如圖8-9所示。圖8-9文字動(dòng)態(tài)縮放示例設(shè)計(jì)圖8-10文字動(dòng)態(tài)縮放示例效果

VB在實(shí)現(xiàn)圖形動(dòng)畫方面有其獨(dú)到之處。下面介紹使用VB實(shí)現(xiàn)圖形動(dòng)畫的四種方法。

1．控件的移動(dòng)

如8.1節(jié)所述，采用控件的移動(dòng)技術(shù)可實(shí)現(xiàn)動(dòng)畫效果。在VB中，控件移動(dòng)方式可分為兩種：一是在程序運(yùn)行過程中，隨時(shí)更改控件的位置坐標(biāo)Left、Top屬性，使控件出現(xiàn)動(dòng)態(tài)效果；二是對控件對象調(diào)用Move方法，產(chǎn)生移動(dòng)的效果。這里的控件可以是命令按鈕、文本框、圖形框、圖像框、標(biāo)簽等。

8.2VB實(shí)現(xiàn)圖形動(dòng)畫的四種方法

VB和結(jié)構(gòu)化程序相比，增加了對象的“方法”功能。充分掌握這種不同于對象屬性的“方法”，對可視化應(yīng)用的開發(fā)極為重要。下面給出Move方法的一般格式為對象.moveleft,top其中，left為對象左邊界的水平坐標(biāo)(X軸)，top為對象上邊界的垂直坐標(biāo)(Y軸)。

2．動(dòng)畫控件Anibtn32.ocx

VB的工具箱中專門提供了一個(gè)動(dòng)畫控件(DesawareAnimatedButtonControl)用于進(jìn)行動(dòng)畫設(shè)計(jì)，該工具在Windows\system子目錄下以Anibtn32.ocx文件存放，用時(shí)可加入項(xiàng)目文件中。用這種方法實(shí)現(xiàn)動(dòng)畫的過程與電影膠片的放映極為相似，它將多幅圖像裝入內(nèi)存，并賦予序號(hào)，通過定時(shí)或鼠標(biāo)操作進(jìn)行圖像的切換，通過這種方法可實(shí)現(xiàn)相對符號(hào)的動(dòng)畫。此控件的有關(guān)屬性介紹如下：

(1)?Picture和Frame屬性：Picture屬性可裝入多幅圖像，由Frame屬性作為控件中多幅圖像數(shù)組的索引，通過選擇Frame值來指定訪問或裝入哪一幅圖像，這里Picture屬性可裝入?.bmp、.ico和?.wmf文件。

(2)?Cycle屬性：設(shè)置動(dòng)畫控件中多幅圖像的顯示方式。

(3)?PictDrawMode屬性：設(shè)置控件的大小與裝入圖像大小之間的調(diào)整關(guān)系。

(4)??Speed屬性：表示動(dòng)態(tài)切換多幅圖的速度，以毫秒(ms)為單位，一般設(shè)置小于100的范圍內(nèi)。

(5)?Specialop屬性：在程序運(yùn)行時(shí)設(shè)置，與定時(shí)器連用，來模擬鼠標(biāo)的Click操作，不需用戶操作觸發(fā)，而由系統(tǒng)自動(dòng)觸發(fā)進(jìn)行動(dòng)態(tài)圖的切換。

3．圖片剪貼控件PictureClip

圖片剪貼控件也提供了在一個(gè)控件上存儲(chǔ)多個(gè)圖像或圖標(biāo)信息的技術(shù)，正如用動(dòng)畫按鈕一樣，它保存Windows資源并可快速訪問多幅圖像。該控件的訪問方式不是依次切換多幅圖，而是先將多幅圖放置在一個(gè)控件中，然后在程序設(shè)計(jì)時(shí)利用選擇控件中的區(qū)域，將圖動(dòng)態(tài)剪切下來放置于圖片框中進(jìn)行顯示，程序控件每隔一定時(shí)間剪切并顯示一幅圖，這樣便可產(chǎn)生動(dòng)畫效果。該工具以Picclp32.ocx文件存于Windows\system子目錄中，需要時(shí)可裝入項(xiàng)目文件中。此控件的有關(guān)屬性介紹如下：

(1)?RowsCols屬性：規(guī)定該控件總的行列數(shù)。

(2)?Picture屬性：裝入圖像信息，僅能裝入位圖?.bmp文件。

(3)?ClipX、ClipY屬性：指定要剪切圖位于控件中的位置，左上角坐標(biāo)。

(4)?ClipWidth、ClipHeight屬性：表示需剪切圖的大小，即指定剪切區(qū)域。

(5)?Clip屬性：設(shè)計(jì)時(shí)無效，執(zhí)行時(shí)只讀，用于返回(3)、(4)兩項(xiàng)指定的圖像信息。

(6)?GraphCell屬性：為一個(gè)數(shù)組，用于訪問Picture屬性裝入圖像中的第一個(gè)圖像元素。

(7)?StretchX、StretchY屬性：設(shè)計(jì)時(shí)無效，執(zhí)行時(shí)只讀，在將被選中圖像裝入拷貝時(shí)定義顯示區(qū)域，單位為像素(pixels)。

4．Flash動(dòng)畫控件ShockwaveFlash

Flash是MacroMedia公司出品的矢量動(dòng)畫創(chuàng)作專業(yè)軟件，利用該軟件制作的矢量動(dòng)畫具有文件體積小、帶音效、兼容性好、可以進(jìn)行超文本鏈接等特性，在網(wǎng)頁上使用Flash可以作出很漂亮的全屏動(dòng)畫和動(dòng)態(tài)菜單條。下面簡單介紹在VB中實(shí)現(xiàn)最簡單的Flash動(dòng)畫播放的方法。要實(shí)現(xiàn)Flash動(dòng)畫的播放，首先要加載ShockwaveFlash控件。在添加了ShockwaveFlash控件后，對其進(jìn)行屬性設(shè)置。Movie是其最重要的屬性，它的值就是要播放的動(dòng)畫的路徑；Menu屬性用于決定動(dòng)畫控制菜單是否使用；Scale、ScaleMode屬性共同決定了動(dòng)畫畫面的大小和比例。播放動(dòng)畫的主要控制命令有Back、ForwardGotoFrame、Play、Rewind、Stop、StopPlay等。8.3.1透明貼圖動(dòng)畫的實(shí)現(xiàn)

在VB中，當(dāng)我們把一只蝴蝶的圖片放到一張背景圖上時(shí)，發(fā)現(xiàn)背景圖被蝴蝶遮住一個(gè)矩形的區(qū)域(即蝴蝶的圖片矩形)。我們可以利用WindowsAPI函數(shù)BitBlt(BitBlt函數(shù)的聲明和用法請參閱5.1.2節(jié))，對圖形進(jìn)行一系列的位操作(從映射技術(shù))，來使圖片上非蝴蝶的其它部分變成透明。8.3高層次的動(dòng)畫編程技術(shù)在編程之前，首先需要用Photoshop對蝴蝶圖片進(jìn)行處理：先把原始的蝴蝶圖片復(fù)制兩份。在一個(gè)圖片上面，將其應(yīng)該透明之處(蝴蝶的背景)設(shè)置為黑色，另存為BufferPic.bmp；而在另一個(gè)圖片上面，將非透明之處(蝴蝶)設(shè)置為黑色，其余地方設(shè)置(蝴蝶的背景)為白色，另存為BufferMsk.bmp(此圖稱為“掩膜”)。背景圖片名為background.jpg。然后，用以下代碼就可實(shí)現(xiàn)透明效果。程序代碼如下：在上面的程序代碼中，第一個(gè)BitBlt函數(shù)把掩膜(Buffermsk.bmp)復(fù)制給背景，第二個(gè)BitBlt函數(shù)再將蝴蝶的非透明部分復(fù)制到掩膜的黑色區(qū)域上。這兩個(gè)BitBlt函數(shù)的調(diào)用是制作透明貼圖的關(guān)鍵。

下面我們在制作透明貼圖的基礎(chǔ)上再加入一些代碼，就不難實(shí)現(xiàn)透明貼圖動(dòng)畫。下面的例子將演示一只蝴蝶在背景圖片上自由飛翔的情形。程序中使用了另一個(gè)WindowsAPI函數(shù)StretchBlt，它的作用與BitBlt基本相同，但StretchBlt函數(shù)允許給參數(shù)nWidth傳送一個(gè)負(fù)的寬度值，使它反方向畫圖(即可得到源圖的鏡像)。StretchBlt函數(shù)比BitBlt函數(shù)多了兩個(gè)參數(shù)：nSrcWidth和nSrcHeight，它們分別代表源圖的寬度和高度。StretchBlt函數(shù)其他參數(shù)的含義與BitBlt函數(shù)相同。下面給出本例的完整程序編碼，請讀者借助程序的注釋去閱讀。動(dòng)畫圖片Buffer.bmp見圖8-11，背景圖片background.jpg見圖8-12。圖8-11動(dòng)畫圖片Buffer.bmp圖8-12背景圖片background.jpg用VB畫出一個(gè)窗體，在窗體上添加兩個(gè)PictureBox控件和一個(gè)Timer控件，這三個(gè)控件的主要屬性如表8-1所示。其中，名為SpritePic的Pictrue控件用于顯示背景圖片。表8-1控件主要屬性8.3.2Windows動(dòng)畫鼠標(biāo)指針的實(shí)現(xiàn)

在程序中使用合適的動(dòng)畫鼠標(biāo)指針能夠極大地改善應(yīng)用軟件的界面總體效果。WindowsXP操作系統(tǒng)可以支持動(dòng)畫鼠標(biāo)指針文件，其擴(kuò)展名為?.ANI，它們存放在Windows目錄中的Cursors子目錄下(可使用工具軟件制作動(dòng)畫鼠標(biāo)指針文件)。下面介紹如何在VisualBasic應(yīng)用程序中實(shí)現(xiàn)動(dòng)畫鼠標(biāo)指針。

首先簡單介紹應(yīng)用程序中用到的API函數(shù)：

LoadCursorFormFile：從磁盤上載入鼠標(biāo)指針文件。

ClipeCursor：將鼠標(biāo)指針限制在一個(gè)固定的矩形區(qū)域內(nèi)

GetWindowRect：獲取一個(gè)綁定的矩形區(qū)域，在本例中就是程序主窗體本身。

SetClassLong：設(shè)置鼠標(biāo)指針的句柄，使鼠標(biāo)指針顯示在窗體上。

GetClassLong：獲取鼠標(biāo)指針的句柄，將鼠標(biāo)指針狀態(tài)進(jìn)行備份，以便在退出應(yīng)用程序后，將應(yīng)用程序的缺省鼠標(biāo)指針設(shè)置回程序執(zhí)行以前的鼠標(biāo)指針。

DestroyCursor：取消載入的鼠標(biāo)指針，并釋放該鼠標(biāo)指針?biāo)加玫膬?nèi)存。

初始窗體如圖8-13所示。圖8-13動(dòng)畫鼠標(biāo)指針示例設(shè)計(jì)下面的程序?qū)⒃诖绑w區(qū)域內(nèi)顯示出C:\WINDOWS\CURSORS目錄下的APPSTART.ANI動(dòng)畫鼠標(biāo)指針。

程序代碼如下：運(yùn)行該程序后，單擊“顯示動(dòng)畫鼠標(biāo)指針”命令按鈕，則在窗體的范圍內(nèi)鼠標(biāo)指針變?yōu)锳PPSTART.ANI，并且鼠標(biāo)指針被限制在窗體的范圍內(nèi)。單擊“恢復(fù)缺省鼠標(biāo)指針”命令按鈕，則窗體中的鼠標(biāo)指針被恢復(fù)為缺省的鼠標(biāo)指針。8.3.3兩個(gè)動(dòng)畫相互碰撞的判斷

在游戲軟件中，常常見到兩個(gè)以上的動(dòng)畫相互碰撞。動(dòng)畫碰撞的精確判斷是編寫游戲程序的難點(diǎn)。那么，如何編寫動(dòng)畫碰撞程序呢？下面的例子向我們展示了兩個(gè)動(dòng)畫的碰撞程序。

窗體設(shè)計(jì)如圖8-14所示。圖8-14兩個(gè)動(dòng)畫相互碰撞示例設(shè)計(jì)程序運(yùn)行后，我們在窗口中可以見到兩個(gè)不同顏色的圓角矩形相互碰撞后立即分開的情形。下面給出本例的完整程序編碼，請讀者借助于程序的注釋來閱讀。程序代碼如下：圖8-15兩個(gè)動(dòng)畫的碰撞示例效果8.3.4使用鍵盤控制圖形的平滑移動(dòng)

在用鍵盤控制圖形的移動(dòng)時(shí)，常常感到圖形會(huì)一格一格慢慢地移動(dòng)。這是因?yàn)橛面I盤移動(dòng)圖形時(shí)，鍵盤在VB里引發(fā)事件的順序首先是KeyDown事件一次，接著是連續(xù)的KeyPress事件，直到放開按鍵，KeyPress事件結(jié)束，最后產(chǎn)生一次KeyUp事件，形成了一次按鍵循環(huán)。鍵盤按下多久，會(huì)引發(fā)KeyDown事件及KeyPress事件多久重復(fù)一次，這不僅跟Windows鍵盤設(shè)定有關(guān)，也跟硬件速度有關(guān)，所以每臺(tái)電腦的表現(xiàn)都不一樣。因此用鍵盤來控制圖形移動(dòng)必然會(huì)因電腦設(shè)備的不同而有不同的表現(xiàn)。對于游戲程序來說，這是個(gè)必須突破的難關(guān)。如何才能使圖形的移動(dòng)更流暢呢？下面的例子向我們展示了使用鍵盤控制圖形平滑移動(dòng)的例子。在本例中，我們使用了一個(gè)Timer控件。剛開始時(shí)，timer1.enabled=false。當(dāng)KeyDown事件發(fā)生時(shí)，