Java swingで理想通りのアニメーションが実装できない

実現したいこと

Java swingでクリックすると円を揺らすアニメーションを実装したいのですが（トグルクラスのように）再度クリックするとアニメーションは止まる）理想の動きになりません。どなたか助けてください。

理想の動きをするコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <style>
8     
9.container {
10    display: flex;
11    align-items:center;
12    justify-content: center;
13    height: 200px;
14}
15
16
17.fluid {
18    margin: auto;
19    position: relative;
20    width: 150px; /* ボタンの幅を設定 */
21    height: 150px; /* ボタンの高さを設定 */
22    border-radius: 50%; /* 円形のボタン */
23    background-color: rgba(204,204,204,0.9);
24    border: none;
25    cursor: pointer;
26    /* overflow: hidden; */
27    animation: none;
28}
29
30.fluid::after {
31    display: block;
32    width: 20px;
33    height: 35px;
34    border-radius: 50%;
35    background: rgba(255, 255, 255, 0.95);
36    box-shadow: 0 0 20px 10px white;
37    content: "";
38    position: absolute;
39    top: 20%;
40    left: 20%;
41    transform: rotate(30deg);
42}
43
44.fluid.active {
45    background-color: #bce2e8;
46    animation: fluid-animation 0.2s ease 0s infinite;
47}
48
49/*
50.fluid-shape.paused {
51    animation-play-state: paused;
52}
53*/
54
55@keyframes fluid-animation {
56    0%, 50%, 100% {
57        border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
58    }
59    25% {
60        border-radius: 40% 60% 40% 60% / 40% 60% 40% 60%;
61    }
62    75%{
63        border-radius: 60% 40% 60% 40% / 60% 40% 60% 40%;
64    }
65}
66    </style>
67</head>
68<body>
69    <div class="container">
70        <div class="fluid" id="fluid"></div>
71      </div>
72      <script>
73        console.clear();
74
75
76const fluid = document.querySelector(".fluid");
77
78
79// ボタンクリックでアニメーション再生・停止の切り替え
80fluid.addEventListener(
81  "click",
82  () => {
83 
84
85      if (fluid.classList.contains("active")) {
86          // 再生中の場合
87     
88          fluid.classList.remove("active");
89      } else {
90         
91          fluid.classList.add("active");
92      
93      }
94  },
95  false
96);
97
98
99      </script>
100</body>
101</html>

該当のソースコード

