How to fade between two images ?

Java 2D
#1

Hi!

I’d like to know how can I make a fade in/out transition between two BufferedImages in java ? Any tutorial out there ?

Thanks

#2

personally, i would create a Rect ontop of the buffered images and change the alpha of that rectangle, when the alpha is 0, swap the images round.



private double transitionAlpha = 1;
private int counter = 0;

public void draw(Graphics2D g2d) {
  if (level1 == true) {
    g2d.drawImage(level1BufImage, null, 0, 0);
  }else if (level2==true && transitionAlpha == 0) {
    g2d.drawImage(level2BufImage, null, 0, 0);
  }

  if (inTransition == true) {
    counter++;
    transitionAlpha = Math.cos(Math.toRadians(counter));
    g2d.setColor(0, 0, 0, transitionAlpha);
    g2d.drawRect(0, 0, 800, 600); // if display == 800x600
  }
}
// loop

Hope that helps :slight_smile:

#3

If you wanted to fade directly from imageA to imageB, with no black stage, it would be a simple case of :-

g.setComposite(AlphaComposite.SrcOver);
g.drawImage(imageA,0,0,null);
g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, alphaScalar));
//manipulate alphaScalar between 0.0f and 1.0f for the fade. 
//(as suggested above, something like a sine wave might look nice)
#4

Thank you for your answers, I will try them now

#5

its actually a cosine wave! ;D

#6

I found a full piece of code at Sun site that does exactly what I was trying to do LOL


  import java.awt.*;
  import java.awt.image.*;
  import javax.swing.*;
  import java.util.Timer;
  import java.util.TimerTask;
  
  public class Converge extends JFrame {
  
    ImageIcon saloonIcon = 
      new ImageIcon("saloon.gif");
    ImageIcon coachIcon = 
      new ImageIcon("oldstage.gif");
    Image saloon = saloonIcon.getImage();
    Image coach = coachIcon.getImage();
  
    BufferedImage dest;
  
    float sourcePercentage = 1, 
      destinationPercentage = 0;
    private static int STEPS = 100;
    private static float STEP_CHANGE = 
      1.0f/STEPS;
    private static int SLEEP_DELAY = 100;
  
    Insets insets;
  
    public Converge() {
      super("Image Blending");
      setDefaultCloseOperation(
        JFrame.EXIT_ON_CLOSE);
      dest = new BufferedImage(200, 200, 
        BufferedImage.TYPE_INT_ARGB);
      setSize(200, 200);
      TimerTask task = new TimerTask() {
        public void run() {
          repaint();
          sourcePercentage -= STEP_CHANGE;
          destinationPercentage += 
            STEP_CHANGE;
          if (sourcePercentage < 0) {
            sourcePercentage = 0;
            destinationPercentage = 1;
            cancel();
          }
        }
      };
      Timer timer = new Timer();
      timer.schedule(task, 0, SLEEP_DELAY);
    }
  
    public void paint(Graphics g) {
      if (insets == null) {
        insets = getInsets();
      }
      g.translate(insets.left, insets.top);
      Graphics2D g2d = (Graphics2D)g;
      Graphics2D destG = dest.createGraphics();

      destG.setComposite(AlphaComposite.getInstance(
        AlphaComposite.SRC, sourcePercentage));
      destG.drawImage(coach, 0, 0, this);
      destG.setComposite(AlphaComposite.getInstance(
        AlphaComposite.XOR, destinationPercentage));
      destG.drawImage(saloon, 0, 0, this);
      g2d.drawImage(dest, 0, 0, this);
    }
   
    public static void main(String args[]) {
      new Converge().show();
    }
  }