当前位置: 代码迷 >> java >> JavaFX中的Timelina动画
  详细解决方案

JavaFX中的Timelina动画

热度:94   发布时间:2023-07-17 20:49:27.0

我在JavaFX中使用TimeLine动画遇到了一些麻烦。 这是我的部分代码:

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秒。
  • 执行运动动画关键帧

因此,总的来说,我的问题是如何在一个时间轴中实现关键帧之间的延迟? 有人可以帮忙吗?

您将需要在关键帧上添加onFinished()并休眠一会儿。 查看

好的,我在github上也有它。 但是,这是我和我的朋友在动画动物项目中创建的一种方法。 所以,bratan,这就是我们的工作方式。

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();


    } 
  相关解决方案