【问题标题】:Java fade in and out of imagesJava淡入淡出图像
【发布时间】:2013-12-19 05:52:59
【问题描述】:

我正在尝试学习如何将图像淡入和淡出到另一个图像或另一个图像。因此,如果我有 2 张图像,并且目前正在显示 1 张,我想在背景中显示另一张图像并将第一张图像淡入第二张图像。或者,我想将焦点放在新图像上并慢慢淡入第一张图像,然后停止显示第一张。

我不确定如何:

  1. 设置焦点,如果需要的话。

  2. 如果我将 alpha 更改为 0 并递增并且只绘制一个图像,我可以淡入,但是我无法使用此代码的任何变体使其淡出。 (即注释掉一个要绘制的图像)。

编辑:真的,我担心的是能够拥有 2 张图像并使当前显示的图像慢慢消失到第 2 张图像中。如何完成并不需要与此有关。

这是我正在弄乱的代码示例:

import java.awt.AlphaComposite;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.Timer;

public class FadeIn extends JPanel implements ActionListener {

    private Image imagem;
    private Image image2;
    private Timer timer;
    private float alpha = 1f;

    public FadeIn() {
        imagem = (new ImageIcon(getClass().getResource(
             "/resources/1stImage.jpg"))).getImage();
        image2 = (new ImageIcon(getClass().getResource(
             "/resources/2ndImage.jpg"))).getImage();    
        timer = new Timer(20, this);
        timer.start();
    }
    // here you define alpha 0f to 1f

    public FadeIn(float alpha) {
        imagem = (new ImageIcon(getClass().getResource(
             "/resources/1stImage.jpg"))).getImage();
        this.alpha = alpha;
    }

    @Override
    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2d = (Graphics2D) g;
        g2d.drawImage(imagem, 0, 0, 400, 300, null);
        g2d.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER,
                alpha));
        g2d.drawImage(image2, 0, 0, 400, 300, null);
    }

    public static void main(String[] args) {
        JFrame frame = new JFrame("Fade out");
        frame.add(new FadeIn());
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(420, 330);
        // frame.pack();
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }

    @Override
    public void actionPerformed(ActionEvent e) {
        alpha += -0.01f;
        if (alpha <= 0) {
            alpha = 0;
            timer.stop();
        }
        repaint();
    }
}

【问题讨论】:

  • “setFocus”是什么意思?
  • 基本上在背景中绘制一张图像,在其前面绘制另一张图像。然后使用计时器淡出顶部图像。而不是白色背景,它将是底部图像。如果我只是在屏幕上填充一个矩形,我已经能够做到这一点,但我无法在背景中设置图像。

标签: java image swing animation transparency


【解决方案1】:

基本上,这样做是使用相同的 alpha 值,从 0-1 淡入,然后使用相同的 alpha,从 1-0 开始,允许两个图像相互交叉淡入...

魔术基本上发生在paintComponent,其中图像使用alpha 值传入,传出图像使用1f - alpha

两张图片的切换其实是同一个过程,期待inImage换成outImage

时间略有不同。这不是使用标准增量(例如0.01)从0-1 直接移动,而是使用基于时间的算法。

也就是说,我使用一个每 40 毫秒左右计时的计时器,然后它会根据计时器运行的时间量进行计算,并相应地计算 alpha 值...

这允许您更改动画将花费的时间量,但还提供了一个稍微更好的算法,该算法考虑到了 Swings 渲染引擎的被动性质...

import java.awt.AlphaComposite;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.Timer;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class FadeImage {

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

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

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

    public static class TestPane extends JPanel {

        public static final long RUNNING_TIME = 2000;

        private BufferedImage inImage;
        private BufferedImage outImage;

        private float alpha = 0f;
        private long startTime = -1;

        public TestPane() {
            try {
                inImage = ImageIO.read(new File("/path/to/inImage"));
                outImage = ImageIO.read(new File("/path/to/outImage"));
            } catch (IOException exp) {
                exp.printStackTrace();
            }

            final Timer timer = new Timer(40, new ActionListener() {
                @Override
                public void actionPerformed(ActionEvent e) {
                    if (startTime < 0) {
                        startTime = System.currentTimeMillis();
                    } else {

                        long time = System.currentTimeMillis();
                        long duration = time - startTime;
                        if (duration >= RUNNING_TIME) {
                            startTime = -1;
                            ((Timer) e.getSource()).stop();
                            alpha = 0f;
                        } else {
                            alpha = 1f - ((float) duration / (float) RUNNING_TIME);
                        }
                        repaint();
                    }
                }
            });
            addMouseListener(new MouseAdapter() {

                @Override
                public void mouseClicked(MouseEvent e) {
                    alpha = 0f;
                    BufferedImage tmp = inImage;
                    inImage = outImage;
                    outImage = tmp;
                    timer.start();
                }

            });
        }

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(
                            Math.max(inImage.getWidth(), outImage.getWidth()), 
                            Math.max(inImage.getHeight(), outImage.getHeight()));
        }

        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            Graphics2D g2d = (Graphics2D) g.create();
            g2d.setComposite(AlphaComposite.SrcOver.derive(alpha));
            int x = (getWidth() - inImage.getWidth()) / 2;
            int y = (getHeight() - inImage.getHeight()) / 2;
            g2d.drawImage(inImage, x, y, this);

            g2d.setComposite(AlphaComposite.SrcOver.derive(1f - alpha));
            x = (getWidth() - outImage.getWidth()) / 2;
            y = (getHeight() - outImage.getHeight()) / 2;
            g2d.drawImage(outImage, x, y, this);
            g2d.dispose();
        }

    }

}

