TITLE:Crossfadeで画像の切り替え

Crossfadeで画像の切り替え

編集者:Terai Atsuhiro~

作成日:2007-03-12
更新日:2021-12-10 (金) 15:36:46
  • category: swing folder: Crossfade title: Crossfadeで画像の切り替え tags: [Animation, ImageIcon, AlphaComposite] author: aterai pubdate: 2007-03-12T13:33:16+09:00 description: Crossfadeアニメーションで画像の切り替えを行います。 image: https://lh6.googleusercontent.com/_9Z4BYR88imo/TQTKRJIdouI/AAAAAAAAAVs/yU1oEsWfzvA/s800/Crossfade.png

概要

Crossfadeアニメーションで画像の切り替えを行います。

概要

Crossfadeアニメーションで画像の切り替えを行います。

サンプルコード

#spanend
#spanadd
class Crossfade extends JComponent implements ActionListener {
#spanend
  private final javax.swing.Timer animator;
  private final ImageIcon icon1;
  private final ImageIcon icon2;
  private int alpha = 10;
  private boolean direction = true;

#spandel
#screenshot
#spanend
  public Crossfade(ImageIcon icon1, ImageIcon icon2) {
    this.icon1 = icon1;
    this.icon2 = icon2;
    animator = new javax.swing.Timer(50, this);
  }

#spandel
**サンプルコード [#s306a237]
#spanend
 class Crossfade extends JComponent implements ActionListener {
   private final javax.swing.Timer animator;
   private final ImageIcon icon1;
   private final ImageIcon icon2;
   private int alpha = 10;
   private boolean mode = true;
   public Crossfade(ImageIcon icon1, ImageIcon icon2) {
     this.icon1 = icon1;
     this.icon2 = icon2;
     animator = new javax.swing.Timer(50, this);
   }
   public void animationStart() {
     mode = !mode;
     animator.start();
   }
   public void paintComponent(Graphics g) {
     Graphics2D g2d = (Graphics2D)g;
     g2d.setColor(getBackground());
     g2d.fillRect(0, 0, getWidth(), getHeight());
     g2d.drawImage(icon1.getImage(), 0, 0,
       (int)icon1.getIconWidth(), (int)icon1.getIconHeight(), this);
     g2d.setComposite(makeAlphaComposite());
     g2d.drawImage(icon2.getImage(), 0, 0,
       (int)icon2.getIconWidth(), (int)icon2.getIconHeight(), this);
   }
   private AlphaComposite makeAlphaComposite() {
     if(mode && alpha<10) {
       alpha = alpha + 1;
     }else if(!mode && alpha>0) {
       alpha = alpha - 1;
     }else{
       animator.stop();
     }
     return AlphaComposite.getInstance(AlphaComposite.SRC_OVER, alpha*0.1f);
   }
   public void actionPerformed(ActionEvent e) {
     repaint();
   }
 }
  public void animationStart() {
    direction = !direction;
    animator.start();
  }

-&jnlp;
-&jar;
-&zip;
  @Override protected void paintComponent(Graphics g) {
    Graphics2D g2 = (Graphics2D) g.create();
    g2.setPaint(getBackground());
    g2.fillRect(0, 0, getWidth(), getHeight());
    if (direction && alpha < 10) {
      alpha = alpha + 1;
    } else if (!direction && alpha > 0) {
      alpha = alpha - 1;
    } else {
      animator.stop();
    }
    g2.setComposite(AlphaComposite.getInstance(
        AlphaComposite.SRC_OVER, 1f - alpha * .1f));
    g2.drawImage(icon1.getImage(), 0, 0,
        (int) icon1.getIconWidth(), (int) icon1.getIconHeight(), this);
    g2.setComposite(AlphaComposite.getInstance(
        AlphaComposite.SRC_OVER, alpha * .1f));
    g2.drawImage(icon2.getImage(), 0, 0,
        (int) icon2.getIconWidth(), (int) icon2.getIconHeight(), this);
    g2.dispose();
  }

#spandel
**解説 [#lc4f6171]
#spanend
#spandel
上記のサンプルでは、二枚目の画像の描画に使用するAlphaCompositeを変化させて上書きすることで、画像が切り替わるようにしています。また、この上書きの規則には、AlphaComposite.SRC_OVERを使っています。
#spanend
  @Override public void actionPerformed(ActionEvent e) {
    repaint();
  }
#spanadd
}
#spanend
#spanadd
View in GitHub: Java, Kotlin

コメント

解説

上記のサンプルでは、2枚の画像の描画に使用するAlphaCompositeをそれぞれ変化させながら上書き(上書き規則にはAlphaComposite.SRC_OVERを使用)することで、画像の表示を切り替えています。

参考リンク

コメント