Image animation in java swing on click

Question

Say I have a JFrame and a JButton in it. I want to display an animated (.gif) image once I click the button. While another event (say ActionEvent e) stops displaying the animation in the JFrame. What should be my approach?

Solution 1

Display the 1st image (animation frame) in a JLabel. When the user clicks the button, start a Swing Timer that changes the icon of the label to the next frame(s), looping once it has shown all frames. When the user clicks the button again, stop the animation.

import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.net.URL;
import javax.imageio.ImageIO;
import javax.swing.*;

class Chomper {

    public static void main(String[] args) throws Exception {
        final Image[] frames = {
            ImageIO.read(new URL("http://i.stack.imgur.com/XUmOD.png")),
            ImageIO.read(new URL("http://i.stack.imgur.com/zKyiD.png")),
            ImageIO.read(new URL("http://i.stack.imgur.com/4maMm.png")),
            ImageIO.read(new URL("http://i.stack.imgur.com/wn9V5.png"))
        };
        Runnable r = new Runnable() {

            @Override
            public void run() {
                JPanel gui = new JPanel(new BorderLayout());

                final JLabel animation = new JLabel(new ImageIcon(frames[0]));
                gui.add(animation, BorderLayout.CENTER);

                ActionListener animate = new ActionListener() {

                    private int index = 0;

                    @Override
                    public void actionPerformed(ActionEvent e) {
                        if (index<frames.length-1) {
                            index++;
                        } else {
                            index = 0;
                        }
                        animation.setIcon(new ImageIcon(frames[index]));
                    }
                };
                final Timer timer = new Timer(200,animate);

                final JToggleButton b = new JToggleButton("Start/Stop");
                ActionListener startStop = new ActionListener() {

                    @Override
                    public void actionPerformed(ActionEvent e) {
                        if (b.isSelected()) {
                            timer.start();
                        } else {
                            timer.stop();
                        }
                    }
                };
                b.addActionListener(startStop);
                gui.add(b, BorderLayout.PAGE_END);

                JOptionPane.showMessageDialog(null, gui);
            }
        };
        // Swing GUIs should be created and updated on the EDT
        // http://docs.oracle.com/javase/tutorial/uiswing/concurrency/initial.html
        SwingUtilities.invokeLater(r);
    }
}

Solution 2

I don't know how to get the frame/images from a gif, but if you have access to them, then you can use the Animated Icon class to do the animation for you. It uses a Timer behind the scenes to do the animation so you can simply start/stop/pause the Timer as you wish.