用J2ME在移動裝置上實現動畫(轉)

用J2ME在移動裝置上實現動畫(轉)[@more@]

　　使用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物件，直接畫到自己身上來（自己擴