java
1package music2;
2
3import java.awt.Color;
4import java.awt.Graphics;
5import java.awt.Graphics2D;
6import java.awt.event.ActionEvent;
7import java.awt.event.ActionListener;
8import java.awt.event.MouseAdapter;
9import java.awt.event.MouseEvent;
10import java.awt.geom.Ellipse2D;
11import java.io.IOException;
12import java.net.URL;
13
14import javax.sound.sampled.AudioInputStream;
15import javax.sound.sampled.AudioSystem;
16import javax.sound.sampled.Clip;
17import javax.sound.sampled.FloatControl;
18import javax.sound.sampled.LineEvent;
19import javax.sound.sampled.LineListener;
20import javax.sound.sampled.LineUnavailableException;
21import javax.sound.sampled.UnsupportedAudioFileException;
22import javax.swing.JFrame;
23import javax.swing.JLabel;
24import javax.swing.JPanel;
25import javax.swing.JSlider;
26import javax.swing.Timer;
27import javax.swing.event.ChangeEvent;
28import javax.swing.event.ChangeListener;
29
30public class TestFrame extends JFrame implements ChangeListener, LineListener {
31    public static void main(String[] args) {
32        new TestFrame().setVisible(true);
33    }
34
35    private JSlider slider;
36    private JLabel label;
37    private CirclePanel circlePanel;
38    private Clip clip;
39    private FloatControl gainControl;
40
41    TestFrame() {
42        super("アプリ");
43        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
44        setSize(800, 800);
45
46        circlePanel = new CirclePanel();
47        setContentPane(circlePanel);
48
49        label = new JLabel("test");
50        label.setBounds(300, 10, 100, 100);
51        add(label);
52
53        JLabel label2 = new JLabel("テスト");
54        label2.setBounds(300, 500, 100, 100);
55        add(label2);
56
57        slider = new JSlider(50, 150, 100);
58        slider.addChangeListener(this);
59        JPanel p = new JPanel();
60        p.add(slider);
61        p.setBounds(300, 300, 200, 50);
62        add(p);
63
64        try {
65            loadAudioFile("ogawa.wav");
66        } catch (UnsupportedAudioFileException | IOException | LineUnavailableException e) {
67            e.printStackTrace();
68        }
69    }
70
71    private void loadAudioFile(String filePath) throws UnsupportedAudioFileException, IOException, LineUnavailableException {
72        URL url = getClass().getResource(filePath);
73        if (url != null) {
74            AudioInputStream audioInputStream = AudioSystem.getAudioInputStream(url);
75            clip = AudioSystem.getClip();
76            clip.open(audioInputStream);
77            gainControl = (FloatControl) clip.getControl(FloatControl.Type.MASTER_GAIN);
78            clip.addLineListener(this);
79            System.err.println("音声ファイルが見つかった: " + filePath);
80        } else {
81            System.err.println("音声ファイルが見つかりません: " + filePath);
82        }
83    }
84
85    public void stateChanged(ChangeEvent e) {
86        label.setText("値：" + slider.getValue());
87        circlePanel.setDiameter(slider.getValue());
88        float value = (float) slider.getValue() / 100f; // 0.5 ~ 1.5の範囲に正規化
89        gainControl.setValue(20f * (float) Math.log10(value)); // 音量の調整
90    }
91
92    @Override
93    public void update(LineEvent event) {
94        LineEvent.Type type = event.getType();
95        if (type == LineEvent.Type.STOP) {
96            circlePanel.setStart(false);
97        }
98    }
99
100    private class CirclePanel extends JPanel {
101        private final int X = 350, Y = 250;
102        private int diameterOfCircle = 100;
103        private Ellipse2D ellipse;
104        private boolean start = false;
105        private Color ellipseColor = Color.GRAY; // 円の色を保持する変数
106        private Timer shakeTimer;
107        private int shakeOffset = 0;
108
109        private class EllipseClickListener extends MouseAdapter {
110            @Override
111            public void mouseClicked(MouseEvent e) {
112                if (ellipse.contains(e.getPoint())) {
113                    System.out.println(e.getPoint() + "=図形内");
114                    if (!start) {
115                        start = true;
116                        clip.start();
117                        setEllipseColor(Color.CYAN); // 円の色を水色に変更
118                        startShaking();
119                        System.out.println(start);
120                    } else {
121                        start = false;
122                        clip.stop();
123                        setEllipseColor(Color.LIGHT_GRAY);
124                        stopShaking();
125                        System.out.println(start);
126                    }
127                } else {
128                    System.out.println(e.getPoint() + "=図形外");
129                }
130            }
131        }
132
133        void setEllipseColor(Color color) {
134            this.ellipseColor = color;
135            repaint();
136        }
137
138        CirclePanel() {
139            super(null);
140            setBackground(Color.WHITE);
141            addMouseListener(new EllipseClickListener());
142            initShakeTimer();
143            setEllipseColor(Color.LIGHT_GRAY);
144        }
145
146        void setDiameter(int diameter) {
147            this.diameterOfCircle = diameter;
148            repaint();
149        }
150
151        void setStart(boolean start) {
152            this.start = start;
153        }
154
155        private void initShakeTimer() {
156            shakeTimer = new Timer(50, new ActionListener() {
157                @Override
158                public void actionPerformed(ActionEvent e) {
159                    shakeOffset = (shakeOffset == 0) ? 5 : 0;
160                    repaint();
161                }
162            });
163        }
164
165        private void startShaking() {
166            shakeTimer.start();
167        }
168
169        private void stopShaking() {
170            shakeTimer.stop();
171            shakeOffset = 0;
172            repaint();
173        }
174
175        @Override
176        protected void paintComponent(Graphics g) {
177            super.paintComponent(g);
178            Graphics2D g2 = (Graphics2D) g;
179            g2.setColor(ellipseColor); // 円の色を設定
180            ellipse = new Ellipse2D.Double(X - diameterOfCircle / 2 + shakeOffset, Y - diameterOfCircle / 2, diameterOfCircle, diameterOfCircle);
181            g2.fill(ellipse);
182
183            // ぼうっと光った楕円形の水玉模様を描画
184            int spotWidth = diameterOfCircle / 3; // 横幅は外側の円の1/3
185            int spotHeight = spotWidth / 2; // 縦幅は横幅の半分
186            int spotX = X - diameterOfCircle / 4 + shakeOffset; // 円の中心から1/4の距離に配置
187            int spotY = Y - diameterOfCircle / 4;
188            Ellipse2D spot = new Ellipse2D.Double(spotX, spotY, spotWidth, spotHeight);
189
190            // 水玉模様にぼけ効果を追加
191            g2.setColor(new Color(255, 255, 255, 128)); // 半透明の白色
192            g2.fill(spot);
193            g2.setColor(new Color(255, 255, 255, 255)); // 完全な白色
194            g2.fillOval(spotX + spotWidth / 4, spotY, spotWidth / 2, spotHeight);
195        }
196    }
197}

