animate JPanel (slide in) with timer

Question

I am trying to make a JPanel slide in from the side using this class i made:

public class AnimationClass {

    private int i;
    private int y;
    private JPanel panel;
    private int xTo;
    private Timer timer;
    private int xFrom;

    synchronized void slidePanelInFromRight(JPanel panelInput, int xFromInput, int xToInput, int yInput, int width, int height) {
        this.panel = panelInput;
        this.xFrom = xFromInput;
        this.xTo = xToInput;
        this.y = yInput;

            panel.setSize(width, height);

            timer = new Timer(0, new ActionListener() {
                public void actionPerformed(ActionEvent ae) {

                    for (int i = xFrom; i > xTo; i--) {
                        panel.setLocation(i, y);
                        panel.repaint();
                        i--;

                        timer.stop();
                        timer.setDelay(100);

                        if (i >= xTo) {
                            timer.stop();
                        }
                    }
                    timer.stop();

                }
            });
            timer.start();

    }

}

Well, i dont know what the problem is. I've tried a lot of different things, but i doesn't seem like I can get it to work.

Answer 1

example to slid Anything

---

    package TestingPackage;

import java.awt.Color;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

public class ToggleBtn extends JPanel {

    JFrame frame;
    JPanel panelOut;
    JLabel labelOn;
    JLabel labelOff;
    JButton btn;
    int count = 1;

    public ToggleBtn() {
        frame = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setBounds(500, 300, 300, 300);
        frame.setLayout(null);

        panelOut = new JPanel(null);
        panelOut.setBounds(50, 100, 120, 30);
        panelOut.setBackground(Color.gray);
        frame.add(panelOut);

        btn = new JButton("::");
        btn.setBounds(0, 0, 60, 30);
        panelOut.add(btn);
        btn.addActionListener(new ActionListener() {

            @Override
            public void actionPerformed(ActionEvent e) {
                startThread();
            }
        });
        labelOn = new JLabel("ON");
        labelOn.setBounds(0, 0, 60, 30);
        panelOut.add(labelOn);

        labelOff = new JLabel("OFF");
        labelOff.setBounds(60, 0, 60, 30);
        panelOut.add(labelOff);

        frame.setVisible(true);
    }

    public void startThread() {
        count++;
        new Move().start();
    }

    public static void main(String[] args) {
        new ToggleBtn();
    }

    class Move extends Thread {

        @Override
        public void run() {
            if (count % 2 == 0) {
                System.out.println("if");
                for (int i = 0; i <= 60; i++) {
                    try {
                        Thread.sleep(3);
                    } catch (InterruptedException ex) {
                        Logger.getLogger(ToggleBtn.class.getName()).log(Level.SEVERE, null, ex);
                    }
                    btn.setBounds(i, 0, 60, 30);
                }

            } else {
                System.out.println("else");
                for (int i = 60; i >= 0; i--) {
                    try {
                        Thread.sleep(3);
                    } catch (InterruptedException ex) {
                        Logger.getLogger(ToggleBtn.class.getName()).log(Level.SEVERE, null, ex);
                    }
                    btn.setBounds(i, 0, 60, 30);
                }
            }
        }
    }
}

Answer 2

There are a number of problems in the OP's code. As MadProrammer points, should only be moving one step per timer tick. Here is a simple,tested correction to the OPs code which moves the JPanel one pixel at a time, 25 times a second. Note the comments:

synchronized void slidePanelInFromRight(JPanel panelInput, int xFromInput, int xToInput, int yInput, int width, int height) {
this.panel = panelInput;
this.xFrom = xFromInput;
this.xTo = xToInput;
this.y = yInput;

    panel.setSize(width, height);

    // timer runs 25 times per second
    timer = new Timer(40, new ActionListener() {
        public void actionPerformed(ActionEvent ae) {

            // Must 'remember' where we have slid panel to by using instance variable rather than automatic variable
            // Only move one step at a time.
            // No need to restart timer, it continues to run until stopped
            if (xFrom > xTo){
                xFrom = xFrom - 1;
                panel.setLocation(xFrom, y);
                panel.repaint();
            } else {
                timer.stop();
           }

            panel.setLocation(xFrom, y);
            panel.repaint();

        }
    });
    timer.start();

}

Answer 3

This well-factored example easily admits the variation below. It leverages the enclosed panel's preferred size in a JLayeredPane.

/**
 * @see https://stackoverflow.com/a/16322007/230513
 * @see https://stackoverflow.com/a/16316345/230513
 */
public class TestPane extends JLayeredPane {

