実現したいこと
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 false96);97 98 99 </script>100</body>101</html>
該当のソースコード
java
1@Override2 protected void paintComponent(Graphics g) {3 super.paintComponent(g);4 Graphics2D g2 = (Graphics2D) g;5 g2.setColor(new Color(200, 200, 200)); // 円の色を薄い灰色に変更6 ellipse = new Ellipse2D.Double(X - diameterOfCircle / 2, Y - diameterOfCircle / 2, diameterOfCircle, diameterOfCircle);7 g2.fill(ellipse);8 9 // ぼうっと光った楕円形の水玉模様を描画10 int spotWidth = diameterOfCircle / 3;11 int spotHeight = spotWidth * 2; // 縦幅を横幅の2倍に変更12 int spotX = X - diameterOfCircle / 4 - spotWidth / 4; // 円の中心から1/4の距離に配置、左に少しずらす13 int spotY = Y;14 Ellipse2D spot = new Ellipse2D.Double(spotX, spotY, spotWidth, spotHeight);15 16 // 水玉模様にぼけ効果を追加17 g2.setColor(new Color(255, 255, 255, 128)); // 半透明の白色18 g2.fill(spot);19 g2.setColor(new Color(255, 255, 255, 255)); // 完全な白色20 g2.fillOval(spotX + spotWidth / 4, spotY + spotHeight / 4, spotWidth / 2, spotHeight / 2);21 }
試したこと
試行錯誤しましたが、できません。java swing 水玉 アニメーションなどでGoogle検索しても出てきません。
開発環境
Eclipse使用しています。
0 コメント