1. עקרונות תכנות מונחה עצמים תרגול 7: אנימציה

2. בשבוע שעבר
paint
Graphics
repaint

3. בשבוע שעבר

4. בשבוע שעבר

5. Outline
Animation
The flickering problem

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

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

8. Example 1 - Ball
public class Ball extends JFrame implements ActionListener{
private Timer timer;
private int x, y;
private final int delay = 20;
public Ball(){
setDefaultCloseOperation(EXIT_ON_CLOSE);
x = 0; y = 0;
timer = new Timer(delay,this);
timer.start();
setVisible(true);
setSize(800,800); }
public void paint(Graphics g){
super.paint(g);
g.fillOval(x, y, x, y);
public void actionPerformed(ActionEvent e){
if (e.getSource() == timer){
x = x + 5; y = y + 5;
repaint();

9. Example 2 – Moving Car

10. 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.
private int frame = 0;
public void paintIcon(Component c, Graphics g, int x, int y)
Paints the icon. The top-left corner of the icon is drawn at the point (x, y) in the coordinate space of the graphics context g. If this icon has no image observer, this method uses the c component as the observer.
Specified by:
paintIcon in interface Icon
Parameters:
c - the component to be used as the observer if this icon has no image observer
g - the graphics context
x - the X coordinate of the icon's top-left corner
y - the Y coordinate of the icon's top-left corner
3. The paint method draws the appropriate image.
im[frame].paintIcon(this, g, x, y);
4. ActionPerformed, which is invoked by a timer, changes the current image.
frame = (frame + 1) % 3;

11. 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); }

12. 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);

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

14. Double Buffering Technique

15. 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.

17. Fixing the flickering problem in the Drawing-Canvas example
Reminder: The original paint method of DrawingCanvas
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); }

18. Fixing the flickering problem in the Drawing-Canvas example
The corrected paint method
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); }

19. סיכום אנימציה javax.swing.Timer paint and repaint KeyListener
Double buffering