PDF to JavaFX conversion – Applying Fade-In Transitions in JavaFX

This is the beginning to a very exciting set of blogs based on transition in JavaFX. In this blog I am going to give a brief guide on how to include transitions to your basic JavaFX application. Firstly let’s create a simple JavaFX application with two node elements. A rectangle which we will apply our transition to and a button to activate the transition. Note: Transitions can be applied to node object not just a rectangle.

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.RectangleBuilder;
import javafx.stage.Stage;
 
public class TransitionTutorial extends Application {
 
    @Override
    public void start(Stage primaryStage) {
 
        //Create the rectangle using a builder
        final Rectangle rectangle = RectangleBuilder.create()
                .width(200).height(200)
                .arcHeight(10).arcWidth(10)
                .fill(Color.AQUA).build();
 
       //Create a simple button with listener to trigger transition
        Button btn = new Button("Test Transition");        
        btn.setOnAction(new EventHandler() {
            @Override
            public void handle(ActionEvent event) {
                //Fade-in code goes in here.
            }
        });
 
        BorderPane root = new BorderPane();
        root.setCenter(rectangle);
        root.setBottom(btn);
        //Sets the alignment of the button
        root.setAlignment(btn, Pos.CENTER);
 
        Scene scene = new Scene(root,300,250,Color.ANTIQUEWHITE);
 
        primaryStage.setTitle("Transition Tutorial");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

This application should look a little something like this. The button at this stage will not do anything.

Small Application

Not to worry, I am now going to show you the code to include to get the rectangle fading in. To do this you need to make two imports. The transition class and the duration class which helps as the name suggests is the timer on how quickly or slowly the fade occurs.

import javafx.animation.FadeTransition;
import javafx.util.Duration;

After which we can now start coding. Create an object of the FadeTransition with how quickly you want the fade to happen and also pass in the node you want to apply the transition to, in our case the rectangle we created ealier.

FadeTransition fadeObject= new FadeTransition(Duration.seconds(3), rectangle);

Set the object to fade from Transparent to Translucent using the following method. Zero being transparent and one being translucent.

fadeObject.setFromValue(0);
fadeObject.setToValue(1);

After which you want to add the play method which creates the animation required and gives the fade-in effect.

fadeObject.play();

Replace the //Fade-in code goes in here.with the following code below and you should now have a rectangle that fades in.

FadeTransition fadeObject= new FadeTransition(Duration.seconds(3), rectangle);
fadeObject.setFromValue(0);
fadeObject.setToValue(1);
fadeObject.play();

For a rectangle that fades-out, switch the numbers around and you should find that your rectangle fades-out.

This feature has been adapted and added to our PDF2JavaFX plugins which are available to download for NetBeans, IDEA and Eclipse.

Stay tuned as there are several other transitions to go through and eventually we will extend the application to allow you to choose which of the transitions to use. If there are any questions please do not hesitate to leave a comment.

This post is part of our “Java Articles Index” series. In these articles, we aim to explore the world of Java and Javafx. Have a look through!

Related Posts:

The following two tabs change content below.
Chika has written much of the JavaFX converter and also helps with the HTML5 converter. When not experimenting with the new features of JavaFX, he is a keen basketball player (he is the tall guy you might see at Devoxx).
Chika Okereke

About Chika Okereke

Chika has written much of the JavaFX converter and also helps with the HTML5 converter. When not experimenting with the new features of JavaFX, he is a keen basketball player (he is the tall guy you might see at Devoxx).

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>