試したこと

試行錯誤しましたが、できません。java swing 水玉　アニメーションなどでGoogle検索しても出てきません。

開発環境

Eclipse使用しています。

jimbe

2024/05/20 09:39 編集

paintComponent メソッドだけ出されてもどう表示しているのか分からないのですが…。 X, Y, や diameterOfCircle はどのようなタイミングでどのような値を設定・変化しているのでしょうか。どの辺がアニメーションとして変化する部分なのか…。

ikigamikita

2024/05/20 09:51

申し訳ございません。一部のコードしか貼れておりませんでした。修正いたします。

行動規範の内容に同意します

回答2件

CirclePanel 部分だけで動かしてみました。
で、コード通りならこうなるワケですけども、HTML は角丸を変えることでうねうねしていますがそれが全くコードに無いですね。
理想通りにならないというのは、角丸を色々変える方法を知りたいということになるのでしょうか。

java
1import java.awt.*;
2import java.awt.event.MouseAdapter;
3import java.awt.event.MouseEvent;
4import java.awt.geom.Ellipse2D;
5
6import javax.swing.*;
7
8public class CircleFrame extends JFrame {
9  public static void main(String[] args) {
10    SwingUtilities.invokeLater(() -> new CircleFrame().setVisible(true));
11  }
12
13  CircleFrame() {
14    super("水玉?");
15    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
16    add(new CirclePanel());
17    pack();
18  }
19
20  private class CirclePanel extends JPanel {
21    private static final int X = 150, Y = 150;
22    private static final int diameterOfCircle = 100;
23
24    private Ellipse2D ellipse;
25
26    private class Shaker {
27      boolean active = false;
28      int offset = 0;
29
30      private Timer timer = new Timer(50, e -> {
31        offset = 5 - offset;
32        repaint();
33      });
34
35      void toggleState() {
36        if((this.active = !active)) {
37          timer.start();
38        } else {
39          timer.stop();
40          offset = 0;
41          repaint();
42        }
43      }
44    }
45    private Shaker shaker = new Shaker();
46
47    CirclePanel() {
48      super(null);
49      setSize(300, 300);
50      setPreferredSize(getSize());
51      setBackground(Color.WHITE);
52
53      addMouseListener(new MouseAdapter() {
54        @Override
55        public void mouseClicked(MouseEvent e) {
56          if (ellipse.contains(e.getPoint())) shaker.toggleState();
57        }
58      });
59    }
60
61    @Override
62    protected void paintComponent(Graphics g) {
63      super.paintComponent(g);
64      Graphics2D g2 = (Graphics2D)g;
65
66      g2.setColor(shaker.active ? Color.CYAN : Color.LIGHT_GRAY); // 円の色を設定
67      ellipse = new Ellipse2D.Double(X - diameterOfCircle / 2 + shaker.offset, Y - diameterOfCircle / 2, diameterOfCircle, diameterOfCircle);
68
69      g2.fill(ellipse);
70
71      // ぼうっと光った楕円形の水玉模様を描画
72      int spotWidth = diameterOfCircle / 3; // 横幅は外側の円の1/3
73      int spotHeight = spotWidth / 2; // 縦幅は横幅の半分
74      int spotX = X - diameterOfCircle / 4 + shaker.offset; // 円の中心から1/4の距離に配置
75      int spotY = Y - diameterOfCircle / 4;
76      Ellipse2D spot = new Ellipse2D.Double(spotX, spotY, spotWidth, spotHeight);
77
78      // 水玉模様にぼけ効果を追加
79      g2.setColor(new Color(255, 255, 255, 128)); // 半透明の白色
80      g2.fill(spot);
81      g2.setColor(new Color(255, 255, 255, 255)); // 完全な白色
82      g2.fillOval(spotX + spotWidth / 4, spotY, spotWidth / 2, spotHeight);
83    }
84  }
85}

