Swing Timers and Animations in JPanel

Question

Im trying to animate 2 boxes to go from the top right to the bottom left of a JPanel. For the animation I'm using a Swing Timer and SwingUtilities.invokeLater(). The problem is that when I click the start button. It only animates and moves the blue box, but not the red one.

Heres the code:

//import neccessary stuff
public class Example extends JFrame {
public static void main(String[] args) {
    Example e = new Example();
    e.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    e.setSize(600, 565);
    e.setVisible(true);
}</code>

private JButton startButton = new JButton("Start");

private JPanel theTable = new table();


public Example() {
    add(startButton, BorderLayout.SOUTH);
    add(theTable, BorderLayout.CENTER);
    Handler handler = new Handler();
    startButton.addActionListener(handler);
}

public ArrayList<Integer> xPos, yPos;
final int START_POSITION_X = 470;
final int START_POSITION_Y = 10;

final int[] END_POSITION_X = {70, 87};
final int END_POSITION_Y = 160;

private class table extends JPanel {

    public table() {
        xPos = new ArrayList<Integer>();
        yPos = new ArrayList<Integer>();
        xPos.add(START_POSITION_X); //default position for box1
        yPos.add(START_POSITION_Y);
        xPos.add(START_POSITION_X); //default position for box2
        yPos.add(START_POSITION_Y);
    }

    public void paintComponent(Graphics g) {

        super.paintComponent(g);
        this.setBackground(new Color(-16756217));
        g.setColor(Color.RED);
        g.fillRect(xPos.get(1), yPos.get(1), 89, 129);
        g.setColor(Color.BLUE);
        g.fillRect(xPos.get(0), yPos.get(0), 89, 129);

        if (isAnimating) {
            animator.start();
        } else {
            animator.stop();
            isAnimating = false;
        }
    }
}

private class Handler implements ActionListener {
    public void actionPerformed(ActionEvent e) {

        Runnable r1 = new Runnable() {
            @Override
            public void run() {
                animateCard(0, END_POSITION_X[0], END_POSITION_Y);
            }
        };
        SwingUtilities.invokeLater(r1);
        animateCard(1, END_POSITION_X[1], END_POSITION_Y);
    }
}

public void animateCard(int card, int xDest, int yDest) {
    cardID = card;
    xDestination = xDest;
    yDestination = yDest;
    totalXDistance = Math.abs(xDestination - START_POSITION_X);
    totalYDistance = Math.abs(yDestination - START_POSITION_Y);
    animator.start();
}
int cardID;
int xDestination, yDestination, totalXDistance, totalYDistance;
boolean isAnimating = false;
Timer animator = new Timer(15, new ActionListener() {
    int startVel = 20;

    public void actionPerformed(ActionEvent e) {
        double xRelDistance, xAbsDistance, xVel;
        int xRealVel;
        xAbsDistance = xDestination - xPos.get(cardID);
        xRelDistance = xAbsDistance / totalXDistance;
        xVel = startVel * xRelDistance;

        double yRelDistance, yAbsDistance, yVel;
        yAbsDistance = yDestination - yPos.get(cardID);
        yRelDistance = yAbsDistance / totalYDistance;
        yVel = startVel * yRelDistance;

        if (xVel > 0) {
            xRealVel = (int) java.lang.Math.ceil(xVel);
        } else {
            xRealVel = (int) java.lang.Math.floor(xVel);

        }
        xPos.set(cardID, xPos.get(cardID) + xRealVel);
        int yRealVel;
        if (xVel > 0) {
            yRealVel = (int) java.lang.Math.ceil(yVel);
            yPos.set(cardID, yPos.get(cardID) + yRealVel);
        } else {
            yRealVel = (int) java.lang.Math.floor(yVel);

        }
        yPos.set(cardID, yPos.get(cardID) + yRealVel);

        if ((xPos.get(cardID) == xDestination) && (yPos.get(cardID) == yDestination)) {
            isAnimating = false;
        } else {
            isAnimating = true;
        }
        repaint();
    }
});

}

Answer 1

So all of those variable declared at the class level are shared... Your first call to animateCard will set them and then your second call to animateCard is going to completely overwrite the previous values. You need to change them from class variables to parameters of the animation.

Create a new class AnimationTask that implements ActionListener and save the variables in that class.

E.g.,

class AnimationTask implements ActionListener {
    private int cardID;
    private int xDest;
    private int yDest;
    private int totalXDistance;
    private int totalYDistance;
    public AnimationTask(int cardID, int xDest, int yDest) {
       this.cardID = cardID;
       this.xDest = xDest;
       this.yDest = yDest;
       this.totalXDistance = Math.abs(xDestination - START_POSITION_X);
       this.totalYDistance = Math.abs(yDestination - START_POSITION_Y);
    }

    public void actionPerformed(ActionEvent e) {
         // do your animation logic...
    }
}

and use that custom class in your "animator"

E.g.,

Timer animator = new Timer(15, new AnimationTask(cardId, xDest, yDest);

Answer 2

put

animateCard(1, END_POSITION_X[1], END_POSITION_Y);

inside your run method:

public void run() {
            animateCard(0, END_POSITION_X[0], END_POSITION_Y);
        }