Creating Animation from Sequence of Images in JavaFX

• Download project files - 812.5 KB
• Download JAR binary file - 798.5 KB

Introduction

JavaFX is a software platform for creating and delivering rich internet applications (RIAs) that can run across a wide variety of devices. JavaFX is used for creating Rich Internet Application like online games, etc. While browsing, I got a sequence of image of a walking dog. This image lead me to write this tip.

Using the Code

We need a sequence of images to create animations. Using this trick, we can create animation of walking, flying, swimming, etc.

You can obtain dog walking sequence image from here: http://docs.autodesk.com/3DSMAX/12/ENU/3ds%20Max%202010%20Tutorials/images/MED/Renoir-Tut/English/quadruped/dog_walk.png

Make the sequence to single images using Gimp/Photoshop. It is important to make the background as transparent. Otherwise the animation will not be good.

Now, the next step is to create objects of images in JavaFX.

final static Image DOG_1 =  new Image(JavaFX_12.class.getResource("1.png").toString());
final static Image DOG_2 =  new Image(JavaFX_12.class.getResource("2.png").toString());
final static Image DOG_3 =  new Image(JavaFX_12.class.getResource("3.png").toString());
final static Image DOG_4 =  new Image(JavaFX_12.class.getResource("4.png").toString());
final static Image DOG_5 =  new Image(JavaFX_12.class.getResource("5.png").toString());
final static Image DOG_6 =  new Image(JavaFX_12.class.getResource("6.png").toString());
final static Image DOG_7 =  new Image(JavaFX_12.class.getResource("7.png").toString());
final static Image DOG_8 =  new Image(JavaFX_12.class.getResource("8.png").toString());
final static Image DOG_9 =  new Image(JavaFX_12.class.getResource("9.png").toString());    
final static Image BG =  new Image(JavaFX_12.class.getResource("bg.jpg").toString()); 

"DOG_x" is my dogs' images object, "JavaFX_12" is my main class, "x.png" is my first image and BG is my background image's object. (x - Integers).

final ImageView dog1 = new ImageView(DOG_1);
final ImageView dog2 = new ImageView(DOG_2);
final ImageView dog3 = new ImageView(DOG_3);
final ImageView dog4 = new ImageView(DOG_4);
final ImageView dog5 = new ImageView(DOG_5);
final ImageView dog6 = new ImageView(DOG_6);
final ImageView dog7 = new ImageView(DOG_7);
final ImageView dog8 = new ImageView(DOG_8);
final ImageView dog9 = new ImageView(DOG_9);
final ImageView bg = new ImageView(BG);

The above code is to create image views from image objects previously created. So now we have created ImageView objects of images.

The next step is to create a Group object to incude images of "dog".

private Group dog;
dog = new Group(dog1);
dog.setTranslateX(300);
dog.setTranslateY(450);

The first ImageView object "dog1" is added to the group and set position of dog using member functions "setTranslateX" and "setTranslateY".

The next step is to create animation of walking. To create animation from images, we need to show the images sequentially in fast. According to the number of sequence images, we can set the set the fast. If the number of images is great, then we need less number of images to show in an unit time.

TimelineBuilder.create()
        .cycleCount(Animation.INDEFINITE)
        .keyFrames(
            new KeyFrame(Duration.millis(100), new EventHandler<ActionEvent>(){
                @Override
                public void handle(ActionEvent t) {
                    dog.getChildren().setAll(dog1);
                }
            }),
            new KeyFrame(Duration.millis(200), new EventHandler<ActionEvent>(){
                @Override
                public void handle(ActionEvent t) {
                     dog.getChildren().setAll(dog2);
                }
            }),
            new KeyFrame(Duration.millis(300), new EventHandler<ActionEvent>(){
                @Override
                public void handle(ActionEvent t) {
                     dog.getChildren().setAll(dog3);
                }
            }),
            new KeyFrame(Duration.millis(400), new EventHandler<ActionEvent>(){
                @Override
                public void handle(ActionEvent t) {
                     dog.getChildren().setAll(dog4);
                }
            }),
            new KeyFrame(Duration.millis(500), new EventHandler<ActionEvent>(){
                @Override
                public void handle(ActionEvent t) {
                     dog.getChildren().setAll(dog5);
                }
            }),
            new KeyFrame(Duration.millis(600), new EventHandler<ActionEvent>(){
                @Override
                public void handle(ActionEvent t) {
                     dog.getChildren().setAll(dog6);
                }
            }),
            new KeyFrame(Duration.millis(700), new EventHandler<ActionEvent>(){
                @Override
                public void handle(ActionEvent t) {
                     dog.getChildren().setAll(dog7);
                }
            }),
            new KeyFrame(Duration.millis(800), new EventHandler<ActionEvent>(){
                @Override
                public void handle(ActionEvent t) {
                     dog.getChildren().setAll(dog8);
                }
            }),
            new KeyFrame(Duration.millis(900), new EventHandler<ActionEvent>(){
                @Override
                public void handle(ActionEvent t) {
                     dog.getChildren().setAll(dog9);
                }
            })
        )
        .build().play();

From the 0 to 100 milli seconds, the first image "1.png" will show, and next 100 milli seconds next image, until all 9 images are shown. After the last image is shown, the process of showing image will start again from the first image. This is because we have set the cycle of animation indefinite "cycleCount(Animation.INDEFINITE)".

Now our dog has life and has started to move legs!!! But still the dog is standing there, not moving!!!. To move the dog along X-axis to generate a feeling of walking.

private void startWalking() 
{
    walk = TranslateTransitionBuilder.create()
            .node(dog)
            .fromX(-200)
            .toX(800)
            .duration(Duration.seconds(5))
            .onFinished(new EventHandler<ActionEvent>()
                    {
                        @Override
                        public void handle(ActionEvent t) {
                            startWalking();   
                        }
                    }).build();
    walk.play();
}

The function "startWalking()" is created for move the dog from -200 to 800 along in X-axis. The object to move is Group "dog" and the dog will travel from -200 to 8.00 position within 5 seconds. The Animation "walk" will finish when it reaches position 800 on X-axis. When the "walk" finishes, it will restart again from position -200.

Now we are going to the last step. Add these objects bg(Background ImageView), dog(Group) to a Group named "root".

final Group root = new Group(bg, txt, dog);        
Scene scene = new Scene(root, 800, 600);        
primaryStage.setTitle("Designer: AJITH KP");
primaryStage.setScene(scene);
primaryStage.show();
startWalking();

Now create a Scene object with "root" Group and set the size of window to 800x600. To load the scene to window, we have to use "setScene()" function of Stage class. To show the current stage, we have to call "show()" function of Stage class. And at last, we have to call the function "startWalking()" to animate to dog.

I hope you enjoyed this tip and animation trick.