JavaFX动画问题：图片重复出现在同一初始位置

核心问题分析 #

1. 你设置了timeline.setCycleCount(Timeline.INDEFINITE)，这会让动画无限循环，setOnFinished回调永远不会触发——你写的随机位置代码根本没执行，所以每次都是初始的那个Y位置。
2. 代码混合使用layoutX和translateX，导致位置计算混乱，容易出现预期外的偏移。

修正后的代码 #

import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.scene.image.ImageView;
import javafx.util.Duration;
import java.util.Random;

public class Comet {
    private static final int paneWidth = 1100;
    private static final int paneHeight = 780;
    private static final int cometWidth = 100;
    private static final int cometHeight = 100;
    private static final int duration = 3000;
    private static final int delay = 1000;
    private static final Random random = new Random();

    public static void animateComet(ImageView imageView) {
        imageView.setFitWidth(cometWidth);
        imageView.setFitHeight(cometHeight);

        // 封装动画启动逻辑，方便重复调用
        Runnable startAnimation = () -> {
            // 每次动画开始前生成随机Y轴位置（确保图片不会超出面板上下边界）
            double randomY = random.nextDouble() * (paneHeight - cometHeight);
            imageView.setLayoutY(randomY);
            // 初始位置：面板最右侧（图片完全显示）
            imageView.setLayoutX(paneWidth - cometWidth);

            // 创建单次循环的时间线
            Timeline timeline = new Timeline();
            timeline.setCycleCount(1);

            // 定义动画：从右侧移动到左侧完全移出面板
            KeyFrame startFrame = new KeyFrame(Duration.ZERO, 
                new KeyValue(imageView.layoutXProperty(), paneWidth - cometWidth));
            KeyFrame endFrame = new KeyFrame(Duration.millis(duration), 
                new KeyValue(imageView.layoutXProperty(), -cometWidth));

            timeline.getKeyFrames().addAll(startFrame, endFrame);

            // 动画结束后，延迟指定时间再启动下一轮
            timeline.setOnFinished(event -> {
                Timeline delayTimeline = new Timeline(
                    new KeyFrame(Duration.millis(delay), e -> startAnimation.run())
                );
                delayTimeline.play();
            });

            timeline.play();
        };

        // 启动第一次动画
        startAnimation.run();
    }
}

关键修改说明 #

• 把时间线循环次数改为1，确保setOnFinished每次动画结束都能触发，从而生成新的随机Y位置。
• 统一使用layoutX控制水平位置，避免layout和translate属性冲突，位置计算更直观：
  • 初始位置paneWidth - cometWidth：让图片刚好完全显示在面板右侧
  • 结束位置-cometWidth：让图片完全移出左侧面板
• 用Runnable封装动画启动逻辑，每次结束后重新调用，实现循环生成随机位置的效果。
• 移除了不必要的Screen边界计算，直接使用你定义的面板尺寸，避免和实际面板大小冲突。

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