《多媒体软件设计技术》课件第8章

8.1动画的几种形式及其编程技术8.2VB实现图形动画的四种方法8.3高层次的动画编程技术本章小结练习八8.1.1画图动画

利用VB的画图方法可以很容易地实现简单的“动画”。

下面使用VB的Line画线方法做一示例。程序运行后，屏幕上有三束光线平行进入一玻璃管，在管中有一散射器，光线射到散射器后反射到管的初始端。

初始窗体设计如图8-1所示。8.1动画的几种形式及其编程技术图8-1画图动画设计图8-2画图动画效果8.1.2无位移动画图8-3无位移动画示例设计

无位移动画是指动画对象不移动，但图像不断变化，其典型例子是翻书。实现无位移动画的方法是，设置好Image对象和Timer对象后，在Timer事件过程中调用LoadPicture函数装载不同的图像，并赋予Image对象Picture属性，使Image对象显示不同的图像，即可实现无位移动画。下面是翻书动画的例子。程序启动时，在窗体中显示一本翻开的书，用鼠标左键点击书，则开始翻书；再用鼠标左键点击书，则书停止翻动。位图文件book1.bmp～book4.bmp(见图8-3)分别表现了翻书时，正在翻的书页的不同位置，它们存放在当前工程所在的目录中。

本例使用定时器控件连续显示BMP文件，在需要显示动画的窗体(Form1)中设置Image对象Image1和Timer对象Timer1。图8-3无位移动画示例设计图8-4无位移动画示例效果8.1.3多帧位移动画

自然界的运动大多数都具有多帧位移的特点，如小鸟的飞翔，在小鸟位置移动的同时，其翅膀也在扇动。实现多帧位移动画需要在Timer事件过程中同时处理Image对象的图像交替和调用Move方法产生位置的移动。

下面是小鸟飞翔的例子。程序启动时，在窗体中显示一只小鸟，用鼠标左键点击它，小鸟将展翅飞翔，如碰到窗体的边界，小鸟将改变飞翔方向；再用鼠标左键点击小鸟，小鸟将停止飞翔。图像文件bird1.jpg～bird5.jpg(见图8-5)分别表现了小鸟飞翔时其翅膀的不同位置，它们存放在当前工程所在的目录中。图8-5图像文件bird1.jpg～bird5.jpg8.1.4缩放动画

气球的膨胀或缩小是缩放动画的典型例子。在Timer事件过程中修改Image对象的Width和Height属性，便可实现缩放动画。

下面是模拟气球在空中同心缩放的例子。程序启动时，在窗体背景图片中显示一只气球，用鼠标左键点击它，气球开始膨胀，如碰到窗体的边界，气球将缩小，缩小到原来大小时，又将膨胀；再用鼠标左键点击气球，气球将停止缩放。位图文件Balls.bmp存放在当前工程所在的目录中。

缩放动画的窗体如图8-6所示。图8-6缩放动画示例设计

在定义对象属性时，需注意：必须将Image1的Stretch属性设置为True，这样才会有缩放的效果。

程序代码如下：图8-7动画缩放示例效果8.1.5文字动画

在窗体内显示文字是一件容易的事情，且有很多方法，比如使用TextBox或Label控件等。下面以Label为例来说明文字水平移动和缩放的实现方法。

1．文字的水平移动

我们知道，窗体内的任何对象均有坐标属性，只要在定时器控件中的Timer事件里不断地改变Label对象的Left坐标属性，就能达到文字水平移动的效果。程序代码如下：程序运行后，我们可以看到文字“厦门大学软件工程中心”不断地从右边往左边移动(见图8-8)。图8-8文字不断地从右边往左边移动

2．文字的动态缩放

文字对象中有一个FontSize属性，不断增加FontSize的值就达到了动态缩放的效果。

窗体设计如图8-9所示。图8-9文字动态缩放示例设计图8-10文字动态缩放示例效果

VB在实现图形动画方面有其独到之处。下面介绍使用VB实现图形动画的四种方法。

1．控件的移动

如8.1节所述，采用控件的移动技术可实现动画效果。在VB中，控件移动方式可分为两种：一是在程序运行过程中，随时更改控件的位置坐标Left、Top属性，使控件出现动态效果；二是对控件对象调用Move方法，产生移动的效果。这里的控件可以是命令按钮、文本框、图形框、图像框、标签等。

8.2VB实现图形动画的四种方法

