MIDP中的动画

    技术2022-05-11  142

    作者: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)