Java Swing中的动画行

Question

I am currently writing code for creating a monitoring tool which monitors the Amazon Web Services and Amazon Cloud, and visualize my currently running cloud infrastructure.

For example , if the CPU Utilization or the Network I/O increases some threshold value than auto scaling is called and a new instance of EC2 is added to the system, this code is running perfectly but now I am visualizing this thing on the GUI of the tool which shows this activity. I am using Java Swing to create the monitoring tool.

The main help I needed is as following:

I am visualizing client on the top of the frame and EC2 instances below the client and just to show logical connectivity between client and server I am drawing lines between client and EC2 instances.

Now I need these line to be animated - maybe a stroked line moving slowly just to show that there is some traffic between client and EC2 instances also I want that the speed of the animation or stroke movement in the line increases as the traffic increases.(may be a variable to set speed of animation).

I need help on how I could implement such animated lines in Java Swings. Any help is highly appreciated.

Answer 1

Here is a small example of moving dashed line fully painted and animated from zero:

private static int speed = 5;

public static void main ( String[] args )
{
    JFrame frame = new JFrame ();
    frame.setLayout ( new BorderLayout () );

    frame.add ( new JComponent ()
    {
        private int diff = 0;

        {
            final Timer timer = new Timer ( 1000 / ( 10 * speed ), null );
            timer.addActionListener ( new ActionListener ()
            {
                public void actionPerformed ( ActionEvent e )
                {
                    if ( diff < 20 )
                    {
                        diff++;
                    }
                    else
                    {
                        diff = 0;
                    }
                    repaint ();
                    timer.setDelay ( 1000 / ( 10 * speed ) );
                }
            } );
            timer.start ();
        }

        protected void paintComponent ( Graphics g )
        {
            Graphics2D g2d = ( Graphics2D ) g;
            g2d.setRenderingHint ( RenderingHints.KEY_ANTIALIASING,
                    RenderingHints.VALUE_ANTIALIAS_ON );
            g2d.setStroke (
                    new BasicStroke ( 5f, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND, 1f,
                            new float[]{ 10f, 10f }, diff ) );
            g2d.setPaint ( Color.BLACK );
            g2d.drawLine ( 0, getHeight () / 2, getWidth (), getHeight () / 2 );
        }
    } );
    frame.add ( new JSlider ( JSlider.HORIZONTAL, 1, 10, speed )
    {
        {
            addChangeListener ( new ChangeListener ()
            {
                public void stateChanged ( ChangeEvent e )
                {
                    speed = getValue ();
                }
            } );
        }
    }, BorderLayout.SOUTH );
    frame.setSize ( 500, 500 );
    frame.setLocationRelativeTo ( null );
    frame.setVisible ( true );
}

Basically for animation you will need to paint most of the things you want to animate. In your case if it is two objects connected with a dashed line - you could use container that paints that connection and just simple Swing components placed on it. So it will detect their bounds and draw connecting lines...

Answer 2

Animate a BasicStroke . See this answer for example code.

Answer 3

Use JPanel and override its paintComponent() method.This method will be responsible for animation.

public void paintComponent(Graphics g)
 {
 super.paintComponent(g);
 g.setColor(Color.red); 
 g.drawLine(x1,y1,x2, y2); 
}

Increment the x2 again when required.In your case, need to do increment x2 when new connections are handled by the server. Hope this will help you.