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

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

3. בשבוע שעבר

4. בשבוע שעבר

5. Outline
Animation
The flickering problem
Assignment 3

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 = 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();

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;
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) {
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;

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