Practical Session 10: Animation

Animation kinds There are three basic kinds of animation: 1. Moving object 2. Changing pictures 3. Combination of 1 and 2.

Timer In order to get animation effect we need to update an image several times per second. We use javax.swing.Timer. A Timer periodically creates events of type ActionPerformed. For each event, the image can be changed or moved. Constructor syntax: Timer t = new Timer (delay, actionListener)

public class Ball extends JFrame implements ActionListener{ private Timer timer; private int x, y; private final int delay = 200; public Ball(){ x = 0; y = 0; timer = new Timer(delay,this); timer.start(); } public void paint(Graphics g){ super.paint(g); g.fillOval(x,y, 10, 10); } public void actionPerformed(ActionEvent e){ if (e.getSource() == timer){ x = x + 5; y = y + 5; repaint(); } }

Changing Pictures 1. Create an array of pictures. im = new ImageIcon[3]; im[0] = new ImageIcon("car1.gif"); im[1] = new ImageIcon("car2.gif"); im[2] = new ImageIcon("car3.gif"); 2. Define a field that represents the current image number. 3. The paint method draws the appropriate image. private int frame = 0; im[frame].paintIcon(this, g, x, y); 4. ActionPerformed, which is invoked by a timer, changes the current image. frame = (frame + 1) % 3;

public class Car extends JPanel implements ActionListener{ private int frame; private ImageIcon[] im; private Timer timer; private int x, y, dx, dy; public Car(){ frame = 0; x = 30; y = 30; dx = 15; dy = 15; im = new ImageIcon[3]; //... (create three images and assign to the array) timer = new Timer(200,this); timer.start(); } public void actionPerformed(ActionEvent e){ if (e.getSource() == timer){ frame = (frame + 1) % 3; x = (x + dx) % getSize().width; y = (y + dy) % getSize().height; repaint(); } } public void paint(Graphics g){ super.paint(g); im[frame].paintIcon(this, g, x, y); }

Responding to key press When a key is pressed a KeyEvent is initiated. Listening to KeyEvents is performed with KeyListener. public class Frame extends JFrame implements KeyListener{... public void keyPressed(KeyEvent e) { int code; code = e.getKeyCode());... } public static void main(String args []){ Frame frame = new Frame(); frame.addKeyListener(frame); }

Changing the Car example to respond to key press public class Car extends JPanel implements ActionListener, KeyListener{... public void keyPressed(KeyEvent e) { if (e.getKeyCode() == KeyEvent.VK_LEFT){ dx = -30; dy = 0; } if (e.getKeyCode() == KeyEvent.VK_RIGHT){ dx = 30; dy = 0; } if (e.getKeyCode() == KeyEvent.VK_UP){ dx = 0; dy = -30; } if (e.getKeyCode() == KeyEvent.VK_DOWN){ dy = 30; dx = 0; } }

Double Buffering Technique

The double buffering technique allows to overcome the flickering problem. Flickering appears because a drawing is deleted before it is repainted, and repaint takes time. Solution: Maintain an additional panel. Draw a new image on the additional panel. Replace the old image only once the new one is ready.

public void paint(Graphics g){ super.paint(g); for (int i = 0; i < matrix.size(); i++) for (int j =0; j < matrix.get(i).size(); j++) if (matrix.get(i).get(j).intValue() == 1) g.fillOval(i,j,5,5); g.fillOval(x,y,20,20); } Fixing the flickering problem in the Drawing-Canvas example Reminder: The original paint method of DrawingCanvas

public void paint(Graphics g){ //super.paint(g); Image offIm = createImage(getSize().width, getSize().height); Graphics offGr = offIm.getGraphics(); for (int i = 0; i < matrix.size(); i++) for (int j =0; j < matrix.get(i).size(); j++) if (matrix.get(i).get(j).intValue() == 1) offGr.fillOval(i, j, 5, 5 ); offGr.fillOval(x,y, 20, 20); g.drawImage(offIm, 0,0, this); } Fixing the flickering problem in the Drawing-Canvas example The corrected paint method