Swing/AnimeIcon のバックアップ(No.5)

TITLE:Timerでアニメーションするアイコンを作成

Timerでアニメーションするアイコンを作成

編集者:Terai Atsuhiro
作成日:2006-03-13
更新日:2024-02-02 (金) 11:37:11

Timerでアニメーションするアイコンを作成

概要

javax.swing.Timerを使って、アニメーションするアイコンを作成します。

#screenshot

サンプルコード

class AnimatedLabel extends JLabel implements ActionListener {
  private final javax.swing.Timer animator;
  private final AnimeIcon icon = new AnimeIcon();
  public AnimatedLabel() {
    super();
    animator = new javax.swing.Timer(100, this);
    setIcon(icon);
  }
  public void actionPerformed(ActionEvent e) {
    icon.next();
    repaint();
  }
  public void startAnimation() {
    icon.setRunning(true);
    animator.start();
  }
  public void stopAnimation() {
    icon.setRunning(false);
    animator.stop();
  }
}

class AnimeIcon implements Icon {
  private static final Color cColor = new Color(0.5f,0.5f,0.5f);
  private final Vector list = new Vector();
  private final Dimension dim;
  private boolean isRunning = false;
  public AnimeIcon() {
    super();
    double r  = 2.0d;
    double sx = 1.0d;
    double sy = 1.0d;
    list.addElement(new Ellipse2D.Double(sx+3*r, sy+0*r, 2*r, 2*r));
    list.addElement(new Ellipse2D.Double(sx+5*r, sy+1*r, 2*r, 2*r));
    list.addElement(new Ellipse2D.Double(sx+6*r, sy+3*r, 2*r, 2*r));
    list.addElement(new Ellipse2D.Double(sx+5*r, sy+5*r, 2*r, 2*r));
    list.addElement(new Ellipse2D.Double(sx+3*r, sy+6*r, 2*r, 2*r));
    list.addElement(new Ellipse2D.Double(sx+1*r, sy+5*r, 2*r, 2*r));
    list.addElement(new Ellipse2D.Double(sx+0*r, sy+3*r, 2*r, 2*r));
    list.addElement(new Ellipse2D.Double(sx+1*r, sy+1*r, 2*r, 2*r));
    int iw = (int)(r*8)+(int)(sx*2);
    int ih = (int)(r*8)+(int)(sy*2);
    dim = new Dimension(iw, ih);
  }
  public int getIconWidth() {
    return dim.width;
  }
  public int getIconHeight() {
    return dim.height;
  }
  public void paintIcon(Component c, Graphics g, int x, int y) {
    Graphics2D g2d = (Graphics2D) g;
    g2d.setPaint(c.getBackground());
    g2d.fillRect(x, y, getIconWidth(), getIconHeight());
    g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                         RenderingHints.VALUE_ANTIALIAS_ON);
    g2d.setPaint(cColor);
    float alpha = 0.0f;
    Iterator it = list.iterator();
    g2d.translate(x, y);
    while(it.hasNext()) {
      alpha = isRunning?alpha+0.1f:0.5f;
      g2d.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, alpha));
      g2d.fill((Shape)it.next());
    }
    g2d.translate(-x, -y);
  }
  public void next() {
    if(isRunning) list.addElement(list.remove(0));
  }
  public void setRunning(boolean isRunning) {
    this.isRunning = isRunning;
  }
}

&jnlp;
&jar;
&zip;

解説

上記のサンプルでは、スタートボタンを押すと*1アイコンがFireFox風にアニメーションします。

アニメーションは、8個の円からアイコンを生成して、それぞれのインデックスを順に変更することで行っています。

アイコンの生成
- リスト(Vector)に、座標の異なる円(Ellipse2D.Double)を8個生成して追加します。
インデックスの変更
- Timerを使って、リストの先頭にある円を最後に移動します。
異なるアルファ値で円を描画
- インデックスに応じたアルファ値でそれぞれの円を描画します。

円がいびつだったので、アンチエイリアスをかけていまが、Java SE 6 では「小さな円(曲線)が円に見えなかった問題」が解消されているようです(参考)。

色の濃い円が時計回りに回転するように変更しました。 -- terai 2006-03-15 (水) 11:12:08

Timerでアニメーションするアイコンを作成

概要

サンプルコード

解説

コメント