CSDN博客

img gdsean

MIDP中的动画

发表于2002/7/1 14:18:00  649人阅读

作者:Eir Giguere 编译:Sean

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


0 0

相关博文

我的热门文章

img
取 消
img