Question

我是fx动画的新手，我试图在另一个动画完成后立即播放一个动画。但是，相反，这两个动画都是在舞台的另一侧同时播放的。另外，是否有一种方法可以更改通过JavaFX显示的图像的大小而不更改图像的像素大小？

我尝试将动画的布局x和y设置为相同，以便可以相互播放。

package application;

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.stage.Stage;
import javafx.util.Duration;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;

public class Main extends Application {

    // LOAD IMAGES======================================================================

    // load in sun images
    final static javafx.scene.image.Image sun1 = new javafx.scene.image.Image(
            Main.class.getResource("/Sun/Sun1.png").toString());
    final static javafx.scene.image.Image sun2 = new javafx.scene.image.Image(

    // load in rain images
    final static javafx.scene.image.Image rain1 = new javafx.scene.image.Image(
            Main.class.getResource("/Rain/Rain1.png").toString());
    final static javafx.scene.image.Image rain2 = new javafx.scene.image.Image(
            Main.class.getResource("/Rain/Rain2.png").toString());

    // create a group node
    private Group sunGrp;
    private Group rainGrp;

    @Override
    public void start(Stage primaryStage) {

        // CREATE IMAGE VIEWS ==================================================================================

        // sun ImageView
        final ImageView sun1IV = new ImageView(sun1);
        final ImageView sun2IV = new ImageView(sun2);

        // rain ImageView
        final ImageView rain1IV = new ImageView(rain1);
        final ImageView rain2IV = new ImageView(rain2);

        // PUT IMAGEVIEW INTO GROUP
        rainGrp = new Group(rain1IV);
        rainGrp.setLayoutX(100);
        rainGrp.setLayoutY(120);

        sunGrp = new Group(sun1IV);
        sunGrp.setLayoutX(100);
        sunGrp.setLayoutY(120);
        //sunGrp.setTranslateX(100);
        //sunGrp.setTranslateY(120);


        // ANIMATE IMAGES INTO A LOOP ===========================================================

        // sun animation
        Timeline sunT = new Timeline();
        sunT.setCycleCount(2);

        // add images into the time line
        sunT.getKeyFrames().add(new KeyFrame(Duration.millis(100), (ActionEvent event) -> {
            sunGrp.getChildren().setAll(sun1IV);
        }));
        sunT.getKeyFrames().add(new KeyFrame(Duration.millis(200), (ActionEvent event) -> {
            sunGrp.getChildren().setAll(sun2IV);
        }));

        Timeline rainT = new Timeline();
        rainT.setCycleCount(2);

        rainT.getKeyFrames().add(new KeyFrame(Duration.millis(100), (ActionEvent event) -> {
            rainGrp.getChildren().setAll(rain1IV);
        }));
        rainT.getKeyFrames().add(new KeyFrame(Duration.millis(200), (ActionEvent event) -> {
            rainGrp.getChildren().setAll(rain2IV);
        }));


        sunT.play();
        rainT.play();

        HBox hi = new HBox();
        hi.getChildren().addAll(sunGrp,rainGrp);

        primaryStage.setScene(new Scene(hi, 800, 800));

        primaryStage.setTitle("Cloud");
        primaryStage.show();

    }// end start

    public static void main(String[] args) {
        launch(args);
    }
}

预期：一个动画播放，完成，以及下一个动画播放。

当前错误：两个动画在舞台的另一侧同时播放。

更新：将HBox更改为StackPane，它似乎仅播放一个动画。有没有一种方法可以“删除”动画，以便下一个播放？还是应该在顶部发挥作用？

更新2：我知道了，我的实际程序每个动画有10张图像。我猜他们两个都同时玩，所以一次不能玩。 rainT.play（）;

        sunT.play();
        rainT.play();

替换为

        rainT.setOnFinished(event -> {
            rainGrp.setVisible(false);
            sunT.play();
        });

如何使动画彼此重叠而不是并排播放？

0 个答案: