各种动态图像设计方法的比较分析

张亦楠

摘 要:研究现有的多种动态图像设计方法,分析其优缺点及适用性。将各种动态图像设计方法汇总,根据采用设计语言及不同设计方法进行分类,详尽阐述各种设计方法的原理,说明其使用模式。通过执行速度及程序复杂性等分析各种方法的优缺点及适用性。为各种操作系统(包括嵌入式系统)的开发者进行动态图像设计拓宽了视野,并给出了方法选择建议。

关键词:动态图像;高速平滑;第三方软件;翻页

中图分类号: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].上海:上海科学技术文献出版社,2006.

[8]求是科技.Windows API程序设计参考大全[M].北京:人民邮电出版社,2006.

[9]Paul Tremblett.JSP即时应用[M].北京:人民邮电出版社,2001.

[10]Martin C.Brown.Python技术参考大全[M].北京:清华大学出版社,2002.