JavaFX中的java Timelina动画

Question

我对JavaFX中的时间轴动画有一些问题。下面是我的代码部分：

Image img1 = new Image(getClass().getResource("images/img3.jpg").toString(), AppCommon.IMG_WIDTH, AppCommon.IMG_HEIGHT, false, false);
Image img2 = new Image(getClass().getResource("images/img2.png").toString(), AppCommon.IMG_WIDTH, AppCommon.IMG_HEIGHT, false, false);
KeyFrame keyImgLoad1 = new KeyFrame(Duration.seconds(0.1), new KeyValue(mImgLeft.imageProperty(), img1));
KeyFrame keyImgLoad2 = new KeyFrame(Duration.seconds(0.2), new KeyValue(mImgRight.imageProperty(), img1));

KeyFrame keyStartFade = new KeyFrame(Duration.seconds(6.0), new KeyValue(mImgLeft.opacityProperty(), 0.0));
KeyFrame keyendFade = new KeyFrame(Duration.seconds(8.0), new KeyValue(mImgLeft.opacityProperty(), 1.0));

KeyValue LeftX  = new KeyValue(mImgLeft.xProperty(), 0); 
KeyValue RightX  = new KeyValue(mImgRight.xProperty(), AppCommon.IMG_WIDTH);

KeyFrame keyMoving = new KeyFrame(Duration.seconds(10), LeftX, RightX);

timelineOn.getKeyFrames().addAll(keyImgLoad1, keyImgLoad2, keyStartFade, keyendFade, keyMoving);
timelineOn.playFromStart();

没有任何错误，但所有帧在同一时间开始播放，其间没有任何延迟。 我想看看这样的东西：

• 将图像加载到ImageView中
• 等5秒钟
• 执行不透明度动画关键帧
• 等10秒
• 执行移动动画关键帧

所以一般来说，我的问题是如何在一个时间轴中实现关键帧之间的延迟？有人能帮忙吗

Answer 1

好吧，幸好我的github上也有。但是，这是我和我的朋友在我们的动画雪人项目中创建的一种方法。布拉丹，我们就是这样做的

private void drawMouth()
    {
        mouth.setCenterX(SCENE_WIDTH / 2);
        mouth.setCenterY(95);
        mouth.setLength(30);
        mouth.setRadiusX(30);
        mouth.setRadiusY(53);
        mouth.setStartAngle(255);
        mouth.setFill(Color.BLACK);


        timeLine = new Timeline();
        timeLine.setCycleCount(Timeline.INDEFINITE);
        timeLine.setAutoReverse(true);

        KeyValue mouthXValue = new KeyValue(mouth.scaleXProperty(), 1.3);
        KeyValue mouthYValue = new KeyValue(mouth.scaleYProperty(), 2);
        KeyFrame keyFrameX  = new KeyFrame(Duration.millis(1000), mouthXValue);
        KeyFrame keyFrameY  = new KeyFrame(Duration.millis(1000), mouthYValue);

        timeLine.getKeyFrames().addAll(keyFrameX, keyFrameY);
        timeLine.play();
    }

但是，我相信在您的情况下，您可能需要使用SequentialTransition。 这段代码同样来自同一个源代码，还涉及一个淡入淡出过渡（ft，ft1），两者的持续时间都设置为1000毫秒

SequentialTransition sequentialTransition = new SequentialTransition();
        sequentialTransition.setCycleCount(Timeline.INDEFINITE);
        sequentialTransition.setAutoReverse(false);
        sequentialTransition.getChildren().addAll(ft, sunTransition, ft1, moonTransition);
        sequentialTransition.play();

试试这些尝试，让我知道它们是否有效

编辑：根据要求提供完整的源代码

private void drawPlanetaryBodies()
    {


        night.setX(0);
        night.setY(0);
        night.setWidth(SCENE_WIDTH);
        night.setHeight(SCENE_HEIGHT-10);
        night.setFill(Color.BLACK);

        FadeTransition ft = new FadeTransition(Duration.millis(1000), night);
        ft.setFromValue(1.0);
        ft.setToValue(0.0);
        ft.setCycleCount(1);
        ft.setAutoReverse(false);
        ft.play();

        FadeTransition ft1 = new FadeTransition(Duration.millis(1000), night);
        ft1.setFromValue(0.0);
        ft1.setToValue(1.0);
        ft1.setCycleCount(1);
        ft1.setAutoReverse(false);
        ft1.play();


        sun.setCenterX(SCENE_WIDTH);
        sun.setCenterY(0);
        sun.setRadius(55);
        sun.setFill(Color.YELLOW);
        sun.setEffect(new Bloom());

        Path path = new Path();
        path.getElements().add(new MoveTo(-100, 200));
        path.getElements().add(new CubicCurveTo(-100, 200, SCENE_WIDTH / 2, -100, SCENE_WIDTH + 100, 200));
        path.setFill(Color.BLACK);

        PathTransition sunTransition = new PathTransition();
        sunTransition.setDuration(Duration.millis(10000));
        sunTransition.setPath(path);
        sunTransition.setNode(sun);
        sunTransition.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT);
        sunTransition.setAutoReverse(false);


        moon.setRadiusX(45);
        moon.setRadiusY(45);
        moon.setType(ArcType.OPEN);
        moon.setCenterX(SCENE_WIDTH);
        moon.setCenterY(0);
        moon.setStartAngle(135);
        moon.setLength(180);
        moon.setStrokeType(StrokeType.INSIDE);
        moon.setFill(Color.WHEAT);
        moon.setEffect(new Lighting());

        Path moonPath = new Path();
        moonPath.getElements().add(new MoveTo(-100, 200));
        moonPath.getElements().add(new CubicCurveTo(-100, 200, SCENE_WIDTH / 2, -100, SCENE_WIDTH + 100, 200));
        moonPath.setFill(Color.BLACK);

        PathTransition moonTransition = new PathTransition();
        moonTransition.setDuration(Duration.millis(10000));
        moonTransition.setPath(path);
        moonTransition.setNode(moon);
        moonTransition.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT);
        moonTransition.setAutoReverse(false);

        SequentialTransition sequentialTransition = new SequentialTransition();
        sequentialTransition.setCycleCount(Timeline.INDEFINITE);
        sequentialTransition.setAutoReverse(false);
        sequentialTransition.getChildren().addAll(ft, sunTransition, ft1, moonTransition);
        sequentialTransition.play();


    } 

Answer 2

您需要向关键帧添加一个onFinished()并休眠一段时间。见Timeline Events