MIDP中的动画

作者：Eir Giguere 编译：

Sean使用MIDP(Mobile Information Device Profile)的开发人员经常会抱怨用些什么办法才可以在一个MIDlet上显示动画。

任何动画的最基本的前提，是要在足够快的时间内显示和更换一张张的图片，让人的眼睛看到动的画面效果。图片必须按照顺序画出来。从一张图片到下一张图片之间的变化越小，效果会越好。

首先要做的，是使用你的图片处理软件（比如ps或者firework）创建一系列相同大小的图片来组成动画。每张图片代表动画一帧。

你需要制作一定数量的祯－－越多的帧会让你的动画看上去越平滑。制作好的图片一定要保存成PNG(Portable Network Graphics)格式，MIDP唯一支持的图片格式；（ 有两个办法让你刚做好的图片在MIDlet上变成动画。第一，把图片都放到一个web服务器上，让MIDlet下载他们，MIDP内置的HTTP支持。第二个办法更简单，把图片用MIDlet打包成jar文件。如果你使用的是J2ME开发工具，把PNG文件放 你的项目文件里面就可以了。

动画的过程其实更像帐本记录：显示当前帧，然后适当地更换到下一帧。那么使用一个类来完成这个工作应该是很恰当的，那好，我们就先定义一个AnimatedImage类：

import java.util.*;
import javax.microedition.lcdui.*;

// 定义了一个动画，该动画其实只是一系列相同大小的图片
// 轮流显示，然后模拟出的动画
public class AnimatedImage extends TimerTask {
    private Canvas canvas;
    private Image[] images;
    private int[][] clipList;
    private int current;
    private int x;
    private int y;
    private int w;
    private int h;
    // Construct an animation with no canvas.
    public AnimatedImage(Image[] images) {
        this(null, images, null);
    }

    // Construct an animation with a null clip list.
    public AnimatedImage(Canvas canvas, Image[]
                         images) {
        this(canvas, images, null);
    }

    // Construct an animation. The canvas can be null,
    // but if not null then a repaint will be triggered
    // on it each time the image changes due to a timer
    // event. If a clip list is specified, the image is
    // drawn multiple times, each time with a different
    // clip rectangle, to simulate transparent parts.
    public AnimatedImage(Canvas canvas, Image[] images,
                         int[][] clipList) {
        this.canvas = canvas;
        this.images = images;
        this.clipList = clipList;
        if (images != null && clipList != null) {
            if (clipList.length < images.length) {
                throw new IllegalArgumentException();
            }
        }
        if (images != null && images.length > 0) {
            w = images[0].getWidth();
            h = images[0].getHeight();
        }
    }

    // Move to the next frame, wrapping if necessary.
    public void advance(boolean repaint) {
        if (++current >= images.length) {
            current = 0;
        }
        if (repaint && canvas != null && canvas.isShown()
                ) {
            canvas.repaint(x, y, w, h);
            canvas.serviceRepaints();
        }
    }

    // Draw the current image in the animation. If
    // no clip list, just a simple copy, otherwise
    // set the clipping rectangle accordingly and
    // draw the image multiple times.
    public void draw(Graphics g) {
        if (w == 0 || h == 0) {
            return;
        }
        int which = current;
        if (clipList == null || clipList[which] == null
                ) {
            g.drawImage(images[which], x, y,
                        g.TOP | g.LEFT);
        } else {
            int cx = g.getClipX();
            int cy = g.getClipY();
            int cw = g.getClipWidth();
            int ch = g.getClipHeight();
            int[] list = clipList[which];
            for (int i = 0; i + 3 <= list.length; i +=
                         4) {
                g.setClip(x + list[0], y + list[1],
                          list[2], list[3]);
                g.drawImage(images[which], x, y,
                            g.TOP | g.LEFT);
            }
            g.setClip(cx, cy, cw, ch);
        }
    }

    // Moves the animation's top left corner.
    public void move(int x, int y) {
        this.x = x;
        this.y = y;
    }

    // Invoked by the timer. Advances to the next frame
    // and causes a repaint if a canvas is specified.
    public void run() {
        if (w == 0 || h == 0) {
            return;
        }
        advance(true);
    }
}

你实例化一个AnimatedImage对象的时候你必须给AnimatedImage类的构造方法传一个Image对象数组，该数组代表动画的每一帧。

使用的所有图片必须具有相同的高度和宽度。
用Image.createImage()方法从jar文件里面加载图片：

private Image[] loadFrames(String name, int frames) throws IOException {
    Image[] images = new Image[frames];
    for (int i = 0; i < frames; ++i) {
        images[i] = Image.createImage(name + i + ".png");
    }
    return images;
}

你也可以传递一个Canvas对象（可选），和一个剪辑列表（clip list）。如果你指定了一个canvas和使用一个timer来自动更换到动画的下一帧，就如下面的例子代码中一样，canvas在动画向前滚动以后自动被重画(repaint)。不过这样的实现办法是可选的， 你可以这样做，也可以让程序选择合适的时候重画canvas。
 
