第十九讲动画制作及声音载入（二）

来源：互联网发布：网络聊天用语指南编辑：程序博客网时间：2024/06/05 05:18

教学纲要

Java 世界里最激动人心的时刻终于到来了，在这一章里你将学到在主页里播放动画的技巧，以及载入和播放声音的方法，掌握了本章所讲授的这些技巧，再加上你脑子里各种希奇古怪的念头，你就有能力创造出你自己的真正活灵活现、有声有色的活动 Web 主页来。

先不忙看程序运行结果，我敢打赌这个程序里一定有好几个地方你还不太理解，那就让我们先来看看这几条令人不解的语句：

1. fps = getParameter("speed");
　　这条语句的意思是从 HTML 文件接受一个名叫 speed 的参数。很多时候我们希望自己控制程序的运行情况，在这个程序里我们希望能够用一种比较容易的方法来改变动画的放映速度，而不是到程序源代码里直接修改程序里的某条语句，然后重新编译程序。的确完成这样的修改是工程浩大的，也不是一般人所能胜任的。于是我们就想到了利用参数。只要给定了参数，程序执行时就会按照给定的参数去执行了。那么 Java 是从那里得到参数的呢？我们都知道， Java 程序是通过编写 HomePage 的 HTML 文件加载到 WWW 浏览器里执行的，自然而然，我们就想到了让 Java 程序到包含了它的那个 HTML 文件里去读取参数。为了使 Java 能够从 HTML 文件里读到参数，必须满足两个条件：

在 HTML 文件里，必须用标签，指定参数的名称和参数的值。
在 Java 源程序中，必须用方法 getParameter 来取得参数值。

这回你该明白为什么 HTML 文件里会多出这样一句话来这句话正是用来告诉 Java 程序 “ 放映速度为每秒 5 帧 ”

2. pause = 1000/integer.parseint(fps);
　　根据我们的定义，在这条语句中的 pause 应该是每帧图片显示的时间，在 Java 里时间都是以毫秒为单位的，所以这里 1000 毫秒也就是 1 秒，不难理解

每张图片在屏幕上停留的时间＝ 1 秒 / 1 秒内放映的图片张数

　　根据这个算式，理解这条语句就很容易了，可是为什么还有 Integer.parseInt(fps) 呢？要知道 HTML 里的变量都是字符型的，即使是数字 5 ，它也仅仅是一个写成 5 这个样子的一个字符，所以 fps 一开始就被说明成字符型，为的就是在这里赋值时不至于类型不匹配。那么既然 fps 只是一个字符，我们怎么能把它放到数学算式里来进行计算呢？当然要进行类型转换，把 fps 这个字符串类型的值转换成能进行数学运算的整数。 Integer.parseInt(fps) 就是完成这一功能的。

3. try {Thread.sleep(pause);}
　 catch(InterruptedException e){}

　　这是什么东西？这么复杂。哦！请你千万不要看它复杂就轻易放弃。 try 和 catch 只不过是一个防止意外的保险栓，把你要进行保险的东西放在 try 后面的 {} 里，然后把一旦发生意外要进行的处理写在 catch 后面的 {} 里。这和填一张保险单一样简单，在 try 里填你投保的东西，在 catch 里填入发生意外时你希望保险公司为你做的事。

　　好了，关于 try 和 catch 我们在后面的章节里还要详细地介绍。在这个程序里我们把 Thread.sleep(pause) ；这条语句投了保，不过没有对它进行什么意外处理，因为 catch 里什么也没做。 Thread.sleep(pause) ；这条语句又是什么意思呢？再容易理解不过了，它就是 “ 让线程睡上一会儿 ” ，睡多久呢？每帧图片显示时间多久，它就睡多久。 pause 不就决定了每帧图片显示的时间吗？

4. num = ( num 1) % frame.length ;