何か弄る元になるものは無いかなと探すと

ベジェ曲線を使って円を描画する Java2D

1/4 円を GeneralPath の curveTo で書いているので、そのパラメータの点の位置をずらすような形にすればうねうねする…かもしれません。
kotlin だったので java に直しました。

java
1import java.awt.Color;
2import java.awt.Graphics2D;
3import java.awt.geom.GeneralPath;
4import java.awt.geom.Point2D;
5import java.awt.image.BufferedImage;
6import java.io.File;
7import java.io.IOException;
8import java.util.Arrays;
9import java.util.List;
10
11import javax.imageio.ImageIO;
12
13class BezierCircle {
14  private static class MatrixUtils {
15    static float[] times(float[] a, float[] b) {
16      return new float[] {
17          a[0]*b[0] + a[1]*b[3] + a[2]*b[6],
18          a[0]*b[1] + a[1]*b[4] + a[2]*b[7],
19          a[0]*b[2] + a[1]*b[5] + a[2]*b[8],
20
21          a[0+3]*b[0] + a[1+3]*b[3] + a[2+3]*b[6],
22          a[0+3]*b[1] + a[1+3]*b[4] + a[2+3]*b[7],
23          a[0+3]*b[2] + a[1+3]*b[5] + a[2+3]*b[8],
24
25          a[0+3*2]*b[0] + a[1+3*2]*b[3] + a[2+3*2]*b[6],
26          a[0+3*2]*b[1] + a[1+3*2]*b[4] + a[2+3*2]*b[7],
27          a[0+3*2]*b[2] + a[1+3*2]*b[5] + a[2+3*2]*b[8]
28      };
29    }
30
31    static float[] times(float[] a, float[] b, float[] c) { return times( a, times(b, c) ); }
32    static float[] times(float[] a, float[] b, float[] c, float[] d) { return times( a, times(b, times(c, d)) ); }
33
34    static float[] transform(float[] a, float x, float y) {
35      float[] b = new float[] { x, y, 1f };
36
37      float c00 = a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
38      float c10 = a[0 + 3] * b[0] + a[1 + 3] * b[1] + a[2 + 3] * b[2];
39      float c20 = a[0 + 6] * b[0] + a[1 + 6] * b[1] + a[2 + 6] * b[2];
40
41      return new float[] { c00, c10, c20 };
42    }
43
44    static Point2D.Float transform(float[] a, Point2D.Float pt) {
45      float[] array = transform(a, pt.x, pt.y);
46      return new Point2D.Float(array[0], array[1]);
47    }
48  }
49
50  private static double toRadian(double degree) { return degree * Math.PI/180f; }
51
52  // 原点に並行移動して、degree度分回転、元の位置へ並行移動する matrixValues を生成:
53  private static float[] toMatrixValues(double degree) {
54    double radian = toRadian(degree);
55
56    float[] matrixValues0 = new float[] {
57        1f, 0f, -50f,
58        0f, 1f, -50f,
59        0f, 0f, 1f };
60
61    float[] matrixValues1 = new float[] {
62        (float)Math.cos(radian), (float)-Math.sin(radian), 0f,
63        (float)Math.sin(radian), (float) Math.cos(radian), 0f,
64        0f, 0f, 1f };
65
66    float[] matrixValues2 = new float[] {
67        1f, 0f, 50f,
68        0f, 1f, 50f,
69        0f, 0f, 1f };
70
71    return MatrixUtils.times(matrixValues2, matrixValues1, matrixValues0);
72  };
73
74  // 回転して並行移動する matrixValues を生成:
75  static float[] toMatrixValuesWithTranslation(double degree, float dx, float dy) {
76    float[] matrixValues = new float[] {
77        1f, 0f, dx,
78        0f, 1f, dy,
79        0f, 0f, 1f };
80
81    return MatrixUtils.times( matrixValues, toMatrixValues(degree) );
82  }
83
84  public static void main(String[] args) throws IOException {
85    System.setProperty("java.awt.headless", "true");
86
87    // 200x200 のキャンバスを作成:
88    int w = 200;
89    int h = 200;
90
91    BufferedImage img = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
92
93    Graphics2D g = (Graphics2D)img.getGraphics();
94    g.setColor(Color.WHITE);
95    g.fillRect(0, 0, w, h);
96
97    // 中心が (100,100) 半径 R=100 の円弧 (左上1/4) を描画するための点の計算:
98    float M = (4f / 3f * ((float)Math.sqrt(2d)-1f)); /// 円をベジェで描くためのマジックナンバー
99    float R = 100f;
100    float RM = R*M;
101
102    Point2D.Float startPt    = new Point2D.Float(0f, R);
103    Point2D.Float controlPt1 = new Point2D.Float(0f, R-RM);
104    Point2D.Float controlPt2 = new Point2D.Float(R-RM, 0f);
105    Point2D.Float stopPt     = new Point2D.Float(R, 0f);
106
107    List<Point2D.Float> ptList = Arrays.asList(startPt, controlPt1, controlPt2, stopPt);
108
109    // 残りの 3つの円弧は、今作成した点をベースに回転と並行移動を使って作成:
110
111    float[] matrixValues1 = toMatrixValuesWithTranslation(90*1d, 100f, 0f);
112    float[] matrixValues2 = toMatrixValuesWithTranslation(90*2d, 100f, 100f);
113    float[] matrixValues3 = toMatrixValuesWithTranslation(90*3d, 0f,   100f);
114
115    List<Point2D.Float> ptList1 = ptList.stream().map(it -> MatrixUtils.transform(matrixValues1, it)).toList();
116    List<Point2D.Float> ptList2 = ptList.stream().map(it -> MatrixUtils.transform(matrixValues2, it)).toList();
117    List<Point2D.Float> ptList3 = ptList.stream().map(it -> MatrixUtils.transform(matrixValues3, it)).toList();
118
119    // パスを使って円を描画:
120    GeneralPath path = new GeneralPath();
121
122    Arrays.asList(ptList, ptList1, ptList2, ptList3).stream().forEach(it -> {
123      path.moveTo(it.get(0).x, it.get(0).y);
124      path.curveTo(
125          it.get(1).x, it.get(1).y,
126          it.get(2).x, it.get(2).y,
127          it.get(3).x, it.get(3).y);
128    });
129
130    g.setColor(Color.BLACK);
131    g.draw(path);
132
133    // PNGとしてファイルに保存:
134    File pngFile = new File("circle.png");
135    ImageIO.write(img, "PNG", pngFile);
136  }
137}

