尝试在 javafx 中使用 imageViews 创建滚动背景效果

Question

我正在尝试使用两个 imageView 创建滚动背景效果，其中一张图片在另一张图片之上并且在 window 之外；然后我尝试向下滚动 window 以通过更改它们的 y 坐标来创建滚动效果。我做了一个循环来这样做并放了一个 thread.sleep 所以它不会做得太快。然后我重置 picutres 位置并再次循环。但是，当我尝试运行程序时，window 永远不会打开。取出循环显然正确显示 window 与 picutre.

public class TestBackground extends Application{

@Override
public void start(Stage stage) throws Exception {
    
    stage.setTitle("DRIFT STAGE");
    
    Pane game = new Pane();
    Scene gameScene = new Scene(game, 956, 740);
    ImageView background = new ImageView(getClass().getResource("bg.png").toExternalForm());
    game.getChildren().add(background);
    
    ImageView background2 = new ImageView(getClass().getResource("bg.png").toExternalForm());
    game.getChildren().add(background2);        
    background2.setY(-740);
    
    //loop to scroll background vertically
    for (int j = 0; j < 20; j++) {
        for (double i = 1.0; i < 741.0; i++) {
            background.setY(background.getY() + i);
            background2.setY(background2.getY() + i);
            
            try {
                Thread.sleep(250);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }

        background.setY(0.0);
        background2.setY(-740.0);
    }
    
    stage.setScene(gameScene);
    stage.show();
    
    }
    public static void main(String[] args) { launch(args); }
}

Answer 1

你的循环不是正确的做法。使用 Transition Animation on each ImageView. You want a TranslateTransition.

像这样：

    // Animation to scroll background vertically
    TranslateTransition trans1 = new TranslateTransition(Duration.minutes(1), background);
    trans1.setFromY(0);
    trans1.setToY(740);
    trans1.setCycleCount(20);
    TranslateTransition trans2 = new TranslateTransition(Duration.minutes(1), background2);
    trans2.setFromY(-740);
    trans2.setToY(0);
    trans2.setCycleCount(20);
    ParallelTransition parTrans = new ParallelTransition(trans1, trans2);
    parTrans.play();

如果您打算将这些图像作为“永远”滚动的视差背景，请将过渡设置为无限循环

    trans1.setCycleCount(Animation.INDEFINITE);

并为每个使用略有不同的持续时间。

如果您使用的是同一张图片，请不要加载它两次：

    Image bgImg = new Image(getClass().getResource("bg.png").toExternalForm());
    ImageView background = new ImageView(bgImg);
    game.getChildren().add(background);

    ImageView background2 = new ImageView(bgImg);
    game.getChildren().add(background2);

这是添加了速度滑块的整个启动方法，仅供娱乐：

@Override
public void start(Stage stage) {

    stage.setTitle("DRIFT STAGE");

    Pane game = new Pane();
    Scene gameScene = new Scene(game, 956, 740);
    Image bgImg = new Image(getClass().getResource("bg.png").toExternalForm());
    ImageView background = new ImageView(bgImg);
    ImageView background2 = new ImageView(bgImg);
    Slider speedSlider = new Slider(0, 5, 1);
    game.getChildren().addAll(background, background2, speedSlider);

    // Animation to scroll background vertically
    TranslateTransition trans1 = new TranslateTransition(Duration.seconds(10), background);
    trans1.setFromY(0);
    trans1.setToY(740);
    trans1.setInterpolator(Interpolator.LINEAR);
    trans1.setCycleCount(Animation.INDEFINITE);
    TranslateTransition trans2 = new TranslateTransition(Duration.seconds(10), background2);
    trans2.setFromY(-740);
    trans2.setToY(0);
    trans2.setCycleCount(Animation.INDEFINITE);
    trans2.setInterpolator(Interpolator.LINEAR);
    ParallelTransition parTrans = new ParallelTransition(trans1, trans2);
    parTrans.rateProperty().bind(speedSlider.valueProperty());
    parTrans.play();

    stage.setScene(gameScene);
    stage.show();
}

尝试在 javafx 中使用 imageViews 创建滚动背景效果

Trying to create a scrolling background effect with imageViews in javafx

java

javafx