JavaFX中的Timelina动画

Question

I have some trouble with TimeLine animation in JavaFX. Here my part of code:

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

No any errors, but all frames start playing in one time without any delays between. I wanted to see something like this:

• Load image into ImageView
• Wait 5 sec.
• Execute opacity animation keyframe
• Wait 10 sec.
• Execute moving animation keyframe

So in general my question is how to realise delay between keyframes in one timeline? Can somebody help?

Answer 1

You will want to add an onFinished() to the keyframes and sleep for a while. See Timeline Events

Answer 2

Okay, good thing I had it on my github as well. But, this here is from one method my friend and I created during our animate snowman project. So, bratan, this is how we went about it.

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

However, I believe in your case you may need to use SequentialTransition. This bit of code, again from the same source, also involves a fade transition (ft, ft1) both set to a milisecond duration of 1000

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

Try these attempts, and let me know if they work.

EDIT: Full source as requested.

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


    }