投稿2024/05/20 11:20

編集2024/05/21 12:19

jimbe

総合スコア13045

ikigamikita

2024/05/21 00:25

ありがとうございます。角丸とかは全く気が付きませんでした。ベジェ曲線を使って円を描画する Java2Dなどのリンクも貼って頂きありがとうございます。こちらも勉強いたします。

jimbe

2024/05/24 13:00

あら、削除リクエスト無くなってますか? 時々メニューが出なかったりすることはあるみたいですので、リロードとか弄ってると出たりするかもしれません。

ikigamikita

2024/05/24 13:02

すみません。私のスマホからでは削除リクエストが消えていたのですが、PCから入ると削除リクエストがありましたので、削除いたします。

jimbe

2024/05/24 13:17

まぁ大したことではありませんのでそんなに気にされなくても大丈夫ですよ^^

行動規範の内容に同意します

ベストアンサー

Java swingでクリックすると円を揺らすアニメーションを実装したいのですが（トグルクラスのように）再度クリックするとアニメーションは止まる）理想の動きになりません。

そういうのはトグルボタンです。
JToggleButton (Java Platform SE 8 )

CSSが得意でもう出来ているのであれば、アニメーションGIFで画像を設定したらどうでしょうか？

Swingでちゃんと？アニメーションしようとするとタイマーを使って...みたいにかなり面倒です。
JavaFXならアニメーションはかなり楽なんですが、情報量が少ないのがネックです^^;

java
1import javax.swing.*;
2import java.awt.FlowLayout;
3
4public class TestFrame extends JFrame {
5    public static void main(String[] args) {
6        new TestFrame().setVisible(true);
7    }
8
9    TestFrame() {
10        setDefaultCloseOperation(EXIT_ON_CLOSE);
11        setSize(400, 300);
12        setLocationRelativeTo(null);
13        setLayout(new FlowLayout());
14
15        var button = new JToggleButton(new ImageIcon("off.gif")); // 非選択時の画像
16        button.setSelectedIcon(new ImageIcon("on.gif")); // 選択時の画像
17        button.setContentAreaFilled(false); // 画像以外の余計なエリアを描画しない
18        button.setBorderPainted(false); // 枠を描画しない
19        button.setFocusPainted(false); // フォーカスを描画しない
20
21        add(button);
22    }
23}