How to blink the text or image in Javafx by using CSS style in Desktop application?

Question

I am trying to blink a label and an image in JavaFX.

How can I do it in JavaFX?

I am new to this platform, give me some guidance.

Answer 1

I taken above reference I developed simple example. Below is My Fxml file:

FxmlDocument.fxml:
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane id="AnchorPane" prefHeight="283.0" prefWidth="320" stylesheets="@application.css" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="blinkimagecolor.FXMLDocumentController">
   <children>
      <Label fx:id="label" alignment="CENTER" layoutX="40.0" layoutY="36.0" prefHeight="131.0" prefWidth="232.0" style="-fx-background-image: url('/images/Printer_T.png'); -fx-background-position: center; -fx-background-repeat: no-repeat;" stylesheets="@application.css" />
      <Button fx:id="button" layoutX="134.0" layoutY="209.0" mnemonicParsing="false" onAction="#buttonpressAction" text="Button" />
   </children>
</AnchorPane>

Below is My controller class:

FXMLDocumentController.java:-
import java.net.URL;
import java.time.Duration;
import java.util.ResourceBundle;
import javafx.animation.Animation;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.css.PseudoClass;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.Label;


public class FXMLDocumentController implements Initializable {

    @FXML
    private Label label;
    @FXML
    private Button button;

    Timeline flasher ;
    PseudoClass flashHighlight;
    int i = 0;
    @Override


    public void initialize(URL url, ResourceBundle rb) {
        // TODO
        flashHighlight = PseudoClass.getPseudoClass("flash-highlight");
        flasher = new Timeline(new KeyFrame(javafx.util.Duration.seconds(0.5), e -> {
            label.pseudoClassStateChanged(flashHighlight, true);
        }),
                new KeyFrame(javafx.util.Duration.seconds(1.0), e -> {
            label.pseudoClassStateChanged(flashHighlight, false);
        })
    );
    flasher.setCycleCount(Animation.INDEFINITE);

    }    

    @FXML
    private void buttonpressAction(ActionEvent event) {

        if(i == 0){
            flasher.play();
            i = 1;
            System.out.println("start method");
        }else{
            flasher.stop();
            i = 0;
            System.out.println("stop method");
            label.pseudoClassStateChanged(flashHighlight, false);
        }
        System.out.println("Out of button function");

    }

}

And Below one is My Main class:

public class BlinkImageColor extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));

        Scene scene = new Scene(root);

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

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

And CSS file is:

application.css:-
:flash-highlight{
    -fx-background-color:red;
}

This one is working fine, But if I want to apply same thing for multiple times, How can I do it without crating multiple Timeline menas how can I use same Timeline for multiple labels at a same time with independently.

This one is going to work when we click on button the background color is going to blink with red color, and if we click on the same button it's going to be stop the blinking color.

Like above if we have multiple buttons and multiple labels, those need to work independently like as above button click. with common Timeline. How can we do it?

Answer 2

You might want to refer to this similar thread, it contains a detailed answer to your question.