JavaFX中如何实现矩形闪烁显示与隐藏效果？

嘿，这个闪烁效果用来高亮单词搜索游戏里的选中位置肯定很赞！在JavaFX里实现Canvas上矩形的显示/隐藏闪烁，用Timeline动画组件是最简洁高效的方式，下面给你具体的实现方案，结合你现有的代码来调整：

步骤1：添加状态变量 #

首先在你的Canvas所在的类（比如Controller或者自定义Canvas类）里，添加几个变量来跟踪矩形的状态和位置：

private boolean isRectVisible = true; // 控制矩形是否可见
private int targetCol; // 你要绘制的矩形对应的列（替换成你实际的列变量）
private int targetRow; // 你要绘制的矩形对应的行（替换成你实际的行变量）
private Timeline blinkTimeline; // 保存动画实例，方便后续停止

步骤2：封装绘制逻辑 #

把你原来的画布绘制逻辑封装成一个独立方法，这样动画触发重绘时更方便：

private void drawGameBoard() {
    GraphicsContext gc = canvas.getGraphicsContext2D();
    // 先清空整个画布，避免旧的矩形残留
    gc.clearRect(0, 0, 600, 600);
    
    // 绘制你的单词搜索二维数组（和你原来的代码一致）
    for (int i = 0; i < gameBoard.length; i++) {
        for (int j = 0; j < gameBoard[0].length; j++) {
            gc.fillText(String.valueOf(gameBoard[i][j]), (25 + (20 * j)), (25 + (20 * i)));
        }
    }
    
    // 根据可见性状态决定是否绘制矩形
    if (isRectVisible) {
        gc.setFill(Color.BLACK);
        // 这里用你原来的矩形坐标计算逻辑，保持位置和字符对应
        gc.fillRect(24 + (20 * targetCol), 24 + (20 * targetRow), 20, 20);
    }
}

步骤3：创建闪烁动画 #

编写一个方法来初始化并启动闪烁动画，通过Timeline每隔一段时间切换矩形的可见状态并重绘：

public void startBlinking() {
    // 定义每一次闪烁的动作：切换可见状态 + 重绘画布
    KeyFrame blinkFrame = new KeyFrame(Duration.millis(500), event -> {
        isRectVisible = !isRectVisible;
        drawGameBoard();
    });
    
    blinkTimeline = new Timeline(blinkFrame);
    blinkTimeline.setCycleCount(Timeline.INDEFINITE); // 设置无限循环
    blinkTimeline.play(); // 启动动画
}

// 可选：添加停止闪烁的方法
public void stopBlinking() {
    if (blinkTimeline != null) {
        blinkTimeline.stop();
        // 停止后可以让矩形保持可见或隐藏，这里设置为可见
        isRectVisible = true;
        drawGameBoard();
    }
}

步骤4：启动动画 #

在你的游戏初始化或者需要触发闪烁的地方（比如用户选中了某个单词时），调用startBlinking()即可：

// 比如在初始化方法里
@Override
public void initialize() {
    // 初始化你的gameBoard、targetCol、targetRow等变量...
    startBlinking();
}

小提示 #

• 调整Duration.millis(500)的数值可以改变闪烁速度：数值越小，闪烁越快；数值越大，闪烁越慢。
• 如果你需要在某个事件后停止闪烁（比如用户找到单词），直接调用stopBlinking()即可。
• 一定要调用gc.clearRect()清空画布，否则之前绘制的矩形会留在画布上，导致闪烁效果混乱。

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