Java小应用程序中的动画技术

Avatar photoIrisable

Java所以能成为Internet中的“世界语”，原因之一是它具有开发多媒体小应用程序（Applet）的能力。本文讨论用Java来实现动画的基本技巧，与大家切磋。

一、Java动画原理

Java中实现动画的基本原理同其他的计算机动画技术并没有什么本质不同，都是和手绘动画卡通原理一样，画出一系列的帧，利用人眼的视觉暂停来造成运动的感觉。动画的质量，除了图片本身的好处外，动画中动作的平滑程度也是一大关键。简单地说，同一时间内放映的图片张数越多，动画中的动作也就越平滑。

一般手绘动画1秒钟放映的图片张数从粗糙的8张到中等的12张、直至最高级的24张都有，而计算机动画一般都是每秒10~20张。因此，如果要写出放映动画的Java小应用程序，首先就要决定动画放映的速度，并需要准备好所需要放映的动画图片（如果是用计算机生成的，要先生成好；如果是纸面上的图片，则要用扫描仪等手段变成计算机能识别的数据）。

有了图片，就需要载入图片数据。在Java中，可以利用getImage方法，在指定的URL位置读入要放映的图片。由于动画中用到的图片一般是多张，为了处理方便，可用数组来存放这些Image对象。同时，为了能够很容易地用一个循环将图片全部载入，图形文件的文件名也应在事先整理好。

例如，如果一共准备了24张图片，文件名就可取为pic0.gif、pic1.gif、pic3.gif、…、pic24.gif，并将它们全部放置在小应用程序目录下的 images 目录里，从而使读取图片的程序可以写作：

Image frame[] = new Image[24];
int i;
for (i = 0; i<frame.length; i++)
frame[i] = getImage(getCodeBase( ),"images/pic"+i+".gif");

还有一个问题就是要控制动画放映的速度。这可以用Java的多线程功能来实现，由另一个线程负责整个的放映过程。例如，可以编写一个小方法pause，用Thread.sleep来达到延时效果：

void pause (int delay_time)
{
  try{Thread.sleep(delay_time);}
  catch(InterruptException e) {}
}

其中，delay_time是两张图片间相隔的时间（微秒）。若要使用每秒钟放映的图片张(帧)数来表示，可按下式转换：

delay_time=1000/frame_per_second;

实现线程的方法有两种，一种是创建一个类Thread的派生类，另一种是附在一个Runnable的界面上。一个容易犯的错误是将动画循环放在paint方法中，这样就占据了主AWT的线程，而主线程将负责所有的绘图和事件处理。

在本文中，我们先构造一个程序的框架，再慢慢扩展，使之功能比较齐备。通过这样的过程，也就可以基本掌握Java动画技术的主要内容了。

二、一个框架小应用程序

根据以上动画原理，可以编写一个框架小应用程序如下。

import java.awt.*;
public class Animator1 extends java.applet.Applet implements Runnable
{
    int frame;
    int delay;
    Thread animator;
    public void init() {
        String str = getParameter("fps");
        int fps = (str != null) ? Integer.parseInt(str) : 10;
        delay = (fps > 0) ? (1000 / fps) : 100;
    }
    public void start() {
        animator = new Thread(this);
        animator.start();
    }
    public void run() {
        while (Thread.currentThread() == animator) {
            repaint();
            try {Thread.sleep(delay); }
            catch (InterruptedException e) {break;}
            frame++;
        }
    }
    public void stop() {
            animator = null;
    }
}

在HTML文件中可以这样来引用这个类：

    <applet code=Animator1.class width=200 height=200>
    <param name=fps value=200>
    </applet>

其中的参数fps表示每秒放映图片的帧数。

三、保持恒定的帧速度

在上面的框架程序中，小应用程序在每两帧之间休眠一个固定的时间。这是有缺点的。如果这样做，有时需要等待很长时间。由于运行时也耗费一定的时间，所以为了每秒显示十帧图象，不应该固定地在两帧间休眠100毫秒。

一个简单的补救方法如下：

public void run() {
    long tm = System.currentTimeMillis();
    while (Thread.currentThread() == animator) {
        repaint();
        try {
            tm += delay;
            Thread.sleep(Math.max(0, tm - System.currentTimeMillis()));
           }
        catch (InterruptedException e) {break;}
        frame++;
    }
}

四、绘制每一帧

为了产生动画效果，需要将每一帧图片绘出。在上面的示例中调用了repaint()方法来绘出每一帧图片。事实上也可以如下绘制：

public void paint(Graphics g) {
    g.setColor(Color.black);
    g.drawString("Frame " + frame, 0, 30);
}

五、图形的生成

动画中用到的图片可以用计算机生成。下例绘制了一个正弦曲线的组合，对于每一个变量x画一条短竖线，全部竖线组成一个图形，并且每帧图形并不相同。

不幸的是，此例中画出的图形有些闪动。下文中将解释闪动产生的原理，并给出避免的办法。

public void paint(Graphics g)
{
    Dimension d = size();
    int h = d.height / 2;
    for (int x = 0 ; x < d.width; x++) {
         int y1 = (int)((1.0 + Math.sin((x - frame) * 0.05)) * h);
         int y2 = (int)((1.0 + math.sin((x + frame) * 0.05)) * h);
         g.DrawLine(x, y1, x, y2);
    }
}

六、闪烁的避免

上例所绘制的图形存在闪烁的原因有两个：一是绘制每一帧花费的时间太长（因为重绘时要求的计算量较大），二是在每次调用pait() 前整个背景被清除，在进行下一帧的计算时，用户看到的是背景。清除背景和绘制图形间的短暂时间被用户看见，就是闪烁。在PC上闪烁比在X Window上明显，这是因为X Window的图象被缓存过，使得闪烁的时间比较短。

