Swing/EaseInOut のバックアップ差分(No.1)

  • 追加された行はこの色です。
  • 削除された行はこの色です。
TITLE:JTextAreaをキャプションとして画像上にスライドイン
#navi(../)
RIGHT:Posted by [[aterai]] at 2011-05-09
*JTextAreaをキャプションとして画像上にスライドイン [#wf8e9a74]
画像の上にJTextAreaをスライドインアニメーションで表示します。

-&jnlp;
-&jar;
-&zip;

//#screenshot
#ref(https://lh4.googleusercontent.com/_9Z4BYR88imo/Tcd9MqA6BlI/AAAAAAAAA64/Q7KLCkUETZ4/s800/EaseInOut.png)

**サンプルコード [#i6cf925e]
#code{{
private int delay = 4;
private int count = 0;
@Override public void mouseEntered(MouseEvent e) {
  if(animator!=null && animator.isRunning() ||
     yy==textArea.getPreferredSize().height) return;
  final double h = (double)textArea.getPreferredSize().height;
  animator = new javax.swing.Timer(delay, new ActionListener() {
    @Override public void actionPerformed(ActionEvent e) {
      double a = easeInOut(++count/h);
      yy = (int)(.5d+a*h);
      textArea.setBackground(new Color(0f,0f,0f,(float)(0.6*a)));
      if(yy>=textArea.getPreferredSize().height) {
        yy = textArea.getPreferredSize().height;
        animator.stop();
      }
      revalidate();
      repaint();
    }
  });
  animator.start();
}
@Override public void mouseExited(MouseEvent e) {
  if(animator!=null && animator.isRunning() ||
     contains(e.getPoint()) && yy==textArea.getPreferredSize().height) return;
  final double h = (double)textArea.getPreferredSize().height;
  animator = new javax.swing.Timer(delay, new ActionListener() {
    @Override public void actionPerformed(ActionEvent e) {
      double a = easeInOut(--count/h);
      yy = (int)(.5d+a*h);
      textArea.setBackground(new Color(0f,0f,0f,(float)(0.6*a)));
      if(yy<=0) {
        yy = 0;
        animator.stop();
      }
      revalidate();
      repaint();
    }
  });
  animator.start();
}
//http://www.gehacktes.net/2009/03/math-easein-easeout-and-easeinout/
//coders≫ Blog Archive ≫ Math: EaseIn EaseOut, EaseInOut and Bezier Curves
public double easeInOut(double t) {
  //range: 0.0<=t<=1.0
  if(t<0.5d) {
    return 0.5d*Math.pow(t*2d, 3d);
  }else{
    return 0.5d*(Math.pow(t*2d-2d, 3d) + 2d);
  }
}
}}

**解説 [#b1064c6f]
上記のサンプルでは、JLabelに画像を表示し、これにマウスカーソルが入った場合、JTextAreaがキャプションとしてease-in,ease-outでスライドインするようになっています。
- OverlayLayout#layoutContainer内で、JTextAreaのy座標を変更してアニメーション
- EaseInOutの計算は、[http://www.gehacktes.net/2009/03/math-easein-easeout-and-easeinout/ coders≫ Blog Archive ≫ Math: EaseIn EaseOut, EaseInOut and Bezier Curves]を参考
//- マウスカーソルがJLabel(画像)内にあっても、そこにJTextAreaがスライドインした場合、mouseExitedが発生するので、注意
//-- JTextArea内の文字列を選択できるように、JTextArea#contains(int x, int y) が常にfalseを返すようにはしない

**参考リンク [#wdb4f6db]
- [http://www.gehacktes.net/2009/03/math-easein-easeout-and-easeinout/ coders≫ Blog Archive ≫ Math: EaseIn EaseOut, EaseInOut and Bezier Curves]
- [http://css-tricks.com/slide-in-image-captions/ Slide In Image Captions | CSS-Tricks]

**コメント [#c7b3d96a]
#comment