    private static final int WIDE = 200;
    private static final int HIGH = 5 * WIDE / 8; // ~1/phi
    private JPanel panel;

    public TestPane() {
        panel = new JPanel();
        panel.setBackground(Color.RED);
        panel.add(new JButton("Test"));
        add(panel);

        Dimension size = panel.getPreferredSize();
        int half = HIGH / 2 - size.height / 2;
        Rectangle from = new Rectangle(size);
        from.translate(WIDE, half);
        Rectangle to = new Rectangle(size);
        to.translate(0, half);
        panel.setBounds(from);

        Animate animate = new Animate(panel, from, to);
        animate.start();
    }

    @Override
    public Dimension getPreferredSize() {
        return new Dimension(WIDE, HIGH);
    }
}

Answer 4

The timer should be changing the location on each tick, until it is in place, instead, on each tick, you're running through a for-next loop, which is blocking the EDT until the loop finishes, preventing from updating the UI

Update with example

For example...

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Point;
import java.awt.Rectangle;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.Action;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.Timer;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class TestAnimatedPane {

    public static void main(String[] args) {
        new TestAnimatedPane();
    }

    public TestAnimatedPane() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                }

                JFrame frame = new JFrame("Test");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.setLayout(new BorderLayout());
                frame.add(new TestPane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class TestPane extends JPanel {

        private JPanel panel;

        public TestPane() {
            setLayout(null);
            panel = new JPanel();
            panel.setBackground(Color.RED);
            add(panel);
            Dimension size = getPreferredSize();

            Rectangle from = new Rectangle(size.width, (size.height - 50) / 2, 50, 50);
            Rectangle to = new Rectangle((size.width - 50) / 2, (size.height - 50) / 2, 50, 50);

            Animate animate = new Animate(panel, from, to);
            animate.start();

        }

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(200, 200);
        }

    }

    public static class Animate {

        public static final int RUN_TIME = 2000;

        private JPanel panel;
        private Rectangle from;
        private Rectangle to;

        private long startTime;

        public Animate(JPanel panel, Rectangle from, Rectangle to) {
            this.panel = panel;
            this.from = from;
            this.to = to;
        }

        public void start() {
            Timer timer = new Timer(40, new ActionListener() {
                @Override
                public void actionPerformed(ActionEvent e) {
                    long duration = System.currentTimeMillis() - startTime;
                    double progress = (double)duration / (double)RUN_TIME;
                    if (progress > 1f) {
                        progress = 1f;
                        ((Timer)e.getSource()).stop();
                    }
                    Rectangle target = calculateProgress(from, to, progress);
                    panel.setBounds(target);
                }
            });
            timer.setRepeats(true);
            timer.setCoalesce(true);
            timer.setInitialDelay(0);
            startTime = System.currentTimeMillis();
            timer.start();
        }

    }

    public static Rectangle calculateProgress(Rectangle startBounds, Rectangle targetBounds, double progress) {

        Rectangle bounds = new Rectangle();

        if (startBounds != null && targetBounds != null) {

            bounds.setLocation(calculateProgress(startBounds.getLocation(), targetBounds.getLocation(), progress));
            bounds.setSize(calculateProgress(startBounds.getSize(), targetBounds.getSize(), progress));

        }

        return bounds;

    }

    public static Point calculateProgress(Point startPoint, Point targetPoint, double progress) {

        Point point = new Point();

        if (startPoint != null && targetPoint != null) {

            point.x = calculateProgress(startPoint.x, targetPoint.x, progress);
            point.y = calculateProgress(startPoint.y, targetPoint.y, progress);

        }

        return point;

    }

    public static int calculateProgress(int startValue, int endValue, double fraction) {

        int value = 0;
        int distance = endValue - startValue;
        value = (int)Math.round((double)distance * fraction);
        value += startValue;

        return value;

    }

    public static Dimension calculateProgress(Dimension startSize, Dimension targetSize, double progress) {

        Dimension size = new Dimension();

        if (startSize != null && targetSize != null) {

            size.width = calculateProgress(startSize.width, targetSize.width, progress);
            size.height = calculateProgress(startSize.height, targetSize.height, progress);

        }

        return size;

    }
}

Update

I should have added this in last night (1 year who didn't want to go to bed, 2 parents that did, say no more...)

Animation is complex topic, especially when you start looking at variable speed (the example is static).

Instead of reinventing the wheel, you should seriously consider taking a look at...

• Timing Framework - This is base animation framework, that makes no assumptions about how you might like to use it.
• Trident - Similar to the Timing Framework, but also has support for Swing based components (via reflection) build in
• Universal Tween Engine