java - 如何在桌面应用程序中使用 CSS 样式使 Javafx 中的文本或图像闪烁？

Question

我正在尝试在 JavaFX 中闪烁标签和图像。

如何在 JavaFX 中实现？

我是这个平台的新手，给我一些指导。

Answer 1

我引用了以上我开发的简单示例。 下面是我的 Fxml 文件:

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>

下面是我的 Controller 类:

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

    }

}

下面是我的主类:

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

}

CSS 文件是:

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

这个工作正常，但是如果我想多次应用相同的东西，我如何在不创建多个 Timeline 的情况下做到这一点我如何同时对多个标签使用相同的时间轴独立的时间。

当我们点击按钮时，背景颜色会闪烁红色，如果我们点击同一个按钮，它就会停止闪烁。

像上面一样，如果我们有多个按钮和多个标签，它们需要像上面的按钮点击一样独立工作。具有共同的时间表。我们该怎么做？