JavaFX为HBox子元素执行翻转动画时更新UI触发IllegalStateException如何解决

问题判断与根源 #

你的判断完全正确，异常就是Timer的使用导致的。JavaFX有强制约束：所有场景图节点的修改、UI属性更新操作，必须在JavaFX Application Thread上执行。而java.util.Timer启动的是独立后台工作线程，直接在TimerTask中修改HBox的子节点、更新ImageView内容，就会触发跨线程修改UI的异常。

修复方案 #

方案1：最小改动适配现有逻辑 #

仅需把TimerTask中所有UI相关的操作，包装到Platform.runLater()中，即可把任务提交到JavaFX应用线程执行。
修改后的spin方法示例：

public void spin(ActionEvent actionEvent){
    int bet = Integer.parseInt(betField.getText());
    slotMachine.play(bet);
    
    for (HBox box : hboxesList){
        rotateCard(box);
    }

    Timer timer = new Timer();
    TimerTask timerTask = new TimerTask() {
        @Override
        public void run() {
            // 把UI操作提交到FX应用线程
            Platform.runLater(() -> displayBackOfCard());
        }
    };

    TimerTask timerTask2 = new TimerTask() {
        @Override
        public void run() {
            Platform.runLater(() -> {
                updateCardsDisplay();
                updateStats();
                updateUserState();
            });
        }
    };

    timer.schedule(timerTask, 1000);
    timer.schedule(timerTask2, 3000);
}

注意需要提前导入javafx.application.Platform类。

方案2：更符合JavaFX设计的实现（推荐） #

不要使用通用的Timer，直接利用JavaFX动画的事件回调实现内容和动画的同步，避免手动计算时间差导致的动画和内容更新不同步问题：

1. 把原来单次360度的翻转动画拆分为两段180度的翻转
2. 第一段180度翻转结束时触发卡片背面显示
3. 第二段180度翻转结束时触发新卡片内容显示
   示例代码：

private void rotateCardWithContentUpdate(HBox box, int symbolIndex) {
    // 第一段翻转：0到180度
    RotateTransition firstRotate = new RotateTransition(Duration.millis(1500), box);
    firstRotate.setAxis(new Point3D(0,5,0));
    firstRotate.setFromAngle(0);
    firstRotate.setToAngle(180);
    firstRotate.setInterpolator(Interpolator.LINEAR);
    // 第一段翻转结束，显示卡片背面
    firstRotate.setOnFinished(e -> {
        box.getChildren().set(0, createImageView("backOfCard"));
    });

    // 第二段翻转：180到360度
    RotateTransition secondRotate = new RotateTransition(Duration.millis(1500), box);
    secondRotate.setAxis(new Point3D(0,5,0));
    secondRotate.setFromAngle(180);
    secondRotate.setToAngle(360);
    secondRotate.setInterpolator(Interpolator.LINEAR);
    // 第二段翻转结束，显示新卡片
    secondRotate.setOnFinished(e -> {
        box.getChildren().set(0, createImageView(slotMachine.getSymbols().get(symbolIndex)));
    });

    // 顺序执行两段动画
    new SequentialTransition(firstRotate, secondRotate).play();
}

修改后spin方法可以直接删除原来的Timer逻辑，仅遍历调用上述方法即可，逻辑更简洁，同步更准确。

额外优化建议 #

不需要每次更新卡片都新建ImageView替换原有节点，直接修改已有ImageView的image属性即可，性能更好且不会触发场景图结构变更：

// 提前给每个HBox设置固定的ImageView，保存引用
private List<ImageView> slotImageViews = new ArrayList<>();

// 初始化时执行一次即可
private void initImageViews() {
    for (HBox box : hboxesList) {
        ImageView iv = new ImageView();
        iv.setFitWidth(148);
        iv.setFitHeight(210);
        box.getChildren().set(0, iv);
        slotImageViews.add(iv);
    }
}

// 更新内容时仅修改image属性
public void updateCardsDisplay(){
    for (int i=0; i<slotImageViews.size(); i++) {
        slotImageViews.get(i).setImage(new Image(SlotsDisplay.class.getResourceAsStream("/images/cards/" + slotMachine.getSymbols().get(i) + ".jpg")));
    }
}

内容的提问来源于stack exchange，提问作者Sebastian Sole