如何在带有动画的 JavaFX 应用程序中为字符创建老虎机？

Question

我正在制作一个 JavaFX 应用程序。我在主窗口中有一个标签。我有一个从字母表生成随机字符的方法，但我想给它添加一些动画。

我的意思是在 2 秒内在标签中旋转字符，然后出现一些随机字符。动画就像在真正的老虎机中一样。

我没有找到任何这样的图书馆

我怎样才能做到这一点？

@FXML private Label answerID;

//generate random character and apply it to the label

private void generateChar() {

Random r = new Random();

String alphabet = "ABCDEFGHIKLMNOPQRSTUXYZ";

for (int i = 0; i < 25; i++) {

  String text = "" + alphabet.charAt(r.nextInt(alphabet.length()));

  answerID.setText(text);

    }

  }

Answer 1

一个基本的设置可以包括一个Slot代表一个槽，由一个Text被扭曲的节点组成StackPane。ASlot可以对 应用动画Text并为其设置一个随机字母。ATilePane包含所有插槽，因此所有插槽都具有相同的大小：import java.util.Random;import javafx.animation.Interpolator;import javafx.animation.SequentialTransition;import javafx.animation.TranslateTransition;import javafx.application.Application;import javafx.geometry.Orientation;import javafx.scene.Node;import javafx.scene.Scene;import javafx.scene.control.Button;import javafx.scene.layout.BorderPane;import javafx.scene.layout.StackPane;import javafx.scene.layout.TilePane;import javafx.scene.text.Text;import javafx.stage.Stage;import javafx.util.Duration;public class FxTest extends Application {&nbsp; &nbsp; public&nbsp; static final String ALFA_BET = "ABCDEFGHIKLMNOPQRSTUXYZ";&nbsp; &nbsp; private final Random rnd = new Random();&nbsp; &nbsp; private TilePane main;&nbsp; &nbsp; @Override&nbsp; &nbsp; public void start(Stage primaryStage)throws Exception{&nbsp; &nbsp; &nbsp; &nbsp; main = new TilePane(); //use tile pane: all tiles have same size&nbsp; &nbsp; &nbsp; &nbsp; main.setPrefColumns(ALFA_BET.length());&nbsp; &nbsp; &nbsp; &nbsp; main.setOrientation(Orientation.HORIZONTAL);&nbsp; &nbsp; &nbsp; &nbsp; main.setHgap(1);&nbsp; main.setVgap(10); //vertical and horizontal space&nbsp; &nbsp; &nbsp; &nbsp; makeSlots();&nbsp; &nbsp; &nbsp; &nbsp; Button add = new Button("Spin");&nbsp; &nbsp; &nbsp; &nbsp; add.setOnAction(e -> spin());&nbsp; &nbsp; &nbsp; &nbsp; BorderPane root = new BorderPane(main);&nbsp; &nbsp; &nbsp; &nbsp; root.setBottom(add);&nbsp; &nbsp; &nbsp; &nbsp; Scene scene = new Scene(root);&nbsp; &nbsp; &nbsp; &nbsp; primaryStage.setScene(scene);&nbsp; &nbsp; &nbsp; &nbsp; //primaryStage.sizeToScene();&nbsp; &nbsp; &nbsp; &nbsp; primaryStage.show();&nbsp; &nbsp; }&nbsp; &nbsp; private void spin() {&nbsp; &nbsp; &nbsp; &nbsp; for(Node node : main.getChildren()){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ((Slot)node).spin();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; private void makeSlots() {&nbsp; &nbsp; &nbsp; &nbsp; for (int i=0; i< ALFA_BET.length(); i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; main.getChildren().add(new Slot());&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; public static void main(String[] args) {&nbsp; &nbsp; &nbsp; &nbsp; launch(null);&nbsp; &nbsp; }&nbsp; &nbsp; class Slot extends StackPane{&nbsp; &nbsp; &nbsp; &nbsp; private final Text text;&nbsp; &nbsp; &nbsp; &nbsp; private static final String format = "%1S";&nbsp; &nbsp; &nbsp; &nbsp; private static final double WIDTH = 30, TRANS_SIZE = 30;&nbsp; &nbsp; &nbsp; &nbsp; private SequentialTransition animation;&nbsp; &nbsp; &nbsp; &nbsp; Slot(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text = new Text();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setRandomText();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; getChildren().add(text);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setPrefWidth(WIDTH);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //better apply using css&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setStyle("-fx-padding: 5;" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "-fx-border-style: solid inside;" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "-fx-border-width: 2;" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "-fx-border-insets: 5;" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "-fx-border-radius: 5;" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "-fx-border-color: blue;"+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //all letters have the same width&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "-fx-font-family: 'monospaced';");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; initializeAnimation();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; //define animation to be applied to text&nbsp; &nbsp; &nbsp; &nbsp; private void initializeAnimation() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TranslateTransition t1 = new TranslateTransition();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t1.setDuration(Duration.millis(1));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t1.setNode(text);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t1.setFromX(0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t1.setFromY(0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t1.setToX(0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t1.setToY(TRANS_SIZE);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t1.setInterpolator(Interpolator.LINEAR);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TranslateTransition t2 = new TranslateTransition();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t2.setDuration(Duration.millis(300));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t2.setNode(text);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t2.setFromX(0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t2.setFromY(-TRANS_SIZE);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t2.setToX(0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t2.setToY(TRANS_SIZE);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t2.setInterpolator(Interpolator.LINEAR);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TranslateTransition t3 = new TranslateTransition();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t3.setDuration(Duration.millis(1));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t3.setNode(text);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t3.setFromX(0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t3.setFromY(TRANS_SIZE);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t3.setToX(0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t3.setToY(0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t3.setInterpolator(Interpolator.LINEAR);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //to play animations one by one&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; animation = new SequentialTransition(t1, t2, t3);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; void spin() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; animation.play(); //animate&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; animation.setOnFinished(e-> setRandomText()); //change letter whaen animation ends&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; void setRandomText(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; char letter =&nbsp; ALFA_BET.charAt(rnd.nextInt(ALFA_BET.length()));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setText(letter );&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; void setText(char c){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text.setText(String.format(format, c) );&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}