用J2ME在移动设备上实现动画

用J2ME在移动设备上实现动画

使用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&acute;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只小鸟，小鸟的位置和刷新速度是随机的。你可以用一些其他的办法来改进这个程序，但这个程序也应该足够能让你上手了。