Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

FadeTransition: don't fade child nodes, only fade background

Tags:

java

javafx

I have this simple class:

Test.java:

import javafx.animation.FadeTransition;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Test extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        Pane pane = new Pane();
        
        Button testButton = new Button("Test");
        testButton.setStyle("-fx-background-color: green;");

        pane.getChildren().add(testButton);
        pane.setStyle("-fx-background-color: red;");

        FadeTransition transition = new FadeTransition(Duration.millis(5000), pane);
        transition.setFromValue(1.0);
        transition.setToValue(0.0);
        transition.setCycleCount(Timeline.INDEFINITE);
        transition.setAutoReverse(true);
        transition.play();

        Scene scene = new Scene(pane, 500, 500);

        stage.setMinWidth(500);
        stage.setMinHeight(500);

        stage.setTitle("Test");
        stage.setResizable(false);

        stage.setScene(scene);
        stage.show();
    }
}

It looks like this:

enter image description here

when it fades however it becomes this:

enter image description here

How do I make it so that the fade transition only affects the red background and doesn't affect the green button?

So that it looks like this:

enter image description here

like image 657
parsecer Avatar asked Nov 03 '25 03:11

parsecer


1 Answers

using stackpane

stack

You can use StackPane as root and both : Pane and Button children of stackpane . Button is not affected by transition since is no longer child of pane .

if you need different aligments for different nodes you can use static method setAligment from StackPane class , wich requires a child node and position as arguments

public class  App extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        
        Pane pane = new Pane();
        
        Button testButton = new Button("Test");
        testButton.setStyle("-fx-background-color: green;");

        StackPane stackPane = new StackPane(pane,testButton);
        stackPane.setAlignment(Pos.TOP_LEFT);
        
        pane.setStyle("-fx-background-color: red;");

        FadeTransition transition = new FadeTransition(Duration.millis(5000), pane);
        transition.setFromValue(1.0);
        transition.setToValue(0.0);
        transition.setCycleCount(Timeline.INDEFINITE);
        transition.setAutoReverse(true);
        transition.play();

        Scene scene = new Scene(stackPane, 500, 500);

        stage.setMinWidth(500);
        stage.setMinHeight(500);

        stage.setTitle("Test");
        stage.setResizable(false);

        stage.setScene(scene);
        stage.show();
    }
}
like image 107
Giovanni Contreras Avatar answered Nov 04 '25 19:11

Giovanni Contreras



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!