After successfully creating a custom progress Bar in JavaFX, my next step is to incorporate a glow effect into the progressBar.
To achieve this, I have constructed an ellipse with a Gaussian blur effect and integrated the centerX of the ellipse into a timeline for animating the glow effect within the progress bar.
Below is the code snippet responsible for generating the ellipse element:
public Ellipse glowshape;
DropShadow glowEffect;
SimpleDoubleProperty width;
// Method to create the glowing ellipse
public void createEllipse(){
glowshape = new Ellipse(25, 20, 10, 15);
glowshape.setFill(Color.rgb(255,255,255,.7));
glowshape.setEffect(new GaussianBlur(5));
}
public void init(){
indetermination();
setStartAnimation();
createEllipse();
width = new SimpleDoubleProperty(0);
width.bind(this.widthProperty());
setGlowAnimation();
}
The following is the animation method utilized:
public void setGlowAnimation(){
KeyValue value = new KeyValue(glowshape.centerXProperty(),width.doubleValue(),Interpolator.EASE_OUT);
KeyFrame keyframe1 = new KeyFrame(Duration.millis(2000),value);
glow_timeline = new Timeline();
glow_timeline.setCycleCount(Timeline.INDEFINITE);
glow_timeline.setAutoReverse(true);
glow_timeline.getKeyFrames().add(keyframe1);
}
Despite binding the width property with the custom bar width property to ensure that the ellipse's centerX does not surpass the current progress of the progress bar and smoothly reverses back, there seems to be an issue. When the animation initiates, it only moves a certain distance before getting stuck. It appears that the target value defined in the Keyvalue is not updating as expected in the animation method.
I would greatly appreciate any assistance on resolving this matter.