如何在JavaFX自定义进度条中添加发光效果

时间:2016-09-17 22:06:18

标签: java css javafx progress-bar

我在JavaFX中创建了一个自定义进度条。现在我想在progressBar中添加发光效果。

为此,我创建了一个具有高斯模糊效果的椭圆,并将椭圆的centerX添加到时间轴中,以便我可以在进度条中为发光效果设置动画。

这是创建椭圆的代码

public Ellipse glowshape;
DropShadow glowEffect;
SimpleDoubleProperty width;

//create ellipse for gloweffect
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();
}

这是动画的方法

    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);
}

虽然我使用自定义条宽度属性绑定了width属性,因此椭圆centerX不会超过进度条的当前进度而应该反转。但是当动画开始时它不会发生它只是移动一个然后卡住。我认为Keyvalue的目标值在动画方法中根本没有更新。

如果有人帮助我,那就太好了。

1 个答案:

答案 0 :(得分:0)

  

你在这里:

    //Create the ProgressBar
    ProgressBar progressBar = new ProgressBar();

    //Create a drop shadow effect
    DropShadow glowEffect= new DropShadow();
    glowEffect.setOffsetY(0f);
    glowEffect.setOffsetX(0f);
    glowEffect.setColor(Color.RED);
    glowEffect.setWidth(depth);
    glowEffect.setHeight(depth);

    progressBar.setEffect(glowEffect); //Apply the glowEffecteffect to the JavaFX ProgressBar
  

提到:

1)要更改glowEffect的宽度/高度,您可以修改setWidth(..);setHeight();。提及方法setOffSetX(0); setOffSetY(0f);用于居中glowEffect

2)costum progressBar的过程与扩展Node类的过程相同。

  

我还要添加link,以防您需要:

enter image description here

enter image description here