　　这是图片帧数的计数器，每放完一帧图片， num 就加 1 。％我们在第四章里已经学过，它表示取模运算，再说简单一些，就是计算余数。在这里我们用它来干什么呢？哦！对了，还没有说 frame.length 呢， frame 在前面定义过，它是一个 Image 数组，包含了动画的一组图片， frame.length 就是这个数组的长度，也就是 frame 所包含的图片张数。明白了每一个参数的意义以后，再来看看算式吧，这个算式的意思就是：显示图片的计数值对图片的总张数取模。为什么要这样做呢？如果不对图片的总张数取模又会发生什么呢？设想一下，当图片显示到了最后一张，再没有图片可供显示了，你想让动画再从头放一遍，也就是从第一张开始再重新来一遍。取模就是完成这个功能的，它让显示的图片可以再次从头开始。在这个程序里我们一共有 17 张图片，所以 frame.length 等于 17 ，当计数器 num 计到 16 时，已经没有图片可以显示了，（注意数组下标都以 0 开始）应该显示第 0 张，所以 num = (16 1 ) % 17 = 0 正好符合要求。

　　好啦！现在你对程序的理解应该更清楚了。看看程序的运行结果吧！程序运行起来会有一只顽皮的小企鹅在窗口里翻筋斗。当然我们不可能在这里看到那只会动的小企鹅，不过小企鹅翻筋斗的每一个动作都在这里了（见图 18.2 ），我们的动画就是快速地切换这些图片，让它动起来。

图 18.2 动画的每一帧图片

不再闪烁的动画

　　看了上面的程序，你可能会觉得有些不尽如人意，小企鹅翻起筋斗来总是一闪一闪地。虽然动起来了，开始一闪一闪的动画实在不能令人满意。为什么我们的小动画会有这种讨厌的闪烁呢？有没有办法让它不闪烁呢？

　　不知道你还记不记得前一章讲过的 repaint 方法的执行过程，当调用 repaint 时，系统首先调用的是 update, 省缺的 update 是用背景色把整个窗口重刷一次，然后再调用 paint 方法在窗口里画出要显示的内容。为什么会发生画面闪烁？现在就应该比较清楚了，原因就在于我们每次调用 repaint 重画窗口时，都相当于先调用 update 清除窗口里的所有画面，然后再调用 paint 方法在一张干净的纸上显示下一幅画面。这样重复的清除画面，又重绘画面就造成了动画的闪烁。

　　其实我们在换图片的时候真的需要清除所有画面再重画它吗？完全没有必要。我们只需要用下一张图片去覆盖上一张图片就可以了。所以在 update 里，我们不再需要清除画面，而是直接调用 paint 重绘画面就可以了。你也许要奇怪了，我们的程序里并没有什么 update 呀？是的，我们上面的程序里的确没有 update 这个方法，可是正如我们前面提过的， update 是在调用 repaint 的时候，由 repaint 去自动调用的。如果我们不在程序里重写一个新的 update ，它就会自己去调用系统省缺的那个，用背景色先清除整个窗口。如果你不想要系统省缺的那个笨笨的 update ，你只需要在程序里写上自己的 update 就行了。

　　在我们这个程序里只需用下一张图片去覆盖上一张图片，而无需先清除窗口，所以我们的 update 就可以省去清除窗口这一步，直接调用 paint 重绘窗口。那么这就在程序里加上我们自己的 update 方法吧！
　　 public void update ( Graphics g ) { paint (g) ; }
　　好啦！，闪烁的问题就解决了。不信你试试，把上面一句话加到程序的最后一个 } 之前，重新编译一次，看看运行结果是不是好多了呢？

连续的筋斗

　　现在我们的小企鹅已经能把筋斗翻得相当漂亮了，可是如果你是个完美主义者的话，可能还是感到有些美中不足。这只小企鹅怎么只会在原地翻筋斗？能让它连续地翻几个筋斗吗？当然可以。这就是动画常见的另一种效果，在固定的背景上，一边放映主角的动作，一边同时改变主角的位置。听起来似乎挺复杂的，不过实现起来并没有想像的那么难。在这种效果的动画里，除了前面讲过的技巧外，我们所要做的就是加上重画背景和改变主角位置这两个动作的处理。