因为MIDP 1.0不支持透明的图片，AnimatedImage 类使用一个剪辑列表来模拟透明的效果，剪辑列表是图片被剪成的方块
区域的系列。图片被画出来的时候分开几次，每次画一个剪辑列表里面的剪辑区域。剪辑列表在帧的基础上被定义好，所以
你需要为图片的每一帧创建一个数组。数组的大小应该是4的倍数，因为每一个剪辑面积保持了四个数值：左坐标，顶坐标，
宽度以及高度。坐标的原点是整个图片的左上角。需要注意的是使用了剪辑列表会使动画慢下来。如果图片更加复杂的话，你应该使用矢量图片。 AnimatedImage类扩展了java.util.TimerTask，允许你设定一个timer。

这里有个例子说明如何使用timer做动画：

Timer timer = new Timer();
AnimatedImage ai = ..... // get the image
timer.schedule(ai, 200, 200);

每隔大约200毫秒，timer调用AnimatedImage.run()方法一次，这个方法使得动画翻滚到下一个帧。现在我们需要的是让MIDlet来试试显示动画！我们定义一个简单的Canvas类的子类，好让我们把动画“粘贴上去”。

import java.util.*;
import javax.microedition.lcdui.*;

// A canvas to which you can attach one or more
// animated images.  When the canvas is painted,
// it cycles through the animated images and asks
// them to paint their current image.
public class AnimatedCanvas extends Canvas {
    private Display display;
    private Image offscreen;
    private Vector images = new Vector();
    public AnimatedCanvas(Display display) {
        this.display = display;
        // If the canvas is not double buffered by the
        // system, do it ourselves...
        if (!isDoubleBuffered()) {
            offscreen = Image.createImage(getWidth(),
                                          getHeight());
        }
    }


    // Add an animated image to the list.
    public void add(AnimatedImage image) {
        images.addElement(image);
    }

    // Paint the canvas by erasing the screen and then
    // painting each animated image in turn. Double
    // buffering is used to reduce flicker.
    protected void paint(Graphics g) {
        Graphics saved = g;
        if (offscreen != null) {
            g = offscreen.getGraphics();
        }
        g.setColor(255, 255, 255);
        g.fillRect(0, 0, getWidth(), getHeight());
        int n = images.size();
        for (int i = 0; i < n; ++i) {
            AnimatedImage img = (AnimatedImage)
                                images.elementAt(i);
            img.draw(g);
        }
        if (g != saved) {
            saved.drawImage(offscreen, 0, 0,
                            Graphics.LEFT | Graphics.TOP);
        }
    }
}

AnimatedCanvas 类的代码相当简单，由一个动画导入方法和一个paint方法。canvas画布每次被画，背景都会被擦除,然后循环每个导入的AnimatedImage对象，直接画到自己身上来（自己扩展了canvas类）。

import java.io.*;
import java.util.*;
import javax.microedition.lcdui.*;
import javax.microedition.midlet.*;

// MIDlet that displays some simple animations.
// Displays a series of birds on the screen and
// animates them at different (random) rates.
public class AnimationTest extends MIDlet implements CommandListener {
    private static final int BIRD_FRAMES = 7;
    private static final int NUM_BIRDS = 5;
    private Display display;
    private Timer timer = new Timer();
    private AnimatedImage[] birds;
    private Random random = new Random();
    public static final Command exitCommand =
            new Command("Exit", Command.EXIT, 1);
    public AnimationTest() {
    }

    public void commandAction(Command c, Displayable d) {
        if (c == exitCommand) {
            exitMIDlet();
        }
    }

    protected void destroyApp(boolean unconditional) throws
            MIDletStateChangeException {
        exitMIDlet();
    }

    public void exitMIDlet() {
        timer.cancel(); // turn it off...
        notifyDestroyed();
    }

    // Generate a non-negative random number...
    private int genRandom(int upper) {
        return (Math.abs(random.nextInt()) % upper);
    }

    public Display getDisplay() {
        return display;
    }

    // Initialize things by creating the canvas and then
    // creating a series of birds that are moved to
    // random locations on the canvas and attached to
    // a timer for scheduling.
    protected void initMIDlet() {
        try {
            AnimatedCanvas c = new AnimatedCanvas(getDisplay());
            Image[] images = loadFrames("/images/bird", BIRD_FRAMES);
            int w = c.getWidth();
            int h = c.getHeight();
            birds = new AnimatedImage[NUM_BIRDS];
            for (int i = 0; i < NUM_BIRDS; ++i) {
                AnimatedImage b = new AnimatedImage(c, images);
                birds[i] = b;
                b.move(genRandom(w), genRandom(h));
                c.add(b);
                timer.schedule(b, genRandom(1000), genRandom(400));
            }
            c.addCommand(exitCommand);
            c.setCommandListener(this);
            getDisplay().setCurrent(c);
        } catch (IOException e) {
            System.out.println("Could not load images");
            exitMIDlet();
        }
    }

    // Load the bird animation, which is stored as a
    // series of PNG files in the MIDlet suite.
    private Image[] loadFrames(String name, int frames) throws IOException {
        Image[] images = new Image[frames];
        for (int i = 0; i < frames; ++i) {
            images[i] = Image.createImage(name + i + ".png");
        }
        return images;
    }

    protected void pauseApp() {
    }

    protected void startApp() throws MIDletStateChangeException {
        if (display == null) {
            display = Display.getDisplay(this);
            initMIDlet();
        }
    }
}

七帧图片的动画，你可以看到一个拍着翅膀的小鸟。MIDlet显示了5只小鸟，小鸟的位置和刷新速度是随机的。你可以用一些其他的办法来改进这个程序，但这个程序也应该足够能让你上手了。