有两种办法可以明显地减弱闪烁：重载update() 或使用双缓冲。

1. 重载update()

当AWT接收到一个小应用程序的重绘请求时，它就调用Applet的update()。按默认情况，update() 清除小应用程序的背景，然后调用paint()。重载update(),将以前在paint() 中的绘图代码包含在update()中，从而避免每次重绘时将整个区域清除。既然背景不再自动清除，就需要在update() 中完成。在绘制新线之前将竖线擦除，就完全消除了闪烁。

public void paint(Graphics g) 
{
    update(g);
}
public void update(Graphics g) 
{
    Color bg = getBackground();
    Dimension d = size();
    int h = d.height / 2;
    for (int x = 0; x < d.width; x++) {         int y1 = (int)((1.0 + Math.sin((x - frame) * 0.05)) * h);         int y2 = (int)((1.0 + Math.sin((x + frame) * 0.05)) * h);         if (y1 > y2) {
            int t = y1;
            y1 = y2;
            y2 = t;
        }
        g.setColor(bg);
        g.drawLine(x, 0, x, y1);
        g.drawLine(x, y2, x, d.height);
        g.setColor(Color.black);
        g.drawLine(x, y1, x, y2);
    }
}

2. 双缓冲技术

另一种减小帧之间的闪烁的方法是使用双缓冲。双缓冲的主要原理是创建一个后台图象，将一帧画入图象，然后调用drawImage() 将整个图象一次画到屏幕上去。它的优点是大部分绘制是离屏的，将离屏图象一次绘至屏幕上比直接在屏幕上绘制要有效得多。

双缓冲技术可以使动画平滑，但有一个缺点：要分配一张后台图象，如果图象相当大，这将需要很大一块内存。

使用双缓冲技术时，也应重载update()。

Dimension offDimension;
Image offImage;
Graphics offGraphics;

public void update(Graphics g) 
{
    Dimension d = size();
    if ((offGraphics == null) ｜｜ (d.width != offDimension.width)
          ｜｜ (d.height != offDimension.height)) 
    {
        offDimension = d;
        offImage = createImage(d.width, d.height);
        offGraphics = offImage.getGraphics();
    }
    offGraphics.setColor(getBackground());
    offGraphics.fillRect(0, 0, d.width, d.height);
    offGraphics.setColor(Color.black);
    paintFrame(offGraphics);
    g.drawImage(offImage, 0, 0, null);
}

public void paint(Graphics g) 
{
    if (offImage != null) {
        g.drawImage(offImage, 0, 0, null);
    }
}

public void paintFrame(Graphics g) 
{
    Dimension d = size();
    int h = d.height / 2;
    for (int x = 0; x < d.width; x++) {
        int y1 = (int)((1.0 + Math.sin((x - frame) * 0.05)) * h);
        int y2 = (int)((1.0 + Math.sin((x + frame) * 0.05)) * h);
        g.drawLine(x, y1, x, y2);
    }
}

七、用已有图片创建动画

上面的示例使用计算机生成的图形来形成动画。更多的情况是使用已有的图片。这样，就需要重写paintFrame()来使图片动起来。由于图片往往相当大，运行小应用程序时图片一点点调入，将图象全部画出将花费很多时间，当连接较慢时尤其明显。这也就是drawImage方法带四个参数的原因，其中第四个参数为一个ImageObserver对象，通过调用getImage()得到图象。

下例使用已有图片在屏幕上移动形成动画。其中， world.gif作为背景，car.gif作为移动物体，且被绘制了两次，造成一个两辆车比赛的场景。

Image world;
Image car;

public void init() {
    String str = getParameter("fps");
    int fps = (str != null) ? Integer.parseInt(str) : 10;
    delay = (fps > 0) ? (1000 / fps) : 100;
    world = getImage(getCodeBase(), "world.gif");
    car = getImage(getCodeBase(), "car.gif");
}

public void paint(Graphics g) {
    update(g);
}

public void paintFrame(Graphics g) {
    Dimension d = size();
    int w = world.getWidth(this);
    int h = world.getHeight(this);
    if ((w > 0) && (h > 0)) {
        g.drawImage(world, (d.width - w)/2, (d.height - h)/2, this);
    }
    w = car.getWIdth(this);
    h = car.getHeight(this);
    if ((w > 0) && (h > 0)) {
         w += d.width;
         g.drawImage(car, d.width - ((frame * 5) % w), (d.height - h)/3, this);
         g.drawImage(car, d.width - ((frame * 7) % w), (d.height - h)/2, this);
    }
}

可以显示一组图片，以每一帧显示一幅图片来创建动画。此时仍可采用双缓冲的方法减小闪烁。原因是显示的每一幅图象有一部分是透明的，因此需要在显示下一幅图片前擦除当前图片，如果不使用双缓冲技术将导致闪烁。

Image frames[]; 

public void init() {
    String str = getParameter("fps");
    int fps = (str != null) ? Integer.parseInt(str) : 10;
    delay = (fps > 0) ? (1000 / fps) : 100;
    frames = new Image[10];
    for (int i = 0; i < 10; i++) {
        frames[i] = getImage(getCodeBase(), "duke/T" + i + ".gif");
    }
}

public void paint(Graphics g) {
    update(g);
}

public void paintFrame(Graphics g) {
    g.drawImage(frames[frame % 10], 0, 0, null);
}
X

类似文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注