How do I fade out one image and fade in another (Java)?

Question

I want to make it so that while one image is fading out, another is fading in. I have two BufferedImages and I'm using AWT.

Edit:

package com.cgp.buildtown;

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Cursor;
import java.awt.Font;
import java.awt.FontFormatException;
import java.awt.Graphics;
import java.awt.GraphicsEnvironment;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.swing.JPanel;
import javax.swing.JTextField;
import javax.swing.border.EmptyBorder;

public class Intro extends JPanel implements Runnable, MouseListener, MouseMotionListener {
    private static final long serialVersionUID = 1L;
    private Thread thread;
    private BufferedImage bg, bgsel, bg2, bg2sel;
    private JTextField tf = new JTextField();
    private Font font;
    private int mousex, mousey;
    private boolean buttonClicked = false;

    public Intro() {
        super();
        loadImages();
        addMouseListener(this);
        addMouseMotionListener(this);
        setLayout(new BorderLayout());
        setBorder(new EmptyBorder(100, 110, 150, 110));
        tf.setHorizontalAlignment(JTextField.CENTER);
        tf.setFont(loadFont(50f));
        tf.setBackground(new Color(255, 255, 205));
        tf.setBorder(null);
        tf.setForeground(Color.BLACK);
        add(tf, BorderLayout.SOUTH);
    }

    private Font loadFont(Float f) {
        try {
            font = Font.createFont(Font.TRUETYPE_FONT, new File("res/komikatext.ttf"));
            GraphicsEnvironment ge = GraphicsEnvironment.getLocalGraphicsEnvironment();
            ge.registerFont(font);
        } catch (FontFormatException | IOException e) {
            e.printStackTrace();
        }
        return font.deriveFont(f);
    }

    private void loadImages() {
        try {
            bg = ImageIO.read(new File("res/introbg1.png"));
            bgsel = ImageIO.read(new File("res/introbg1selected.png"));
            bg2 = ImageIO.read(new File("res/introbg2.png"));
            bg2sel = ImageIO.read(new File("res/introbg2selected.png"));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public void addNotify() {
        super.addNotify();
        thread = new Thread(this);
        thread.start();
    }

    public void run() {
        while (true) {
            repaint();
            if (!buttonClicked) {
                if (mousex >= 350 && mousex <= 450 && mousey >= 450 && mousey <= 490 && tf.getText().length() > 0)
                    setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));
                else
                    setCursor(Cursor.getDefaultCursor());
            } else {
                if (mousex >= 300 && mousex <= 500 && mousey >= 450 && mousey <= 490 && tf.getText().length() > 0)
                    setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));
                else
                    setCursor(Cursor.getDefaultCursor());
            }
            try {
                Thread.sleep(40);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }
    }

    public void paintComponent(Graphics g) {
        super.paintComponent(g);

        if (!buttonClicked) {
            g.drawImage(bg, 0, 0, null);
            if (mousex >= 350 && mousex <= 450 && mousey >= 450 && mousey <= 490 && tf.getText().length() > 0)
                g.drawImage(bgsel, 350, 450, null);
        } else if (buttonClicked) {
            g.drawImage(bg2, 0, 0, null);
            if (mousex >= 300 && mousex <= 500 && mousey >= 450 && mousey <= 490 && tf.getText().length() > 0)
                g.drawImage(bg2sel, 300, 450, null);
        }
    }

    @SuppressWarnings("deprecation")
    public void mouseClicked(MouseEvent e) {
        if (mousex >= 350 && mousex <= 450 && mousey >= 450 && mousey <= 490 && tf.getText().length() > 0 && !buttonClicked) {
            tf.setText(tf.getText() + "'s Town");
            buttonClicked = true;
        } else if (mousex >= 350 && mousex <= 450 && mousey >= 450 && mousey <= 490 && tf.getText().length() > 0 && buttonClicked) {
            BuildTown.replace();
            thread.stop();
        }
    }

    public void mouseMoved(MouseEvent e) {
        mousex = e.getX();
        mousey = e.getY();
    }

    public void mousePressed(MouseEvent e) {

    }

    public void mouseReleased(MouseEvent e) {

    }

    public void mouseEntered(MouseEvent e) {

    }

    public void mouseExited(MouseEvent e) {

    }

    public void mouseDragged(MouseEvent e) {

    }
}

Answer 1

You can use Trident to interpolate a property you define in your class. Then during painting you can use this property as alpha in AlphaComposite. Here you can find some examples for AlphaComposite.

EDIT: May be this can help you:

//define a property to animate
float opacity;

//define timeline for animation
Timeline timeline = new Timeline(this);
timeline.addPropertyToInterpolate("opacity", 1.0f, 0.0f);
timeline.play();

//inside painting 
...
Graphics2D g2d = (Graphics2D) g.create();
g2d.setComposite(AlphaComposite.SrcOver.derive(this.opacity));
g2d.drawImage(img1...);

g2d.setComposite(AlphaComposite.SrcOver.derive(1.0 - this.opacity));
g2d.drawImage(img1...);

g2d.dispose();
...