VB和结构化程序相比，增加了对象的“方法”功能。充分掌握这种不同于对象属性的“方法”，对可视化应用的开发极为重要。下面给出Move方法的一般格式为对象.moveleft,top其中，left为对象左边界的水平坐标(X轴)，top为对象上边界的垂直坐标(Y轴)。

2．动画控件Anibtn32.ocx

VB的工具箱中专门提供了一个动画控件(DesawareAnimatedButtonControl)用于进行动画设计，该工具在Windows\system子目录下以Anibtn32.ocx文件存放，用时可加入项目文件中。用这种方法实现动画的过程与电影胶片的放映极为相似，它将多幅图像装入内存，并赋予序号，通过定时或鼠标操作进行图像的切换，通过这种方法可实现相对符号的动画。此控件的有关属性介绍如下：

(1) Picture和Frame属性：Picture属性可装入多幅图像，由Frame属性作为控件中多幅图像数组的索引，通过选择Frame值来指定访问或装入哪一幅图像，这里Picture属性可装入 .bmp、.ico和 .wmf文件。

(2) Cycle属性：设置动画控件中多幅图像的显示方式。

(3) PictDrawMode属性：设置控件的大小与装入图像大小之间的调整关系。

(4)  Speed属性：表示动态切换多幅图的速度，以毫秒(ms)为单位，一般设置小于100的范围内。

(5) Specialop属性：在程序运行时设置，与定时器连用，来模拟鼠标的Click操作，不需用户操作触发，而由系统自动触发进行动态图的切换。

3．图片剪贴控件PictureClip

图片剪贴控件也提供了在一个控件上存储多个图像或图标信息的技术，正如用动画按钮一样，它保存Windows资源并可快速访问多幅图像。该控件的访问方式不是依次切换多幅图，而是先将多幅图放置在一个控件中，然后在程序设计时利用选择控件中的区域，将图动态剪切下来放置于图片框中进行显示，程序控件每隔一定时间剪切并显示一幅图，这样便可产生动画效果。该工具以Picclp32.ocx文件存于Windows\system子目录中，需要时可装入项目文件中。此控件的有关属性介绍如下：

(1) RowsCols属性：规定该控件总的行列数。

(2) Picture属性：装入图像信息，仅能装入位图 .bmp文件。

(3) ClipX、ClipY属性：指定要剪切图位于控件中的位置，左上角坐标。

(4) ClipWidth、ClipHeight属性：表示需剪切图的大小，即指定剪切区域。

(5) Clip属性：设计时无效，执行时只读，用于返回(3)、(4)两项指定的图像信息。

(6) GraphCell属性：为一个数组，用于访问Picture属性装入图像中的第一个图像元素。

(7) StretchX、StretchY属性：设计时无效，执行时只读，在将被选中图像装入拷贝时定义显示区域，单位为像素(pixels)。

4．Flash动画控件ShockwaveFlash

Flash是MacroMedia公司出品的矢量动画创作专业软件，利用该软件制作的矢量动画具有文件体积小、带音效、兼容性好、可以进行超文本链接等特性，在网页上使用Flash可以作出很漂亮的全屏动画和动态菜单条。下面简单介绍在VB中实现最简单的Flash动画播放的方法。要实现Flash动画的播放，首先要加载ShockwaveFlash控件。在添加了ShockwaveFlash控件后，对其进行属性设置。Movie是其最重要的属性，它的值就是要播放的动画的路径；Menu属性用于决定动画控制菜单是否使用；Scale、ScaleMode属性共同决定了动画画面的大小和比例。播放动画的主要控制命令有Back、ForwardGotoFrame、Play、Rewind、Stop、StopPlay等。8.3.1透明贴图动画的实现

在VB中，当我们把一只蝴蝶的图片放到一张背景图上时，发现背景图被蝴蝶遮住一个矩形的区域(即蝴蝶的图片矩形)。我们可以利用WindowsAPI函数BitBlt(BitBlt函数的声明和用法请参阅5.1.2节)，对图形进行一系列的位操作(从映射技术)，来使图片上非蝴蝶的其它部分变成透明。8.3高层次的动画编程技术在编程之前，首先需要用Photoshop对蝴蝶图片进行处理：先把原始的蝴蝶图片复制两份。在一个图片上面，将其应该透明之处(蝴蝶的背景)设置为黑色，另存为BufferPic.bmp；而在另一个图片上面，将非透明之处(蝴蝶)设置为黑色，其余地方设置(蝴蝶的背景)为白色，另存为BufferMsk.bmp(此图称为“掩膜”)。背景图片名为background.jpg。然后，用以下代码就可实现透明效果。程序代码如下：在上面的程序代码中，第一个BitBlt函数把掩膜(Buffermsk.bmp)复制给背景，第二个BitBlt函数再将蝴蝶的非透明部分复制到掩膜的黑色区域上。这两个BitBlt函数的调用是制作透明贴图的关键。