　　制作这样的动画，除了需要一组连续动作的图片外，还应该准备一张背景图让我们的动画人物以此为背景来进行表演。我们想让小企鹅连续地翻上好几个筋斗，就需要在显示图片的同时改变显示的位置，连续不断地在不同位置画小企鹅翻筋斗的图片是不是就可以让它连续地翻筋斗了呢？还不行。每次显示完上一帧图片后，我们还必须用背景图去重画一次背景，然后再按正确的位置显示下一次图片。如果不这样做，可以想像，背景图上就会留下每个动作的残迹。根据前面的分析，我们需要做的修改实际就在 run 和 paint 这两个方法里。在 run 里修改图片显示的位置，在 paint 里加入重画背景图的动作。那么就来看看修改过的程序是什么样子。程序 18.2 // tumble.java
import java.awt.*;
public class tumble extends java.applet.Applet implements Runnable
{
　　 Image frame[ ];　　 // 说明一个用来存放动画图片的 Image 数组
　　 Thread thd;　　 // 说明一个线程对象
　　 int num;
　　 int pause;
　　 Image backgnd;　　 // 说明背景图片
　　 int x,x_pos ;　　 // 说明显示图片的 x 坐标

public void init( )
{
　　 int i;
　　 String fps;
　　 frame = new Image[17];　　 // 初始化 Image 数组
　　 thd = null;　　　　　　 // 初始化线程
　　 num = 0;　　　　　　 // 初始化计数器
　　 for (i = 0; i < frame.length; i )　　 // 加载动画图片　　 frame[i] = getImage(getCodeBase( ), "images/T" i ".gif");
　　 backgnd = getImage (getCodeBase( ),"images/backgnd.gif"); 　 // 加载背景图片
　　 fps = getParameter("speed");　　 // 设置播放速度
　　 if (fps == null)
　　　　 fps = "10";
　　 pause = 1000 / Integer.parseInt(fps);　　 // 计算每帧图片显示的时间
}
public void start( )
{
　　 if (thd == null)
　　 {
　　　　 thd = new Thread(this);　　 // 产生一个新线程
　　　　 thd.start( );　　 // 启动这个新线程
　　 }
}
public void stop( )
{
　　 if (thd != null)
　　 {
　　　　 thd.stop( );　　 // 中止线程
　　　　 thd = null;　　 // 释放线程
　　 }
}
public void run( )
{
　　 while (true)
　　 {
　　　　 try { Thread.sleep(pause);　　 // 使线程睡眠
　　 }
　　　　 catch (InterruptedException e) {};
　　　　 repaint( );　　 // 重画窗口
　　　　 num = (num 1) % frame.length;　　 // 为显示的图片计数
　　　　 x = ((x 130 10)%(size( ).width 130 70))-130; // 计算下一帧图片显示的位置
　　　　 x_pos= size( ).width-x ;　　 // 调整图片显示的位置
　　 }
}
public void paint(Graphics g)
{
　　 g.drawImage(backgnd,0,0,this);　　 // 显示背景图
　　 g.drawImage(frame[num], x_pos, 0, this);　　 // 显示动画图片
　　 }
　　 public void update(Graphics g)
　　 {
　　　　 paint(g);
　　 }
} 　　这个程序的 HTML 文件如下所示：
< HTML>
< HEAD>
< TITLE>tumble< /TITLE>
< /HEAD>
< BODY>
< APPLET CODE = "tumble.class" WIDTH = 500 HEIGHT = 80>
< param name = "speed" value = "5">
< /APPLET>
< /BODY>
< /HTML>

　　看看程序运行结果，一只会连续翻筋斗的小企鹅高高兴兴地在你的主页上玩开了。

图 18.3 程序 18.2 的运行结果

　　让它自由自在地玩吧，我们再来看看程序。程序 18.2 比程序 18.1 增加了几句话：
1. 方法 run 中的
　　 x = ((x 130 10)%(size( ).width 130 70))-130;

　　一看就知道这是用来改变图片显示位置的，在这个长算式中 10 是每次小企鹅前进的步长， size( ).width 指的是运行这个 Applet 窗口的宽度，此外我们还考虑了每一帧图片的宽度和窗口显示预留量，为的是让小企鹅从画面右侧切入，以免造成突然出现的那种突兀的感觉。

2. 方法 paint 中的
　　 g.drawImage(backgnd,0,0,this);
　　大家对这句话的含义应该再清楚不过了，它在这里的作用就是重画背景图。

第十九讲 动画制作及声音载入（二）

第十九讲动画制作及声音载入（二）