用J2ME在移动设备上实现动画
2024年03月08日
使用MIDP(Mobile Information Device Profile)的开发人员经常会抱怨用些什么办法才可以在一个MIDlet上显示动画。MIDP 1.0没有直接提供对动画的支持(MIDP 2.0支持)，但真要是自己去实现，其实也并非是一件很难的事。任何动画的最基本的前提，是要在足够快的时间内显示和更换一张张的图片，让人的眼睛看到动的画面效果。图片必须按照顺序画出来。从一张图片到下一张图片之间的变化越小，效果会越好。
首先要做的，是使用你的图片处理软件（比如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=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=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=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只小鸟，小鸟的位置和刷新速度是随机的。你可以用一些其他的办法来改进这个程序，但这个程序也应该足够能让你上手了。