下面我们在制作透明贴图的基础上再加入一些代码，就不难实现透明贴图动画。下面的例子将演示一只蝴蝶在背景图片上自由飞翔的情形。程序中使用了另一个WindowsAPI函数StretchBlt，它的作用与BitBlt基本相同，但StretchBlt函数允许给参数nWidth传送一个负的宽度值，使它反方向画图(即可得到源图的镜像)。StretchBlt函数比BitBlt函数多了两个参数：nSrcWidth和nSrcHeight，它们分别代表源图的宽度和高度。StretchBlt函数其他参数的含义与BitBlt函数相同。下面给出本例的完整程序编码，请读者借助程序的注释去阅读。动画图片Buffer.bmp见图8-11，背景图片background.jpg见图8-12。图8-11动画图片Buffer.bmp图8-12背景图片background.jpg用VB画出一个窗体，在窗体上添加两个PictureBox控件和一个Timer控件，这三个控件的主要属性如表8-1所示。其中，名为SpritePic的Pictrue控件用于显示背景图片。表8-1控件主要属性8.3.2Windows动画鼠标指针的实现

在程序中使用合适的动画鼠标指针能够极大地改善应用软件的界面总体效果。WindowsXP操作系统可以支持动画鼠标指针文件，其扩展名为 .ANI，它们存放在Windows目录中的Cursors子目录下(可使用工具软件制作动画鼠标指针文件)。下面介绍如何在VisualBasic应用程序中实现动画鼠标指针。

首先简单介绍应用程序中用到的API函数：

LoadCursorFormFile：从磁盘上载入鼠标指针文件。

ClipeCursor：将鼠标指针限制在一个固定的矩形区域内

GetWindowRect：获取一个绑定的矩形区域，在本例中就是程序主窗体本身。

SetClassLong：设置鼠标指针的句柄，使鼠标指针显示在窗体上。

GetClassLong：获取鼠标指针的句柄，将鼠标指针状态进行备份，以便在退出应用程序后，将应用程序的缺省鼠标指针设置回程序执行以前的鼠标指针。

DestroyCursor：取消载入的鼠标指针，并释放该鼠标指针所占用的内存。

初始窗体如图8-13所示。图8-13动画鼠标指针示例设计下面的程序将在窗体区域内显示出C:\WINDOWS\CURSORS目录下的APPSTART.ANI动画鼠标指针。

程序代码如下：运行该程序后，单击“显示动画鼠标指针”命令按钮，则在窗体的范围内鼠标指针变为APPSTART.ANI，并且鼠标指针被限制在窗体的范围内。单击“恢复缺省鼠标指针”命令按钮，则窗体中的鼠标指针被恢复为缺省的鼠标指针。8.3.3两个动画相互碰撞的判断

在游戏软件中，常常见到两个以上的动画相互碰撞。动画碰撞的精确判断是编写游戏程序的难点。那么，如何编写动画碰撞程序呢？下面的例子向我们展示了两个动画的碰撞程序。

窗体设计如图8-14所示。图8-14两个动画相互碰撞示例设计程序运行后，我们在窗口中可以见到两个不同颜色的圆角矩形相互碰撞后立即分开的情形。下面给出本例的完整程序编码，请读者借助于程序的注释来阅读。程序代码如下：图8-15两个动画的碰撞示例效果8.3.4使用键盘控制图形的平滑移动

在用键盘控制图形的移动时，常常感到图形会一格一格慢慢地移动。这是因为用键盘移动图形时，键盘在VB里引发事件的顺序首先是KeyDown事件一次，接着是连续的KeyPress事件，直到放开按键，KeyPress事件结束，最后产生一次KeyUp事件，形成了一次按键循环。键盘按下多久，会引发KeyDown事件及KeyPress事件多久重复一次，这不仅跟Windows键盘设定有关，也跟硬件速度有关，所以每台电脑的表现都不一样。因此用键盘来控制图形移动必然会因电脑设备的不同而有不同的表现。对于游戏程序来说，这是个必须突破的难关。如何才能使图形的移动更流畅呢？下面的例子向我们展示了使用键盘控制图形平滑移动的例子。在本例中，我们使用了一个Timer控件。刚开始时，timer1.enabled=false。当KeyDown事件发生时，