java - 老虎机时间线动画不起作用
问题描述
我正在尝试开发老虎机卷轴应用程序。我有一个自定义卷轴窗格,可以垂直添加孩子。单击旋转按钮时,子项必须移动,当最后一个子项到达边界时,它必须将其位置移到第一个子项上方。我所做的如下所示。
public class ReelPane extends Pane {
Timeline timeline = new Timeline();
@Override
protected void layoutChildren() {
List<Node> managed = getChildren();
double y = 0;
for (Node node : managed) {
node.setLayoutX(0);
node.setLayoutY(y);
y += node.getBoundsInLocal().getHeight();
}
}
public void spin() {
List<Node> managed = getChildren();
double dy = 4;
for (Node node : managed) {
timeline.getKeyFrames().addAll(new KeyFrame(Duration.millis(2000),new KeyValue(node.layoutYProperty(),node.getLayoutY()+dy)));
if(node.getLayoutY()>=600){
node.setLayoutY(-50);
}
}
timeline.setCycleCount(Timeline.INDEFINITE);
timeline.play();
}
}
.xml 文件
<?import javafx.scene.control.Button?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.Pane?>
<?import sample.ReelPane?>
<Pane stylesheets="@css/slot.css"
xmlns:fx="http://javafx.com/fxml/1"
xmlns="http://javafx.com/javafx"
fx:controller="sample.Controller">
<ReelPane fx:id="reel" styleClass="container">
<ImageView fitHeight="100" fitWidth="100">
<Image url="/sample/resources/apple.png"/>
</ImageView>
<ImageView fitHeight="100" fitWidth="100">
<Image url="/sample/resources/diamond.png"/>
</ImageView>
<ImageView fitHeight="100" fitWidth="100">
<Image url="/sample/resources/glass.png"/>
</ImageView>
<ImageView fitHeight="100" fitWidth="100">
<Image url="/sample/resources/grape.png"/>
</ImageView>
<ImageView fitHeight="100" fitWidth="100">
<Image url="/sample/resources/star.png"/>
</ImageView>
</ReelPane>
<Button fx:id="spin" text="SPIN"/>
</Pane>
控制器
package sample;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
public class Controller {
@FXML
ReelPane reel;
@FXML
Button spin;
public void initialize() {
spin.setOnAction(event -> reel.spin());
}
}
主要的
package sample;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
Parent root =
FXMLLoader.load(getClass().getResource("resources/fxml/slot.fxml"));
primaryStage.setScene(new Scene(root, 400, 900));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
但是当按钮被点击时,孩子们并没有动。有人能告诉你出了什么问题吗?
解决方案
您的所有KeyFrame
sTimeline
都安排在同一时间。此外,该if
语句甚至在您开始动画之前执行。
恕我直言,将所有元素放在 a 中VBox
并简单地重复translateY
从等于元素高度的负值重复更改为 0 并在循环结束时将最后一个元素移到前面更容易。您可能希望将 aclip
应用于虽然的父级VBox
以隐藏超出单个元素范围的任何内容。
@Override
public void start(Stage primaryStage) throws Exception {
VBox pane = new VBox();
Pane parent = new Pane(pane);
parent.setPrefSize(50, 50);
parent.setMinSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
parent.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
Timeline timeline = new Timeline(new KeyFrame(Duration.ZERO, new KeyValue(pane.translateYProperty(), -50d)),
new KeyFrame(Duration.seconds(2), evt -> {
pane.getChildren().get(pane.getChildren().size() - 1).toBack();
}, new KeyValue(pane.translateYProperty(), 0d)));
timeline.setCycleCount(Animation.INDEFINITE);
for (int i = 0; i < 6; i++) {
Rectangle rect = new Rectangle(50, 50, Color.RED.interpolate(Color.BLACK, i / 6d));
pane.getChildren().add(rect);
}
parent.setClip(new Rectangle(50, 50));
timeline.play();
Scene scene = new Scene(new StackPane(parent), 200, 200);
primaryStage.setScene(scene);
primaryStage.show();
}
推荐阅读
- c++ - I cannot get the list to display the correct information input from the 3 argument constructor
- javascript - 即使在被删除后,Kendo 树视图也会在列表框中选择项目的副本
- excel - Excel,基于布尔值计算列表中下一个值的条件函数
- pyspark - 如何聚合 PySpark 数组中值的计数
- c - Ptrace() 获取存储在位置的数据
- azure-devops - Azure DevOps Pipeline 装饰器错误 - ${{ job.steps }} 中的每个步骤:
- c# - 从存储 URI 列出 Azure 存储中的所有 Blob?
- c# - 简单的外部应用在实体框架 6 中不起作用
- c++ - 为什么 fmt 库不是仅标头?
- apache-spark-mllib - 何时使用 StringIndexer 与 StringIndexer+OneHotEncoder?