My FAQ,最新最全的IT技术FAQ
最新100篇 | 推荐100篇 | 专题100篇 | 排行榜 | 搜索 | 在线API文档
首 页 | 程序开发 | 操作系统 | 软件应用 | 图形图象 | 网络应用 | 精文荟萃 | 教育认证 | 未整理篇 | 技术讨论
  当前位置: > 程序开发 > 编程语言 > Java > J2ME
用J2ME在移动设备上实现动画
作者:未知 时间:2005-07-24 21:23 出处:JR 责编:My FAQ
              摘要:用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'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只小鸟,小鸟的位置和刷新速度是随机的。 
你可以用一些其他的办法来改进这个程序,但这个程序也应该足够能让你上手了。 
 
首页 | 投资与合作 | 服务条款 | 隐私政策 | 收藏本站 | 设为首页 | 新用户注册 | 免责声明 | 使用帮助
Copyright ©2005-2008 myfaq.com.cn All rights reserved. www.myfaq.com.cn 版权所有