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).

PDF to JavaFX conversion – Applying Slide Transitions in JavaFX

1 min read

Carrying on from my previous blog where we created a rectangle which we applied the fade-in transition to. I am going to show how to add the slide-out effect to the rectangle.

First of all, we have to clear out the contents of our current event handler. Something like this

//Create a simple button with listener to trigger transition
Button btn = new Button("Test Transition");
btn.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
//Slide-out code goes in here.
 
}
 
});

The slide-out effect can be achieved using one of two different methods. These include the PathTransition and TranslateTransition. However in this tutorial we would concentrate on the TranslateTransition Class. First of all import the necessary class library.

import javafx.animation.TranslateTransition;

Just like with the fade-in transition, an object of the TranslateTransition class has to be created containing the object to slide out and the speed at which the object will slide out. Like this:

TranslateTransition slideOut = new TranslateTransition(Duration.seconds(2), rectangle);

Having created this object the direction at which it would travel now has to be defined. Due to the fact that its a translation and therefore deals with axis this opens up several possibilities. In this example I will only show you how to slide the object to the right from the original position. To do so, we would need to apply the setByX() method to the TranslateTransition object created.

slideOut.setByX(250);

This will send the rectangle right. To make sure that the shape is completely removed from the stage the value set in this method should correspond to that in the stage width for left to right slides. This should also correspond to that in the stage height if an up and down slide-out is preferred.

And finally just like with any other animation we need the play() method to make sure that our code actually gets animated.

slideOut.play();

This is the slide-out code in its entirety.

TranslateTransition slideIn = new TranslateTransition(Duration.seconds(2), rectangle);
slideOut.setByX(250);
slideOut.play();

This can be modified to slide-out to the left as opposed to the right by negating the value in the slideOut.setByX method. This can also be change to slide-out upwards or downwards by changing the slideOut.setByX() method to slideOut.setByY() and giving the corresponding values.

If there are any questions please do not hesitate to leave a comment.

IDRsolutions develop a Java PDF Viewer and SDK, an Adobe forms to HTML5 forms converter, a PDF to HTML5 converter and a Java ImageIO replacement. On the blog our team post anything interesting they learn 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 *