【讨论】:

  • 好的,我明白你在说什么。我将尝试以您指定的方式快速实现这一点。
  • 您可以使用直接增量来执行此操作,我只是发现基于时间的增量可以提供更好的结果;)
  • 哈哈,你比我更有经验,所以我会相信你的话:p 在我弄清楚如何使用 ImageIO.read 从资源中加载图像后,我得到了完美的工作。我以前从未使用过 BufferedImage。这适用于飞机旧的“图像”类型吗?
  • 好吧,不管怎样,这看起来都很棒。我对堆栈溢出的任何问题的最佳答案,谢谢。
  • 很高兴它有帮助 ;) - 我通常使用动画库来执行此类工作。我个人使用 TimingFramework,但 Trident 非常相似,Java Universal Tween Engine 看起来很有趣。
【解决方案2】:

这是大多数开发人员使用 java 代码进行图像淡化的简单而简短的方法。

import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.awt.image.RescaleOp;
import java.io.File;
import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;

/**
 *
 * @author ADMIN
 */
public class ImageFade extends JFrame {

    ImageFade() {
        setLayout(null);

        JLabel l = new JLabel();
        l.setBounds(0, 0, 100, 96);
        add(l);

        Thread tp = new Thread() {
            @Override
            public void run() {
                for (int amp = 0; amp <= 500; amp++) {
                    try {
                        sleep(1);
                        try {
                            BufferedImage bim = ImageIO.read(new File("src/image/fade/image.png"));
                            BufferedImage nbim = new BufferedImage(bim.getWidth(), bim.getHeight(), BufferedImage.TYPE_INT_ARGB);
                            Graphics2D createGraphics = nbim.createGraphics();
                            createGraphics.drawImage(bim, null, 0, 0);
                            RescaleOp r = new RescaleOp(new float[]{1f, 1f, 1f, (float) amp / 500}, new float[]{0, 0, 0, 0}, null);
                            BufferedImage filter = r.filter(nbim, null);
                            l.setIcon(new ImageIcon(filter));
                        } catch (Exception ex) {
                            System.err.println(ex);
                        }
                    } catch (InterruptedException ex) {
                    }
                }
            }
        };
        tp.start();

        setUndecorated(true);
        setBackground(new Color(0, 0, 0, 0));
        setSize(100, 96);
        setVisible(true);
        setLocationRelativeTo(null);
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setResizable(false);
        setAlwaysOnTop(true);
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        ImageFade fr = new ImageFade();
    }
}

在这段代码中你可以看到一个线程代码。在线程中,此图像将淡入。

使用的图像是堆栈溢出网页的标志图像。

只有通过显示的代码,图像才会淡入。

Thread tp = new Thread() {
    @Override
    public void run() {
        for (int amp = 0; amp <= 500; amp++) {
            try {
                sleep(1);
                try {
                    BufferedImage bim = ImageIO.read(new File("src/image/fade/image.png"));
                    BufferedImage nbim = new BufferedImage(bim.getWidth(), bim.getHeight(), BufferedImage.TYPE_INT_ARGB);
                    Graphics2D createGraphics = nbim.createGraphics();
                    createGraphics.drawImage(bim, null, 0, 0);
                    RescaleOp r = new RescaleOp(new float[]{1f, 1f, 1f, (float) amp / 500}, new float[]{0, 0, 0, 0}, null);
                    BufferedImage filter = r.filter(nbim, null);
                    l.setIcon(new ImageIcon(filter));
                } catch (Exception ex) {
                      System.err.println(ex);
                  }
            } catch (InterruptedException ex) {
            }
        }
    }
};
tp.start();

这段代码使用起来非常简单。

这不是来自任何书籍,互联网等。它是由我开发的。

普通图像无法更改 alpha。通过代码:BufferedImage nbim = new BufferedImage(bim.getWidth(), bim.getHeight(), BufferedImage.TYPE_INT_ARGB); 图像将转换为 ARGB - Alpha、红色、绿色、蓝色(R、G、B、A)图像。

因此您可以更改图像的 alpha。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-10-01
    • 1970-01-01
    • 2012-05-15
    相关资源
    最近更新 更多